PCSS カラートーンと RGB

はじめに

RGB（Red・Green・Blue）

PC やスマホなどのコンピューターで色を表現する場合、RGB が標準的な指定方法になる。これはディスプレイが色を表現するのに ■R（赤）、■G（緑）、■B（青）の光の３原色を組み合わせることによるものである。ただし、この RGB は人間の感覚からすると必ずしも直感的ではない。

たとえば、 ■黄色は ■R（赤）と ■G（緑）を混ぜることで生じるが、これは人の（色の３原色をベースとした）色彩感覚とは必ずしも一致しない。また、「もう少し色を明るくしたい」と思った場合に、色味を変えずに明度だけを上げるには、RGB 値をどのように調整すればよいか、これを推測するのはかなり難しい。

HSL（Hue・Saturation・Lightness）

HSL とは、色を人の感覚に近い形で表現するための色空間の一つ。Hue（色相）、Saturation（彩度）、Lightness（明度）の３要素で色を表現する。色味を変えずに色の鮮やかさや明るさを変えることができる。

しかし、ここでもう一つの問題がある。複数の色（色相）で彩度や明度を数値的に揃えても、人の目には同じトーン（鮮やかさ・明るさ）として認識されないケースが多い。これは、人の色覚が色相によって鮮やかさや明るさの感じ方に差があるのが原因である。たとえば、同じ彩度・明度でも黄色は青色や赤色と比べてより明るく見える。

色名	RGB	HSL（彩度・明度は同じ）	見た目の明るさ
黄 ■	255, 255, 0	60°, 1.0, 0.5	明るい
赤 ■	255, 0, 0	0°, 1.0, 0.5	中間くらい
青 ■	0, 0, 255	240°, 1.0, 0.5	暗い

このような人の色覚特有の特徴があるため、異なる色相の彩度・明度を揃えても調和感のある色合いは実現できない。これを解決する手段の一つとして PCCS がある。

PCCS（Practical Color Co-ordinate System）

PCCS（日本色研配色体系）とは | 一般財団法人日本色彩研究所

PCCS（Practical Color Co-ordinate System）は、色が私たちに与える感情効果を、色相(Hue)とトーン(Tone)の2つの系列で整理し、系統的に構成したHue-Tone Systemであることが大きな特徴になっています。マンセル表色系などは、色相・明度・彩度の3つの属性により色を表しますが、PCCSではHueとToneの2つ軸で色を系統的に表示することができるので、色の世界を一望することができることに加えて、色同士の関係性が把握しやすいために、色彩調和や配色分類などの考案がしやすいという特徴をもっています。

PCCS のポイントは色相（Hue）とトーン（Tone）という２軸で色を表現する点にある。Tone（色調）は彩度と明度を包含した概念で、異なる色相同士であっても Tone を揃えることで、視覚的な調和を取りやすくなる。Hue と Tone、Saturation（彩度）、Lightness（明度）の関係を表しているのが以下の図になる（図1）。

図1 日本色彩研究所のトーン図

図1 で v、b、s、dp などの略記号で表されているのが Tone である。略記号の周りに同じ Tone を持つ１２色の色相が円形に配置されている。PCCS では有彩色は１２個の Tone、無彩色は５つの Tone が定義されている（図2）。

図2

Tone を軸に考えることで調和のとれた配色を行いやすくなる利点がある。ただし、現在の一般的なコンピュータやプログラミング環境では、Hue と Tone を直接指定することはできない。Hue と Tone から RGB などに変換して指定する必要がある。各 Hue と Tone の組み合わせ（＝カラートーン）の正確な RGB 値を知りたくて調べてみた。

日本色彩研究所（JCRI）

国会図書館からダウンロードできる資料 ¹ で、PCCS の RGB 値を確認できる。
図1の画像から抽出した RGB と概ね一致していた。

