きっかけ
ノンデザイナーズ・デザインブック第4版
を読んでいたところ、
色と色の関係にカラーホイールというものが、
大いに絡んでくることが分かりました。
カラーホイールとは、
「黄色」「赤」「青」を基準とした、
12色をサークル上に配置したものです。
あるとき仕事で、
簡単なWeb画面のデザインをすることになったのですが、
RGB値とその色が頭の中で紐づけられず、
色抽出ツールを使って抜き出した調べました。
注意
- このRGB値は私が私の為に私の環境で調べたものです
- 環境によって微調整は必要かと思います
- その為このRGB値はあくまで調査した際に得られた結果という位置づけです
- とはいえ私はすごく使うので、個人的には調べてよかったと思っています
カラー・ホイールについて、かるく
図:ノンデザイナーズ・デザインブック第4版
素晴らしいカラー・ホイールより引用
先ほどもすこし触れましたが、
基準となる隣通しを混ぜ合わせ、12色作られたものです。
向かい合わせの色が「補色」の関係で片方をメインにできます。
■■ Blue,orange
■■ Red,green
■■ Lime-green,violet
etc..
黄、赤、青の組み合わせを「プライマリー・トライアド」と言います。
この関係を崩さずに回転した組み合わせの色はうまく調和します。
■■■プライマリー(Yellow,red,blue)
■■■その他(Lime-green,red-orange,bluish-purple)
■■■その他(Orange,green,purple)
■■■その他(Yello-orange,violet,aqua)
etc..
これはあくまで基準となる12色「ヒュー」というもので、
黒を加えていくと「シェード」、
白を加えていくと「チント」と呼ばれるグラデーションになります。
カラー・ホイールのRGB値
番号はサークルに時計の数字を振ってます。(12,1,2..10,11)
種別は下記です。
P：原色(Primary color)
S：2次色(Secondary color)-原色の合色
T：3次色(Tretiary color)-2次色と原色の合色
| 色 | R | G | B | hex | 種別 | |
|---|---|---|---|---|---|---|
| ① | ■ | 249 | 190 | 1 | #f9be01 | T |
| ② | ■ | 241 | 150 | 1 | #f19601 | S |
| ③ | ■ | 236 | 108 | 1 | #ec6c01 | T |
| ④ | ■ | 228 | 1 | 46 | #e4012e | P |
| ⑤ | ■ | 165 | 0 | 130 | #a50082 | T |
| ⑥ | ■ | 86 | 27 | 133 | #561b85 | S |
| ⑦ | ■ | 3 | 79 | 164 | #034fa4 | T |
| ⑧ | ■ | 0 | 106 | 181 | #006ab5 | P |
| ⑨ | ■ | 0 | 163 | 173 | #00a3ad | T |
| ⑩ | ■ | 0 | 169 | 60 | #00a93c | S |
| ⑪ | ■ | 171 | 205 | 6 | #abcd06 | T |
| ⑫ | ■ | 253 | 217 | 2 | #fdd902 | P |
使用ツール
Adbe XD