「#1E50A2」のような6桁のコードから、どんな色なのかを読み取るコツを解説します。
ウェブで使われる #RRGGBB 形式のカラーコード（HEXコード）は、R（赤）・G（緑）・B（青）の3つの光の強さを、それぞれ2桁ずつ並べたものです。たとえば #1E50A2 なら、Rが 1E、Gが 50、Bが A2 です。
各2桁は 00（いちばん暗い）から FF（いちばん明るい）までの256段階で表されます。3色それぞれ256段階なので、表せる色は 256 × 256 × 256 = 16,777,216色になります。
カラーコードは16進数で書かれています。0〜9のあとに、A=10、B=11、C=12、D=13、E=14、F=15 と続きます。2桁の値は「左の桁 × 16 ＋ 右の桁」で10進数に直せます。
| 16進数 | 計算 | 10進数 |
|---|---|---|
| 00 | 0×16 + 0 | 0 |
| 80 | 8×16 + 0 | 128（ちょうど中間） |
| A3 | 10×16 + 3 | 163 |
| C8 | 12×16 + 8 | 200 |
| FF | 15×16 + 15 | 255（最大） |
細かく計算しなくても、左の桁だけ見ればおおよその明るさが分かります。左の桁が 0〜3 なら暗め、8 前後なら中くらい、C〜F なら明るめです。
光の三原色は、混ぜるほど明るくなります。3色すべて最大なら白、すべて0なら黒です。
| コード | 色 | R / G / B | ポイント | |
|---|---|---|---|---|
| #FF0000 | 赤 | 255 / 0 / 0 | Rだけ最大 | |
| #00FF00 | 緑 | 0 / 255 / 0 | Gだけ最大 | |
| #0000FF | 青 | 0 / 0 / 255 | Bだけ最大 | |
| #FFFF00 | 黄 | 255 / 255 / 0 | 赤＋緑 | |
| #00FFFF | シアン | 0 / 255 / 255 | 緑＋青 | |
| #FF00FF | マゼンタ | 255 / 0 / 255 | 赤＋青 | |
| #FFFFFF | 白 | 255 / 255 / 255 | すべて最大 | |
| #808080 | 灰色 | 128 / 128 / 128 | 3つが同じ値なら灰色 | |
| #000000 | 黒 | 0 / 0 / 0 | すべて0 |
R=00（0）、G=A3（163）、B=AF（175）。赤がまったくなく、緑と青が同じくらい強いので青緑。どちらも中〜明るめなので、明るく澄んだ青緑になります。
R=1A（26）、G=23（35）、B=7E（126）。青が飛び抜けて大きいので青。ただし最大の青でも126と中くらいなので、暗い青＝紺色になります。
R=9C（156）、G=9B（155）、B=94（148）。3つの値がほぼ同じなので灰色。わずかに青が小さい分、ほんの少し黄みのある灰色になります。
#1e50a2 と #1E50A2 は同じ色です。#F0A のような3桁は、各桁を2回ずつ繰り返した #FF00AA と同じ意味です。#RRGGBBAA のように末尾2桁が付く場合、最後の2桁は透明度を表します。「激ムズ」レベルでは、似ている4つのカラーコードから正解を選びます。まずいちばん大きい値で色の方向を絞り、次に全体の大きさで明るさを比べると、選択肢を減らしやすくなります。
「この色も256色あんの？」レベルでは、ほぼ同じに見える4色から、お題と同じ色を見分けます。1つの値が数段階違うだけの色は、肉眼ではほとんど区別できないこともあります。画面の明るさや設定でも見え方が変わるので、明るい画面で挑戦してみてください。
激ムズレベルに挑戦する →