（※画像ファイルの色は、人の目には同じ色に見える領域でも実際には RGB の各値が微妙に異なる複数の色（数値で 1 〜 3 程度）で構成されている場合がある。そのため画像ファイルからの RGB の抽出には誤差が生じる）

例として Vivid Tone の RGB とそこから算出した HSL を以下に示す。

色名	R	G	B	RGB（Hex）	H	S	L
■ V2	205	45	71	#CD2D47	350	64	49
■ V4	230	89	34	#E65922	16	80	52
■ V6	239	154	11	#EF9A0B	35	91	49
■ V8	233	195	0	#E9C300	50	100	46
■ V10	167	184	0	#A7B800	66	100	36
■ V12	15	153	93	#0F995D	160	82	33
■ V14	3	133	123	#03857B	175	95	27
■ V16	6	115	143	#06738F	191	92	29
■ V18	16	93	163	#105DA3	211	82	35
■ V20	80	74	158	#504A9E	245	37	45
■ V22	126	55	136	#7E3788	293	43	37
■ V24	170	45	106	#AA2D6A	330	58	42

DICカラーデザイン株式会社

同じ Vivid Tone でも、日本色彩研究所と比較すると明るいトーンになっている。以降紹介する他のトーンも日本色彩研究所のものと比べるとすべて明るい色を採用している。PCCS は日本色彩研究所が最初に開発したものであるが、一般的に広まっている PCCS は、オリジナルよりも明るい色のものが普及していると考えたほうがよさそうである。

色	R	G	B	RGB（Hex）	H	S	L
■	233	0	63	#E9003F	344	100	46
■	240	77	3	#F04D03	19	98	48
■	250	154	2	#FA9A02	37	98	49
■	255	229	1	#FFE501	54	100	50
■	191	212	2	#BFD402	66	98	42
■	1	148	83	#019453	153	99	29
■	0	127	132	#007F84	182	100	26
■	1	108	163	#016CA3	200	99	32
■	3	81	157	#03519D	210	96	31
■	71	59	134	#473B86	250	39	38
■	122	43	122	#7A2B7A	300	48	32
■	182	1	89	#B60159	331	99	36

+Colors

トーンと明度・彩度の関係 | +Colors
図4 +Colors の Vivid Tone

色	R	G	B	RGB（Hex）	H	S	L
■	234	86	6	#EA5606	21	95	47
■	244	161	2	#F4A102	39	98	48
■	255	225	1	#FFE101	53	100	50
■	182	209	0	#B6D100	68	100	41
■	0	162	98	#00A262	156	100	32
■	1	145	142	#01918E	179	99	29
■	1	124	176	#017CB0	198	99	35
■	0	92	170	#005CAA	208	100	33
■	80	69	152	#504598	248	38	43
■	127	49	141	#7F318D	291	48	37
■	183	7	105	#B70769	327	93	37
■	229	0	66	#E50042	343	100	45

321Web

【デザインに役立つ】カラートーンの種類と特徴【色調基準の配色】 | 321web
図5 321Web の Vivid Tone

色相の回転方向が逆向きになっている点は置いておくとして、３番目に黄色が来ており、これまでとは異なった色相が選択されている。
以下の表は色相の回転方向を他に合わせたもの。

色	R	G	B	RGB（Hex）	H	S	L
■	231	0	19	#E70013	355	100	45
■	243	152	0	#F39800	38	100	48
■	254	241	0	#FEF100	57	100	50
■	142	196	30	#8EC41E	80	73	44
■	0	153	68	#009944	147	100	30
■	0	158	150	#009E96	177	100	31
■	0	161	234	#00A1EA	199	100	46
■	0	103	182	#0067B6	206	100	36
■	29	32	136	#1D2088	238	65	32
■	146	7	131	#920783	306	91	30
■	228	0	127	#E4007F	327	100	45
■	230	0	80	#E60050	339	100	45

色カラー

トーン別の色相カラーチャート | 色カラー図5 色カラーの Vivid Tone

