はじめに
「白って200色あんねん」というアンミカさんが残したミームがありますが、200色って少なくないかと思い、本当に白が200色なのか調べてみることにしました。
200色の白の範囲
RGBそれぞれを256階調(0~255)とした場合の色の数は、16,777,216 になります。
256 × 256 × 256 = 16,777,216
そのうち、200色が白なので割合を計算してみると、0.001192% になります。
\frac{200}{16777216} × 100 = 0.001192
思っていた以上に少ないですね。
200色の白とはどこまでか？
実際にどこからどこまでが白の範囲かを計算したいと思います。
「白に近い」の定義
まず、「白からの近さ」をどう測るか決めます。今回は最もシンプルに、真っ白 (255, 255, 255) からのユークリッド距離を使います。
distance = \sqrt{(255-R)^2 + (255-G)^2 + (255-B)^2}
この距離が小さい色ほど「白に近い」とみなし、距離が近い順に200色を選んだとき、それがどこまでの範囲になるかを調べます。
プログラムで計算する
白に近い色を距離が小さい順に列挙し、上位200色の境界を求めるコードです。
// 白(255,255,255)付近の色を距離が近い順に列挙する
const MAX_DIFF = 40; // 各チャンネルの255からの最大差分
const points = [];
for (let dr = 0; dr <= MAX_DIFF; dr++) {
for (let dg = 0; dg <= MAX_DIFF; dg++) {
for (let db = 0; db <= MAX_DIFF; db++) {
const dist2 = dr * dr + dg * dg + db * db;
points.push({ r: 255 - dr, g: 255 - dg, b: 255 - db, dist2 });
}
}
}
// 距離が近い順にソート
points.sort((a, b) => a.dist2 - b.dist2);
// 上位200色の境界を求める
const top200 = points.slice(0, 200);
const boundaryDist = Math.sqrt(top200[top200.length - 1].dist2);
console.log(`200番目に近い色までの距離: ${boundaryDist.toFixed(2)}`);
// => 200番目に近い色までの距離: 6.48
実行結果:
200番目に近い色までの距離: 6.48
つまり、真っ白から距離6.48以内の色が、だいたい「白200色」に相当する範囲ということになります。RGB値でいうと、だいたい (249, 249, 249) ～ (255, 255, 255) くらいの、ごくわずかな範囲に収まってしまいます。
実際に200色を並べてみる
では、この「白に近い200色」を実際に並べてみるとどう見えるのでしょうか。距離が近い順(左上が真っ白、右下に向かうほど白から遠い)に並べたものが以下です。
思った以上に白ですね。
シミュレータを作った
ブラウザで動かせるシミュレータにしました。スライダーを動かすと、白からの距離に応じて該当する色をサンプリングして、表示するようにしています。
- 色見本(Swatches): 該当する色を距離が近い順に並べて表示(400色を超える場合は間引いて表示)
- 距離スライダー: 0(真っ白のみ)から黒までの全域(最大距離 255√3 ≈ 441.67)を動かせる
- カウントとグラフ: 該当する色数と、距離 vs 累積色数のグラフをリアルタイム表示
白は何色あるのか検証
タイトルでネタバレしていますが、私の感覚では1600ぐらいを白と呼んでもいいのではないでしょうか？ぼんやりと色がついているように感じます。
6000色まで上げても、ちょっと色が付いたかなぐらいで、人によっては白判定になるかもしれません。
最大まで上げると、さすがにこれは白ではないですね。
おわりに
今回は、白の境界線シミュレータを作って白が何色あるのか検証してみました。
私の目では、白は1600色あるという結論になりました。
もし実際にアンミカさんに会えるのであれば、「白って1600色あんねん！」ってマウントを取りたいと思います。
白をどこまでかというのは人それぞれだと思うので、実際にシミュレータを触って頂き、白は何色あるのか確認してみてください。下記がリンクになります。
シミュレータ
リポジトリ
ここまで読んで頂きありがとうございました。