配色の基本

色の基本

色はさまざまな要素から構成される。色の構成要素として、色相、明度、彩度の3つが用いられることが多い。（HSV色空間）

赤、青、黄色といった、「色味」に当たる要素。色相を円状に配置したものは色相環と呼ばれる。 (下図; https://ja.wikipedia.org/wiki/補色より)

色相環上で近くに位置する色は類似色と呼ばれることがある。また、対角に位置する色どうしは補色とよばれ、互いを引き立て合う効果がある。

色の明るさを表す指標。明度が低いほど黒に近づいて暗くなる。

高 < 明度 > 低

色の鮮やかさを表す指標。彩度が低いほどグレーに近くなる。

高 < 彩度 > 低

彩度や明度の差のことをコントラストとよぶ。

色の記述方法の一つ。 16進数で2桁ずつ、赤・緑・青 (RGB) の値を指定することで色を表現する。

#FFFFFF (白)	#FF0000 (赤)	#00FF00 (緑)	#0000FF (青)	#000000 (黒)

原色など彩度の高い色は避ける。
- 原色の赤よりも明度や彩度を抑えた赤
- 黒も純粋な黒 (#000000) ではなく、わずかに灰色がかった黒 (例えば #444444) が推奨されている。
色の持つ意味から逸脱する使い方をしない。 (「危険」、「暗い」など)
使用する色の数は4色程度に抑える。 ( 白背景+ 基本文字■+ メイン■+ 強調■ など )
相性の悪い背景色と文字色の組み合わせを避ける。
- コントラストが弱い ( 濃い青に黒 , 薄い緑に白など )
- 彩度が高い文字色に同程度の明度の背景色 ( 灰色に赤など)

基本に沿っていれば好きな色を使うと良い。多数の色を使う場合、色分けされる対象のもつ意味や色覚多様性を考慮して、既に考えられているパレットを使うのが安全。

連続値データの色分けに適している。

#FDE725	#7AD151	#22A844	#2A788E	#414487	#440154

#0D0887	#6A00A8	#B12A90	#E16462	#FCA634	#F0F921

連続値データの色分けに適している。特に、気温など0を基点に正負両側に値を取るデータに適する。

#8C510A	#D8B365	#F6E8C3	#F5F5F5	#C7EAE5	#5AB4AC	#01665E

#D73027	#FC8D59	#FEE090	#FFFFBF	#E0F3F8	#91BFDB	#4575B4

カテゴリカルなデータの色分けに適している。

#000000	#E69F00	#56B4E9	#009E73	#F0E442	#0072B2	#D55E00	#CC79A7

#EE6677	#228833	#4477AA	#CCBB44	#66CCEE	#AA3377	#BBBBBB

私がよく参考にするサイト。

WEB色見本
- 原色、和色、洋色、モノトーンなど、カテゴリーごとにカラーコード付きで色を閲覧可能
- 色ごとの配色パターン一覧、色検索、色の調合など機能が盛りだくさん
COLORBREWER
- 色分けの数や意味 (Sequential/Diverging/Qualitative) ごとにパレットを検索可能
- 色覚多様性や印刷に適した組み合わせに絞ることもできる。
- R の ggplot2 で使えるパレットなのも嬉しい。
Adobe Color
- 色相環上で色を探しつつ、さまざまな配色パターンを閲覧可能

東京メトロ線のカラーコード。 2015年頃にカラーユニバーサルデザインに変更された。わずかな違いでも人によって見えやすさが大きく異なることがわかる好例。

変更前:

#FF9500	#F62E36	#B5B5AC	#009BBF	#00BB85	#C1A470

銀座線	丸の内線	日比谷線	東西線	千代田線	有楽町線

#8F76D6	#00AC9B	#9C5E31

半蔵門線	南北線	副都心線

変更後:

#F39700	#E60012	#9CAEB7	#00A7DB	#009944	#D7C447

銀座線	丸の内線	日比谷線	東西線	千代田線	有楽町線

#9B7CB6	#00ADA9	#BB641D

半蔵門線	南北線	副都心線