UX
デザイン

カラー・ホイールのRGB値を調べた


きっかけ

ノンデザイナーズ・デザインブック第4版

を読んでいたところ、

色と色の関係にカラーホイールというものが、

大いに絡んでくることが分かりました。

カラーホイールとは、

黄色」「」「」を基準とした、

12色をサークル上に配置したものです。

あるとき仕事で、

簡単なWeb画面のデザインをすることになったのですが、

RGB値とその色が頭の中で紐づけられず、

色抽出ツールを使って抜き出した調べました。


注意


  • このRGB値は私が私の為に私の環境で調べたものです

  • 環境によって微調整は必要かと思います

  • その為このRGB値はあくまで調査した際に得られた結果という位置づけです

  • とはいえ私はすごく使うので、個人的には調べてよかったと思っています


カラー・ホイールについて、かるく

図:ノンデザイナーズ・デザインブック第4版

素晴らしいカラー・ホイールより引用

image.png

先ほどもすこし触れましたが、

基準となる隣通しを混ぜ合わせ、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


参考資料

ノンデザイナーズ・デザインブック第4版