Webデザインやアプリ開発で目にする #FF8800 や #A08CC8 のような文字列。これは「HEXカラーコード」と呼ばれ、色を赤・緑・青の3つの量で表したものです。ルールさえ知っていれば、カラーピッカーを開かなくてもコードを見ただけで「だいたいこんな色」と見当をつけることができます。

この記事では、その読み方を順を追って説明します。

1. #RRGGBB は「赤・緑・青」の3つの組

HEXカラーコードは、先頭の # に続く6桁を2桁ずつに区切って読みます。

画面の色は光の三原色を足し合わせて作られています(加法混色)。3つの量がすべて最大なら白、すべてゼロなら黒になります。

2. 2桁は 00〜FF の16進数

それぞれの2桁は16進数で、0〜9 のあとに A(10)・B(11)・C(12)・D(13)・E(14)・F(15) が続きます。2桁の値は「1桁目 × 16 + 2桁目」で10進数に直せます。

正確に計算できなくても大丈夫です。1桁目だけを見て「0〜3は少ない、4〜B は中くらい、C〜F は多い」とざっくり読むだけで、色の見当はかなりつきます。

3. まず覚えたい基本の色

色コード読み方
#FF0000赤だけ最大 → 赤
#00FF00緑だけ最大 → 緑
#0000FF青だけ最大 → 青
#FFFF00赤 + 緑 → 黄
#00FFFF緑 + 青 → シアン
#FF00FF赤 + 青 → マゼンタ
#FFFFFFすべて最大 → 白
#808080すべて同じ中くらい → グレー
#000000すべてゼロ → 黒

ポイントは「3つの組が同じ値なら、色みのないグレー(無彩色)」になることです。#333333 は暗いグレー、#CCCCCC は明るいグレーです。

4. 3ステップで色を想像する

複雑なコードも、次の3つの順番で見ていくと読みやすくなります。

ステップ1:いちばん大きい組で「色の系統」をつかむ

赤が最大なら赤〜オレンジ〜ピンク系、緑が最大なら緑系、青が最大なら青〜紫系です。2つの組が同じくらい大きければ、その中間(赤と緑なら黄、緑と青ならシアン、赤と青ならマゼンタ寄り)になります。

ステップ2:最大と最小の差で「鮮やかさ」を見る

差が大きいほど鮮やかで、差が小さいほどグレーに近いくすんだ色になります。#FF3300 は差が大きく鮮やか、#997766 は差が小さく落ち着いた色です。

ステップ3:全体の大きさで「明るさ」を見る

3つの組がどれも大きければ明るい色(パステル寄り)、どれも小さければ暗い色になります。

読み方がわかったら、あとは慣れです。Color Master(無料・iOS)なら、カラーコードや色の違いにまつわる問題を、ゲーム感覚でくり返し練習できます。

5. 実際に読んでみよう

色コード読み方
#E8A33D赤が最大(232)、緑が中くらい(163)、青が少ない(61) → 赤と緑の中間寄り、つまりオレンジ〜山吹色。差が大きいので鮮やか。
#2E5E8A青が最大(138)、全体に値が小さめ → 落ち着いた暗めの青。
#A08CC8青が最大(200)、赤(160)も高め、全体に明るい → 青と赤の中間寄りでやわらかいラベンダー。このサイトのアクセントカラーです。

6. 知っておくと便利な書き方

7. 数値と「見た目」はぴったり比例しない

ひとつ注意したいのは、数値が半分だからといって、明るさが半分に見えるとは限らないことです。一般的な画面の色(sRGB)では、数値と見た目の明るさの関係は直線ではありません。また、同じ数値でも緑は明るく、青は暗く感じられやすい傾向があります。

だからこそ、計算だけでなく「コードを見て想像する → 実際の色と見比べる」をくり返して、目と数値の感覚をすり合わせていくことが上達の近道です。

まとめ

関連記事:補色とは?見つけ方とカラーコードでの計算方法・配色のコツ