前言
有一個安美佳小姐留下的 meme：「白色有 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 種顏色啦！」來小小地炫耀一下。
不過白色到底要算到哪裡，應該每個人都有不同標準；歡迎大家實際操作看看這個模擬器，親自確認白色到底有幾種顏色。以下是連結。
模擬器
儲存庫
感謝你讀到最後。
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