こちらも３番目に黄色が来る配色になっている。

色	R	G	B	RGB（Hex）	H	S	L
■	239	1	1	#EF0101	0	99	47
■	252	160	1	#FCA001	38	99	50
■	255	245	0	#FFF500	58	100	50
■	158	199	1	#9EC701	72	99	39
■	1	149	36	#019524	134	99	29
■	0	158	159	#009E9F	180	100	31
■	0	163	231	#00A3E7	198	100	45
■	0	115	179	#0073B3	201	100	35
■	0	11	119	#000B77	234	100	23
■	163	0	121	#A30079	315	100	32
■	240	1	130	#F00182	328	99	47
■	239	0	90	#EF005A	337	100	47

紙ソムリエ

表色系とは色の数値化のこと！配色に必要な知識を解説 - 紙ソムリエ図6 紙ソムリエの Vivid Tone

色	R	G	B	RGB（Hex）	H	S	L
■	238	77	0	#EE4D00	19	100	47
■	250	154	0	#FA9A00	37	100	49
■	254	227	2	#FEE302	54	99	50
■	191	212	0	#BFD400	66	100	42
■	2	147	83	#029353	154	97	29
■	3	127	133	#037F85	183	96	27
■	1	108	165	#016CA5	201	99	33
■	1	80	158	#01509E	210	99	31
■	73	58	134	#493A86	252	40	38
■	122	43	122	#7A2B7A	300	48	32
■	182	1	89	#B60159	331	99	36
■	231	3	62	#E7033E	344	97	46

カラホM

Color for Invisible Man　【カラホM】図7

24色バージョン。

色	R	G	B	RGB（Hex）	H	S	L
■	252	26	28	#FC1A1C	359	97	55
■	254	65	25	#FE4119	10	99	55
■	255	89	11	#FF590B	19	100	52
■	255	127	0	#FF7F00	30	100	50
■	255	204	0	#FFCC00	48	100	50
■	254	230	0	#FEE600	54	100	50
■	204	232	0	#CCE800	67	100	45
■	153	207	21	#99CF15	77	82	45
■	102	183	42	#66B72A	94	63	44
■	51	162	60	#33A23C	125	52	42
■	0	143	99	#008F63	162	100	28
■	0	134	120	#008678	174	100	26
■	0	122	135	#007A87	186	100	26
■	6	93	136	#065D88	200	92	28
■	9	63	135	#093F87	214	88	28
■	15	34	139	#0F228B	231	81	30
■	29	25	136	#1D1988	242	69	32
■	41	18	134	#291286	252	76	30
■	52	11	129	#340B81	261	84	27
■	86	0	125	#56007D	281	100	25
■	119	1	113	#770171	303	98	24
■	175	0	101	#AF0065	325	100	34
■	211	0	69	#D30045	340	100	41
■	239	0	39	#EF0027	350	100	47

まとめ

各 Vivid Tone の RGB 値を比較したところ、それぞれで異なる色合いを採用していることがわかった。PCCS は国際標準規格ではないので、決まった数値というものは無いと考えたほうがよい。したがってデザインの現場では、PCCS の色名やトーン分類は目安として、サンプルを参考にしつつ柔軟に捉えてよさそうである。

なお、画像ファイルからの色の抽出については画像カラー解析ツール | コロちんサイトを使用した。
（※Vivid Tone 以外の全てのトーンの RGB データは後日別な形で公開する予定です）

参考

PCCS - Wikipedia
PCCS（日本色研配色体系）〜様々な表色系vol.1 | COCOLOR
PCCSとは（色相環、トーン概念図） | 色彩101®｜カラーコーディネートと色彩学習
 PCCS-tone/ビビッド・トーン - IROUSE/DATABASE・Color harmony

P-2 PCCS表色系のiPadディスプレイ上におけるRGB値の視感測色(第46回全国大会発表論文集)↩