#FFFFFF 和 #FFFFF0 只差最後一位數，換算成 RGB 是藍色少了 15，白色就從純白變成了象牙白。
這種差距小到很容易被忽略，真正要選的時候卻不好拿捏。搜尋米白、乳白、暖白的色碼，每個網站給的答案都不一樣；背景從純白換成偏黃的白，原本讀得清楚的灰色文字，也可能悄悄掉到可讀性門檻以下。
要避開這些狀況，得先弄懂白色在色碼裡是怎麼組成的，因為任何一個數字動了一點，整張畫面的氣氛就會跟著變。
純白在 HEX、RGB、HSL 與 CMYK 的寫法
純白只有一種顏色，卻有好幾種寫法，網頁、設計軟體、印刷稿各用各的。W3C 的《CSS Color Module Level 4》規格裡，white 這個色名等於 #ffffff，也等於 RGB 的 255、255、255，三個通道全部拉到最高。下面這張表是同一個純白在不同場合的標法，可以直接複製。
| 寫法 | 純白的標示 | 用在哪裡 |
|---|---|---|
| HEX 六位 | #FFFFFF | 網頁、多數設計軟體的色碼欄 |
| HEX 三位簡寫 | #FFF | 網頁 CSS，每位數重複一次後展開 |
| CSS 色名 | white | 網頁 CSS，直接寫英文單字 |
| RGB | rgb(255 255 255) | 網頁與螢幕類設計稿 |
| HSL | hsl(0 0% 100%) | 網頁 CSS，用色相、飽和度、明度描述 |
| CMYK | 0%、0%、0%、0% | 印刷稿，四色都不上墨 |
| 八位 HEX 半透明白 | #FFFFFF80 | 網頁 CSS，最後兩位是透明度 |
三位簡寫的規則是每個數字重複一次，規格裡的範例是 #123 展開成 #112233，所以 #FFF 就等於 #FFFFFF。簡寫每個通道只有 16 種數值，一共能表達 4,096 種顏色，六位寫法則有約 1,700 萬種，因此簡寫只適合像純白這種剛好每位數字都重複的顏色，其他顏色硬縮成三位通常會跑色。
HSL 的寫法比較特別，明度（lightness）設成 100% 就是白色，這時候色相和飽和度填任何數字結果都一樣。八位 HEX 則是在六位後面多加一組透明度，80 約等於 50% 不透明，用在疊在照片上的半透明白色色塊很方便。
CMYK 的白色寫成 0／0／0／0，意思是四種油墨都不上，露出來的就是紙張本身。這是印刷的通用慣例，實際轉換的結果還是會隨色彩描述檔（ICC profile）略有差異，所以這裡只列純白，其他色碼的 CMYK 不逐一換算。這幾種寫法標示的都是同一個純白，差別只在各自的使用場合。
暖白與冷白的差別在 RGB 被調低的那個數字
白色本身沒有色偏，RGB 三個通道都是 255 的時候，畫面上沒有任何一種顏色比較突出。暖白與冷白其實是把其中一個通道往下拉了一點，拉低的通道不同，偏向的方向就不同。
藍色被拉低，畫面少了藍色，整體就偏黃，看起來比較暖；紅色被拉低，畫面少了紅色，就偏向藍綠，看起來比較冷；三個數字一樣，則是不偏任何方向的中性白。學會這個判讀方式，之後看到任何一組白色色碼，都能自己判斷它偏哪一邊。
網頁色碼的色偏，取決於被拉低的通道
拿規格裡的幾個命名顏色來看最清楚。象牙白（ivory）是 #FFFFF0，RGB 為 255、255、240，只有藍色少了 15，所以偏黃。愛麗絲藍（aliceblue）是 #F0F8FF，RGB 為 240、248、255，紅色少 15、綠色少 7，紅色被拉得最低，所以偏藍。白煙（whitesmoke）是 #F5F5F5，三個數字都是 245，沒有色偏，只是比純白暗一階。
每一個例子都只要看「哪個數字比 255 低、低多少」，就能判斷方向和強弱，被拉低的差距越大，色偏就越明顯。
另外要知道，螢幕上並沒有絕對的白。#FFFFFF 只是「這台螢幕能發出的最亮的白」，它實際看起來偏什麼顏色，取決於螢幕設定的白點。W3C 規格把 sRGB 定為 CSS 的預設色彩空間，而 sRGB 規定的白點是 D65，色度座標為 x=0.3127、y=0.3290，對應的色溫約 6504K，白色亮度為 80 cd/m²。所以同一組色碼在不同螢幕上，看起來會有些許出入，這也是為什麼挑白色必須在目標裝置上實際看過。
燈光標示的暖白與冷白用的是色溫 K 值
搜尋暖白、冷白的人裡，有一部分其實是在找燈泡。燈光的暖白與冷白，是用 K（克耳文，Kelvin）標示的色溫，網頁色碼的暖白冷白只是 RGB 數字之間的相對偏向，兩個系統不能互相換算。
美國 ENERGY STAR 的 LED 燈泡選購指南用 K 值標示光色，K 值越低，光越暖、越偏黃；K 值越高，光越冷、越偏藍。指南上的色溫軸從 2200K 標到 6500K，2200K 到 3000K 一帶屬於暖白光，最冷的 5000K 到 6500K 則稱為日光，指南形容這段光色就像正午的藍天。
前面提到 sRGB 的白點約 6504K，放到燈光的語境裡，已經落在偏冷、接近日光的一端，換句話說，以燈光的標準來看，螢幕上的純白並不算暖。網頁的色碼欄沒有地方填 K 值，燈泡包裝上的色溫也沒辦法拿來挑 HEX，需要暖白就直接從下一節的色碼表挑。
暖白色碼分成偏黃、偏粉橘與偏米褐三類
暖白在 RGB 上的規律大致固定，多半是藍色被拉得最低，綠色次之，紅色幾乎不動。W3C 規格命名顏色表裡屬於暖白的色名，可以依色偏分成偏黃、偏粉橘、偏米褐三組。表格裡的中文譯名是常見叫法，各站寫法不完全一致，溝通時以英文色名或 HEX 為準。
象牙白、花白與玉米絲色等偏黃暖白
這是藍色通道被拉低最多的一組，也是最常拿來當「溫和一點的白底」的選擇。
| 英文色名 | 常見中文譯名 | HEX | RGB | 色偏說明 |
|---|---|---|---|---|
| ivory | 象牙白 | #FFFFF0 | 255 255 240 | 只有藍色少 15，最接近純白 |
| floralwhite | 花白 | #FFFAF0 | 255 250 240 | 綠色少 5、藍色少 15，黃裡帶一點暖 |
| cornsilk | 玉米絲色 | #FFF8DC | 255 248 220 | 藍色少 35，已經看得出米色 |
| beige | 米色 | #F5F5DC | 245 245 220 | 紅綠各少 10、藍色少 35，偏黃 |
四個顏色的藍色通道依序是 240、240、220、220。ivory 和純白只差 15，並排時差異很小，很適合直接當整頁的大面積背景。floralwhite 的綠色也略低，比 ivory 多一點橘調，用法相同。cornsilk 和 beige 是這組裡最黃的兩個，已經是「看得出是米色」的程度，放在整頁背景會有明顯的色調，比較適合用在卡片、側欄或區塊底色這類小面積位置，讓它和純白底形成層次。
貝殼白、亞麻色與舊蕾絲色等偏粉橘暖白
綠色與藍色同時被輕微拉低，帶一點肉粉或奶茶感的暖白，歸在這一組。
| 英文色名 | 常見中文譯名 | HEX | RGB | 色偏說明 |
|---|---|---|---|---|
| seashell | 貝殼白 | #FFF5EE | 255 245 238 | 綠少 10、藍少 17，淡淡的粉橘 |
| oldlace | 舊蕾絲色 | #FDF5E6 | 253 245 230 | 紅少 2、綠少 10、藍少 25，偏奶油 |
| linen | 亞麻色 | #FAF0E6 | 250 240 230 | 紅少 5、綠少 15、藍少 25，奶茶感 |
| snow | 雪白 | #FFFAFA | 255 250 250 | 綠藍各少 5，淡淡的粉 |
| lavenderblush | 薰衣草紫紅 | #FFF0F5 | 255 240 245 | 綠少 15、藍少 10，偏粉 |
這組適合用在需要柔和、不想要死白，又不想帶太多黃色的版面。oldlace 和 linen 的藍色通道降得比較多，暖感也比較明顯，適合整頁背景或大面積區塊。seashell 的藍色只少 17，暖感介於純白與這兩個顏色之間，是比較保守的選擇。
snow 和 lavenderblush 的特點是綠、藍只被輕微拉低，而且藍色幾乎不比綠色低（snow 綠藍相同，lavenderblush 的藍色還比綠色高 5），所以色偏落在粉紅，而不是黃。這兩個顏色用在需要一點柔和氣氛的小區塊，比整頁鋪滿更好控制。
偏米褐的骨董白是暖白的下限
骨董白（antiquewhite）是 #FAEBD7，RGB 為 250、235、215，紅色少 5、綠色少 20、藍色少 40。它比前面幾組都深一檔，這裡把它當作暖白的下限，再往下，色彩就已經不算白了。
規格裡另外兩個相近的 papayawhip（#FFEFD5，255 239 213）與 blanchedalmond（#FFEBCD，255 235 205），藍色通道已降到 213 與 205，視覺上偏向淺膚色或杏色，不再歸在白色之列。
知道這條界線，就不用去猜「米白最深可以多深」。antiquewhite 還能勉強當背景使用，但中灰色文字放在它上面，對比會掉到 4.5 以下，文字顏色要挑深一點。
冷白色碼以藍調為主，另有綠調與中性白
冷白和暖白剛好對稱，暖白是藍色通道往下掉，冷白則是紅色在三個通道裡最低，或與另一個通道並列最低。W3C 規格的命名顏色裡，冷白以藍調居多，另有兩個偏綠的，以及三值相同的中性白。
愛麗絲藍與幽靈白等偏藍冷白
| 英文色名 | 常見中文譯名 | HEX | RGB | 色偏說明 |
|---|---|---|---|---|
| ghostwhite | 幽靈白 | #F8F8FF | 248 248 255 | 紅綠各少 7，色偏最淡 |
| aliceblue | 愛麗絲藍 | #F0F8FF | 240 248 255 | 紅少 15、綠少 7，藍調明顯 |
| azure | 蔚藍色 | #F0FFFF | 240 255 255 | 只有紅少 15，偏青 |
ghostwhite 的紅、綠只各低 7，是這組裡最安全的一檔，拿來當整頁背景不容易出錯。aliceblue 紅色少 15，藍調一目了然，更適合當卡片或表單底色，和純白或 ghostwhite 的頁面形成層次。azure 的綠、藍都滿格，只有紅色低，所以色偏落在青綠，放在整頁背景會有很強烈的冷調，建議只用在小區塊。
薄荷奶油色與蜜瓜色等偏綠冷白
| 英文色名 | 常見中文譯名 | HEX | RGB | 色偏說明 |
|---|---|---|---|---|
| mintcream | 薄荷奶油色 | #F5FFFA | 245 255 250 | 紅少 10、藍少 5，綠調很淡 |
| honeydew | 蜜瓜色 | #F0FFF0 | 240 255 240 | 紅藍各少 15，綠調比 mintcream 更明顯 |
綠調冷白是容易被忽略的一組，色偏很淡，適合需要乾淨、又帶一點自然感的背景。mintcream 偏向青綠，honeydew 則偏向嫩綠。
綠調的白不像藍調那麼常見，建議在定案之前，先在實際使用的螢幕上看過，不要只看色碼表就決定。
白煙等 R、G、B 三值相同的中性白
三個數字一樣就沒有色偏。whitesmoke（#F5F5F5，245、245、245）是最常見的「比純白低一階」的中性選擇。
中性白搭配什麼顏色都不會因為底色而走偏，這是它最大的好處，代價則是少了氣氛，畫面看起來比較中規中矩。
再往下的 gainsboro（#DCDCDC，220）與 lightgray（#D3D3D3，211）已經是淺灰，不再算白，放在這裡只當作白與灰的分界。從 245 掉到 220，看起來就已經是「換成灰色」了。
米白、乳白、珍珠白這類中文色名沒有標準色碼
台灣讀者搜尋時，往往直接打中文色名。問題是 CSS 規格只定義英文色名，「米白」「乳白」「珍珠白」根本不在規格裡，所以各站給的色碼不一致，並不是誰錯了，而是這些名字本來就沒有標準值。
要避免各說各話，做法很單純，挑一個 HEX 寫進團隊的色票，不要靠色名來溝通。
中文白色名稱與最接近的 CSS 色名
下面這張表把常見的中文白色名稱，對照到 W3C 規格有定義的英文色名。有標準的直接給色碼，沒有標準的就明說沒有。
| 中文色名 | 最接近的 CSS 色名 | HEX | 狀態 |
|---|---|---|---|
| 象牙白 | ivory | #FFFFF0 | 規格有定義 |
| 花白 | floralwhite | #FFFAF0 | 規格有定義 |
| 雪白 | snow | #FFFAFA | 規格有定義 |
| 米色 | beige | #F5F5DC | 規格有定義 |
| 亞麻色 | linen | #FAF0E6 | 規格有定義 |
| 米白 | 無 | 無 | 沒有標準值 |
| 乳白 | 無 | 無 | 沒有標準值 |
| 珍珠白 | 無 | 無 | 沒有標準值 |
沒有標準值的三個名字，可以從相近的 CSS 色名起步，再自己微調。以下是本文建議的起點，不是標準答案：
- 乳白：可從 ivory 或 floralwhite 起試，這兩個都偏奶黃，暖感剛好。
- 米白：可在 oldlace、linen、beige 之間選，越往 beige 靠色偏越黃、越往 oldlace 靠越接近奶油色。
- 珍珠白：規格裡沒有可以對應的色名，建議直接自訂，不必硬套一個接近的名字。
選好之後，把確定的 HEX 連同用途寫進色票，例如「頁面背景 #FFFFF0」，設計師與工程師之後就不會各自理解成不同的米白。
轉載色碼表常見的抄寫錯誤與查證方式
被大量轉載的中文色碼表，偶爾會出現抄錯的色碼。假設某張表把「象牙白」標成 #FAFFF0，和 W3C 規格裡 ivory 的 #FFFFF0 只差一個字元，紅色通道卻從 255 變成 250，整個顏色往黃綠偏。
「白杏仁」也是一樣，若被抄成 #FFFFCD，對照 W3C 規格的 blanchedalmond #FFEBCD，綠色通道從 235 變成 255，顏色就從淺杏色變成淡檸檬黃。
查證的方法很簡單，打開 W3C 的 CSS Color Module Level 4，找到命名顏色表，搜尋該色的英文色名，再逐位比對 HEX。從別人整理的色碼表複製顏色時，用到之前先抽幾個核對過，比事後在成品裡發現色偏省事得多。
白底換成米白或冷白後，灰字的對比會先過不了關
把純白背景換掉，最容易被忽略的是文字的對比。純白底上通過檢查的灰色字，換到米白或骨董白底，就可能掉到門檻以下。色碼表通常只列色碼，不會告訴你換了底色之後，文字的對比值變成多少。
WCAG 對正文與大字的對比門檻
W3C 的 WCAG 2.2（Success Criterion 1.4.3）規定，一般文字與背景的對比至少要 4.5:1；大字的門檻放寬為 3:1。這裡的大字指至少 18pt，或 14pt 的粗體，中日韓字體則以等效大小計算。
規格也提醒，計算出來的數值不能四捨五入，4.499:1 就是不達標。
同一個灰字在不同白底上的實算結果
下面這張表依 WCAG 的相對亮度公式實算，列出三種文字顏色在七種白底上的對比值。其中 #FAF9F6 是設計師常用的自訂米白，不屬於 CSS 命名顏色。
| 底色 | #333333 | #767676 | #999999 |
|---|---|---|---|
#FFFFFF 純白 | 12.63 | 4.54 | 2.85 |
#FFFFF0 ivory | 12.52 | 4.50 | 2.82 |
#FAF9F6 常見自訂米白 | 12.00 | 4.31 | 2.71 |
#F5F5F5 whitesmoke | 11.59 | 4.17 | 2.61 |
#F8F8FF ghostwhite | 11.95 | 4.30 | 2.69 |
#FAF0E6 linen | 11.23 | 4.04 | 2.53 |
#FAEBD7 antiquewhite | 10.79 | 3.88 | 2.43 |
表中可以看出幾件事。第一，深色字 #333333 換到任何一種白底都有 10 以上，遠高於 4.5，所以文字夠深的話，換底色不必擔心。
第二，真正會出問題的是中灰色的字。#767676 在純白底上是 4.54，剛好過關；在 ivory 上是 4.50，已經是臨界；到了 #FAF9F6 就降到 4.31，低於 4.5。linen 與 antiquewhite 上更只剩 4.04 和 3.88，介於一般文字與大字的門檻之間，只有大字還能過。
第三，#999999 這類淺灰字更嚴重。它在純白底上就只有 2.85，換成表中任何一種白底都更低，連大字的 3:1 也過不了。
挑白底的順序因此是先定底色，再用實際要用的文字顏色重新驗證一次對比，不要拿原本的文字色硬套新底色。
白色搭配的四組色碼，附實算對比值
這裡有四組可以直接複製的搭配，每組都是一個白底，加一個深色文字，再加一到兩個輔助色。選色邏輯是「底色先定，文字色再驗對比，輔助色只做點綴」，不是靠情緒聯想。
以下對比值都是依 WCAG 公式實算。有兩個原則四組都適用：
- 一個版面只選一種白的色偏。暖白與冷白混在同一頁，卡片與頁面底色的色偏會互相干擾，看起來不協調。
- 亮度太高的輔助色，像鼠尾草綠和亮金，只能做裝飾，不能拿來當文字顏色。
米白底配近黑文字、深棕標題與赤陶按鈕
| 角色 | HEX | 與底色的對比 |
|---|---|---|
| 底色（自訂米白） | #FAF9F6 | — |
| 文字 | #2B2B2B | 13.45 |
| 標題或連結（深棕） | #8B4A2B | 6.41 |
| 按鈕底（赤陶） | #B5532F | 4.70 |
底色 #FAF9F6 是自訂米白，不是 CSS 標準色。#B5532F 赤陶與底色的對比是 4.70，過了 4.5 的門檻，可以當按鈕底色，按鈕上的白字和它的對比則是 4.95。
亮金 #C9A227 與這個底色只有 2.30，鼠尾草綠 #9CAF88 只有 2.24，兩者都不能當文字，拿來做分隔線、圖案這類裝飾才合適。
冷白底與深海軍藍的組合
| 角色 | HEX | 與底色的對比 |
|---|---|---|
| 底色（aliceblue） | #F0F8FF | — |
| 文字（深海軍藍） | #1B2A4A | 13.26 |
| 標題或連結（鋼藍） | #2F5D8A | 6.41 |
深海軍藍的文字讓冷白底看起來沉穩，鋼藍則用在標題或連結，和文字有明顯層次，兩者的對比也都超過 4.5。
#5B8DB8 這個明亮一點的藍，與底色只有 3.29，只適合用在大字或圖示，不要拿來當正文或小字連結的顏色。
中性白底，炭灰字配一個品牌色
| 角色 | HEX | 與底色的對比 |
|---|---|---|
| 底色（whitesmoke） | #F5F5F5 | — |
| 文字（炭灰） | #333333 | 11.59 |
| 品牌色（以此為例） | #0057B8 | 6.30 |
中性白最適合品牌色是主角的情況。底色沒有色偏，不會搶走品牌色的存在感，品牌色換成別的顏色，底色與文字色也不必跟著調整。範例用的 #0057B8 與底色的對比是 6.30，當連結或按鈕顏色都足夠。
換成其他品牌色時，記得和 #F5F5F5 重新驗一次對比，不要假設它也能過關。
象牙白底，深褐文字與暗金標題
| 角色 | HEX | 與底色的對比 |
|---|---|---|
| 底色（ivory） | #FFFFF0 | — |
| 文字（深褐） | #3E2C1C | 13.16 |
| 標題或強調（暗金） | #7A5C1E | 6.16 |
暗金 #7A5C1E 比亮金暗很多，所以能當標題或強調文字使用。亮金（例如 #C9A227，與這個底色只有 2.40）只當分隔線等裝飾，不放文字。
印刷時白色就是紙張本身的顏色
螢幕上的白是發光，紙上的白是不上墨。所以 #FFFFFF 在印刷品上長什麼樣子，完全由紙張決定。CMYK 的 0／0／0／0 代表四色都不上墨，露出來的就是紙張原本的顏色。
這也是同一個白在螢幕與紙上看起來不同的原因。紙張偏黃或偏暖的時候，印出來的「白」會跟螢幕上看到的有落差，旁邊如果並排彩色底色，這個落差尤其明顯。
對策是不要把紙張的顏色當成純白看待，而是在螢幕上先模擬一次。Adobe Photoshop 說明文件在〈Proofing colors〉裡介紹的軟打樣選項「Simulate Paper Color」，會依打樣用的描述檔，模擬真實紙張那種暗沉的白，不過並非所有描述檔都支援這個選項。
彩稿送印前，建議套用對應紙張的印刷描述檔做軟打樣，再開啟模擬紙張色彩，確認白色區塊與彩色區塊並排時的觀感。確認過後再送印，比拿到成品才發現白色偏黃要安心得多。
白色看起來是色碼裡最單純的一個，實際上最需要細挑，差 15 的藍色、差 5 的紅色，在螢幕上幾乎看不出差別，一旦搭上灰色文字或換成紙張，差異就顯現出來了。下一次選白色，先決定這個版面要偏暖還是偏冷，從 W3C 的色名表挑一個接近的 HEX 當起點，再用實際要用的文字顏色驗一次對比，最後把定案的色碼寫進色票，之後所有人用的都會是同一個白。