päivittäin kukka

  • twitter
  • facebook
  • instaglam
  • rss

クリエイティブ

配色で迷った時に使えるツール!「HUE/360」

HUE/360

Webサイトを作っていて配色で迷う時があります。
そんな時に見つけた配色ツール「HUE/360」をご紹介したいとおもいます。

HUE/360

この配色ツールの良い所はRGBでなくHSVで配色を決める事ができる所です。色を数値や記号で表す方法には二通りあります。

「混色系」と呼ばれるもので色や光の三原色を混ぜあわせて表現されるものです。RGBやCMYなどがこれに入ります。数字を扱うので機械が使うのに向いています。

もう一つは、「顕色系」と呼ばれるもので色相(hue)、彩度(chroma)、明度(value,brightness)を使って色を表現するものです。マンセル表色系やPCCS表色系などがこれに入ります。人間の知覚に近いかたちで表現されているので色の組み合わせが想像しやすいです。

説明をしなくても直感的に触れるUIですが、少しだけ説明をします。

HUE/360_Brightness

画面左にあるBrightnessと書かれたグレースケールが明るさになっています。
右へ行くほど画面右にある色相環全体の明度が低くなっていきます。

HUE360_Controller

次にCiecle Controllerと書かれた部分の説明です。
一番左のColor Spaceは色空間の事で「Mancell・RGB・RGB+」の三種類から選べます。その右隣のHue Stepは色相環上の色合いが増えます。100にしてみると綺麗なカラーサークルになりました。

HUE/360_Color Circle

その隣のChroma Stepは明度のステップ数が調整できます。
最後にM&S JudgeはONにしておくと一番最初に選んだ色と調和する色だけを表示するという設定です。
調和の種類には「同一色相配色・類似色相配色・対照色相配色・スプリットコンプリメンタリー(分裂補色配色)」があります。

HUE/360_配色

好きな色を使って配色してみました。
色が選び終わったら最初に選んだ色のPrint User Colorという文字を押すと、上の画像のようにRGB値のカラーコードが表示されます。
とても簡単に扱えて便利なので色々試しながら色を選んでみると、配色がさらに楽しくなるとおもいます。

関係ないですが、去年色彩検定1級落ちてしまったので今年はしっかり勉強して取りたいなとおもいます。

こちらの記事もよく読まれてます。