サイトの配色に困った時に簡単にバランスの取れた色を選ぶことができる調和配色アプリ「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で送る
  • このエントリーをはてなブックマークに追加

コメントを残す




関連記事

ソースのストックするならこの中から!ソースコード管理・整理に便利なオンラインのスニペットツール7選
.htaccessや.htpasswdなどの生成してくれる「lufttools」がすこぶる使える!
関西のWebデザイナー・クリエイター等のIT関係のセミナーをまとめてみました。
プレビューを見ながら簡単にスタイリッシュなグラデーションを作成できるCSS3ジェネレーター「Ultimate CSS Gradient Generator」
WEB制作で無料写真素材を探すならPixabay!高品質で素敵な画像が役立ち過ぎる!
Webデザインをする時に参考にしたいウェブデザインのまとめサイト ※国産サイト
好きな色や大きさにカスタマイズしたアイコンを無料でダウンロードできる「PNGify Me」が便利!
Webデザインに関連するテクニックやツール人気の役立つネタだけを厳選して紹介している「デザインフィードデータベース」
初心者必見!PHPを勉強したい方へおすすめしたい学習サイト6選
Webデザインの参考になるイケてるサイトを集めたギャラリーサイト「イケサイ」
角丸・グラデーション・影・透過を表現するCSS3コードを自動生成してくれるジェネレータ「CSS3 Generator」
Web制作のグラデーションに便利なCSS3ジェネレーターまとめ ※随時更新
横並びのカラム計算に便利!ビジュアルで確認できるグリッドシステム計算ツールGridpx
作成したHTMLやCSS・JavaScriptコードを共有できる「jsdo.it」
Web制作に欠かせない各ブラウザのスタイルを初期化するCSSリセットを集めたWebサイト「css reset」

Menu

HOME

 TOP