きっかけ

ノンデザイナーズ・デザインブック第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

参考資料

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