サイトの配色に困った時に簡単にバランスの取れた色を選ぶことができる調和配色アプリ「HUE/360」

Capture_NoName_2013-4-20_15-31-48_No-00

サイトの配色に困った時に簡単にベースカラーやサブカラーなどの配色の選定をしやすくするためのWebサービス「HUE/360」を紹介します。

色相で色を選択してバランスの取れたサブカラーだけを表示し、カラーコードまで提示してくれるサイトです。

1. 明度を選択する

左側にあるBrightness部分にある色を選択して全体の明度を選択します。

明度の高い色を配色したければ白い色を、明度の低い色を配色したければ黒い色をクリック

2. 基本的な使い方

グレースケールトーンの右側にある色相環全体の明度が下記のように連動して変化します。
基本的な使い方としてはこの色相環から配色したいベースカラーをピックアップしていきます。

meido-change

※オプション項目について

Capture_NoName_2013-4-20_15-45-51_No-00

  • Color Space:利用する色空間の種類
    (Munsell・RGB・RGB+」の3種類の中から選択)
  • Hue Step:色相環上の色相(色合い)のステップ数
    (値を増やすと色相差が小さく色数が多くなり、減らすと色合いの差がハッキリして選択できる色数が減ります。)
  • Chroma Step:明度の調整
    (値を小さくすれば同色相での明度差が明瞭になり、大きくすれば隣接するものの明度差が小さく選択できる色が増えます。)
  • M&S Judge
    ONにしておくと最初に選んだカラーと調和するカラーだけが表示されてそれ以外がはじかれるようになります。

3.色を選択する

色を選択していくと不調和な色相が非表示になり選択された色が左下にバーとして表示されます。

Capture_NoName_2013-4-20_16-14-13_No-00

 

4. 選択したカラーコードを確認する

最初に選んだカラーの左端に「Print User Color」という表示がありこれをクリックすると選択したカラーコードが表示されます。

Capture_NoName_2013-4-20_16-16-30_No-00

 

配色に自信のない方や見直したい方はぜひ一度チェックしてみてくださいね。

おすすめ記事

  • Pocket
  • LINEで送る
  • このエントリーをはてなブックマークに追加

コメントを残す




関連記事

横並びのカラム計算に便利!ビジュアルで確認できるグリッドシステム計算ツールGridpx
ソースのストックするならこの中から!ソースコード管理・整理に便利なオンラインのスニペットツール7選
Webデザインの参考になるイケてるサイトを集めたギャラリーサイト「イケサイ」
プログラミング等を3分動画で初心者向けに動画で解説してくれる「ドットインストール」
デザインのためのインスピレーションの助けになるSNS風コミュニティサイト「Dribbble」
プレビューを見ながら簡単にスタイリッシュなグラデーションを作成できるCSS3ジェネレーター「Ultimate CSS Gradient Generator」
無料で使えるロゴをダウンロードできる素材集サイト「LogoInstant」
.htaccessや.htpasswdなどの生成してくれる「lufttools」がすこぶる使える!
Web制作に欠かせない各ブラウザのスタイルを初期化するCSSリセットを集めたWebサイト「css reset」
Google Mapの制作に便利!サササッとGoogleMapの地図を埋め込む「0円のマップ屋さん」が素敵
Web制作のグラデーションに便利なCSS3ジェネレーターまとめ ※随時更新
好きな色や大きさにカスタマイズしたアイコンを無料でダウンロードできる「PNGify Me」が便利!
顔バレを防げてSNSのアイコンにも使えるBrickapic。簡単にレゴ風自画像が作れて便利!
Webデザインに関連するテクニックやツール人気の役立つネタだけを厳選して紹介している「デザインフィードデータベース」
PDFが劇的に圧縮される!無料・オンラインでPDFの容量を減らすSmallpdf.com

Menu

HOME

 TOP