黃色配色怎麼搭才看得清楚？常用色碼、白底對比與印刷黃一次看

純黃色 #FFFF00 放在白底上，對比只有 1.07:1，幾乎等於沒有顏色；可是為了讓字讀得清楚，把它一路調暗，調到對比夠用的程度，它又變成了橄欖色。這個兩難，是黃色在螢幕上最大的麻煩，也是設計稿裡「深一點的黃色字」怎麼調都不對勁的原因。

問題出在亮度。黃色是紅光加綠光混出來的顏色，而 WCAG 的亮度公式給綠光與紅光的權重最高（0.7152 與 0.2126），所以黃色的相對亮度高達 0.928，在紅、綠、藍與青、洋紅、黃這六個純色裡是最亮的。亮度這麼高的顏色，一往暗處走，色相就跟著偏掉；往亮處走，又退成淡淡的奶油色，中間能當文字用的位置非常窄。

把這些數字算清楚之後，挑黃色就不必再靠感覺：哪一種黃能當底色、哪一種只能當點綴、哪一種根本不能拿來寫字，都有現成的答案。要看懂這些答案，得先弄清楚同一個純黃色在網頁、設計軟體與印刷稿裡，其實是三套不同的寫法。

純黃在 HEX、RGB、HSL 與 CMYK 的寫法

下面這張表把純黃的各種寫法列在一起，可以直接複製使用；其中 CMYK 一欄是近似值，以色票為準。

三位簡寫的規則是每一位重複一次，#FF0 會展開成 #FFFF00。不是每個黃色都縮得成三位，金黃 #FFD700 的綠色通道是 D7，兩個字元不同，硬寫成 #FD0 會展開成 #FFDD00，就變成另一個顏色了。八位 HEX 的最後兩位則是透明度，80 換成十進位是 128，約等於 50.2% 的不透明度，所以 #FFFF0080 是一層半透明的純黃。

黃色在 RGB 與 CMYK 裡的身分很不一樣。RGB 的黃是紅色與綠色兩個通道拉到最滿、藍色維持 0，螢幕上的黃是兩種色光相加的結果；印刷的黃卻是一個獨立的黃色油墨版，直接把黃墨印在紙上。換句話說，黃色在 RGB 裡是混出來的二次色，在 CMYK 裡卻是原色油墨，兩邊用的是不同的邏輯，這也是同一個黃從螢幕走到紙上總會有落差的源頭。

CMYK 欄的 C0 M0 Y100 K0，是用 K = 1 − max(R,G,B) 這個簡單公式換算出來的起點，既不是色彩描述檔轉換，也不是任何印刷廠的實際配方，只能當作跟印刷廠溝通時的參考。

黃色的亮度居純色之冠，調暗後偏向橄欖與褐色

黃色最特別的地方，是它在所有純色裡亮度最高，卻也因此最難調暗。下面這張表把紅、綠、藍與它們兩兩相加的青、洋紅、黃放在一起，用 WCAG 公式算出相對亮度，白色放在最後當對照。

黃色一個顏色就把紅與綠兩個高權重的通道都用滿了，亮度才會拉到 0.928，只比白色低 0.072。對比值也就跟著極端，黃色對白底只有 1.07，對黑底卻有 19.56。這個落差說明，黃色要靠深色才撐得出對比，想靠色相和別的顏色拉開距離是行不通的。

亮度高還有一個後果，那就是往暗處調的時候，黃色失去的不只是亮度，色相也會跟著偏移，最後變成另一個顏色。

黃色色相逐階調暗後，在白底上的對比值

把色相固定在 60°、飽和度固定在 100%，只把 HSL 的明度往下調，每一階的 HEX 與對比值就是下面這張表。表中的 HEX，是各階明度換算成 RGB、再四捨五入到整數的結果。

這張表有三個結論。第一，白底上要過 3:1（大字與圖示的門檻），明度得降到約 30%，也就是 #9A9A00 一帶；此時的顏色已經是土綠調的黃，不是亮黃。第二，要過 4.5:1（一般文字的門檻），明度得降到約 24%，色碼約 #7A7A00，這是深橄欖色，離「黃色字」已經很遠。

第三個結論最容易被忽略。CSS 色名 olive（#808000）的色相是 60°、明度 25%，剛好落在表中 25% 那一階，白底對比只有 4.20，差一點點不及格。它常被當成「安全的深黃」，但用在一般文字上，仍然過不了 4.5:1。

Material 黃色色階的深色端已經轉向橘色

Google 的 Material Design 色彩規範，也有一組從 50 到 900 的黃色色階。把每一階的色相與白底對比算出來，會看到同樣的現象，色階越往深走，色相從黃色一路滑向橘色。

最深的 900 色相已經落到 28°，看起來是橘色而不是黃色。而且整條色階沒有任何一階在白底上能過 3:1，連最深的 900 也只有 2.65。同一個調色盤裡的 Amber 500（#FFC107，色相 45°），白底對比是 1.63，也是同樣的情況。

這組色階來自 Material Design 1 的調色盤。列出這些數值，不代表 Material Design 建議把這些顏色放在白底上當文字；從算出來的對比也看得出，這組黃色在白底上不是拿來寫字的。

黃色色碼分成淺黃、金黃與暗金橄欖三類

W3C 的 CSS Color Module Level 4 命名顏色表，收了一批屬於黃色一帶的色名。把它們依亮度與色偏分成三組，會發現這些顏色的色相都集中在 43° 到 60° 的狹窄區間（橘色 orange 的 39° 是邊界），彼此的差別主要在明度與飽和度，色相反而不是重點。

下面各表中的中文譯名只是常見叫法，不是標準名稱。跟人溝通色碼時，以英文色名或 HEX 為準比較不會出錯。

純黃、淡黃與奶油黃等偏淺的黃色

這一組裡，純黃 yellow 的明度是 50%，其餘色名的明度都在 74% 以上。偏淺的那幾個適合當大面積的淺底或卡片底色，但整組都不適合拿來當文字或線條。

這一組在白底上的對比全部落在 1.02 到 1.28 之間，當文字或邊線幾乎看不出來。其中 lightyellow 的對比最低，只有 1.02，拿來當淡底色時，要靠色塊邊界或陰影才分得出區塊。

palegoldenrod 與 khaki 的藍色通道比較高、飽和度也比較低（HSL 飽和度分別是 67% 與 77%），視覺上偏灰黃，比純黃安靜得多。

金黃與琥珀黃等帶橘調的飽和黃

這一組的色相從 60° 往橘色偏，落在 39° 到 51° 之間，飽和度仍有 98% 到 100%，是按鈕、徽章與標題強調最常見的區間。CSS 沒有「琥珀」這個色名，琥珀黃的色碼得自己取，下表用的是 Material 色階的 Amber 500。

orange 放在表裡，是為了標出「再往橘走就不叫黃了」的邊界。這一組的黑字對比全部在 10 以上，所以按鈕底用這一組、字用黑色，是對比最穩的做法；反過來，白字放在這一組上只有 1.40 到 1.97，完全不夠。

暗金、土黃與橄欖等偏暗的黃色

這一組的明度約在 25% 到 58% 之間，顏色偏暗或偏灰，色相仍落在 43° 到 60°，看起來是芥末、土色或橄欖。黃色系裡只有這一組有機會在白底上當文字，但門檻比想像中高。

darkgoldenrod 的白底對比是 3.25，只夠大字與圖示的 3:1，一般文字不及格；olive 是 4.20，仍低於 4.5。這一組四個色名，沒有任何一個在白底上達到 4.5:1，和前面逐階調暗的結論完全吻合。

鵝黃、檸檬黃、芥末黃這類中文色名沒有標準色碼

W3C 的命名顏色表只有英文色名，鵝黃、檸檬黃、芥末黃、琥珀黃這些中文叫法，沒有一個對得到規格裡的標準值。更精確地說，CSS 規格的 148 個命名顏色裡，根本沒有 lemon、canary、mustard、amber、saffron 這些色名，所以任何「芥末黃 = #XXXXXX」的寫法，都是某個網站或某套軟體自己的取值，而不是標準。

中文色名既然沒有標準值，比較實際的做法，是找出每個名字最接近的 CSS 色名當參考，再自己確認色碼與對比。

中文黃色名稱與最接近的 CSS 色名

下面對照表的「最接近」，是以 RGB 歐氏距離對 148 個命名顏色實算，再參考常見用法挑出來的；中文名稱對應到哪個色名，並沒有標準答案，表格只能當起點。

從備註欄的白底對比就看得出，名字好聽並不代表能用。鵝黃、奶油黃與米黃的白底對比都在 1.02 到 1.11 之間，只能當底色，無法當字。

芥末黃的 HEX 取值落差與查證方式

中文色名裡，芥末黃的取值落差最明顯。拿三個落在芥末黃範圍的示範取值來算，偏亮的 #FFDB58、居中的 #E1AD01、偏暗的 #CA8A04，對白底的對比分別是 1.35、2.06 與 2.94。第一個完全不能當字，第二個和第三個仍然不及格。這三個值只是示範，不代表哪一份標準，但足以說明沒有標準色碼的色名，取值本來就可能落在這麼寬的幅度裡。

#CA8A04 在 Tailwind CSS v3 的色階裡叫 yellow-600，並不叫芥末黃。同一個色碼在不同的地方有不同的名字，反過來，同一個名字也會對到不同的色碼，因此「色名」決定不了可用性，要看 HEX 與用途。遇到來路不明的黃色名稱，可以照下面三步查證。

1. 找出這個色碼來自哪個標準或哪一份色票。CSS 色名查 W3C 的命名顏色表，品牌色查品牌自己的色彩規範，查不到出處的就當成某個人的自訂值。
2. 把色碼貼進取色器或設計軟體，看實際顯示的顏色，確認它真的是想要的那一種黃。
3. 用 WCAG 的對比公式，算它與要搭配的底色之間的對比值，而不是直接抄轉載的表。

抄寫錯誤也值得順手檢查一下，例如把 #FFFF00 少抄一個 0 變成五位數的 FFFF0（五位數不是合法的 HEX），或者色名寫著 gold、色碼卻是 #FFFF00。品牌要把標準色定下來、並在各種物料上維持一致，後續才不會出現這類落差。

黃色在白底上的對比偏低，文字要用深色

黃色最常見的實務問題，是可讀性。前面算過的數字已經說明，黃色只能靠亮度差撐住對比，靠色相差是撐不住的；因此黃色放在白底上不是難看，而是真的看不見。

彩色底該配黑字還是白字，分界線落在相對亮度約 0.179，底色高於這個值時，黑字的對比就會比白字高。黃色的相對亮度是 0.928，遠遠高過這條線，所以黃色底配黑字，永遠比配白字穩。這一節的所有對比值，都用 WCAG 公式實算。

WCAG 對正文、大字與圖示的對比門檻

WCAG 2.2 對顏色對比訂了三個數字。

「大字」的定義是至少 18pt，或 14pt 的粗體，中日韓字體以等效的大小計算。黃色的圖示、輪廓與警示標誌，受的是 SC 1.4.11 的約束，不是只有文字才要算對比。

另外有一個容易算錯的細節。WCAG 的說明文件明確指出，對比值不能四捨五入後再判斷通過與否，4.499:1 就是不達標。本篇表格中的對比值為了好讀，都取到小數點後兩位，但判斷是否過關時，是以未四捨五入的數值為準。

黃色當底色時，各種字色的實算對比

以六種黃色當底，列出常見字色的對比值，凡是達到 4.5 的都用粗體標示。

表裡有四件事值得留意。白字在六種黃底上全部不行，連對比最高的 darkgoldenrod 底也只有 3.25。紅字壓在純黃底上只有 3.72，同樣不及格。

中灰字尤其危險。#767676 是在白底上剛好過 4.5 的灰色（白底 4.54），在黑底上也過關（4.62），但放到黃底上，對比只剩 4.23 到 1.40。同一個灰色在白底與黑底兩個極端上都能用，放到黃底上卻全數不及格，而且黃底越暗，中灰字與底色的亮度差越小，對比就掉得越多。

比較穩的選擇是黑、深藍這類又深又暗的字色，黑與 navy 在六種黃底上全數過關；indigo 在最深的 darkgoldenrod 底上掉到 3.98，也要留意。

黃色當字或圖示時，白底上要降到接近褐色才過關

反過來，黃色當文字、細線或圖示放在白底上時，亮度得壓到已經不太像黃色，才過得了門檻。

以 WCAG 公式實算，找出同一色相、飽和度 100% 時剛好過關的明度，結果如下。

對 CSS 色名來說，goldenrod 的白底對比是 2.24，不及格；darkgoldenrod 是 3.25，只過 3:1；olive 是 4.20，仍然沒有過 4.5。實務上的結論有兩條。黃色圖示放在白底，要加深色描邊或改放深色底，不要單靠黃色本身撐住對比；一定要用黃色系當文字時，選偏褐的暗金，或乾脆把黃色放到深色背景上。

深色背景上的黃色對比充足，暗黃字除外

換到深色背景，情況就倒過來了。黃色的亮度高，放在暗底上反而是對比最高的顏色之一，只有降到暗黃以後才會開始失分。下面是在 Google Material 深色主題採用的底色 #121212，以及更淺一點的 #1A1A1A 上算出來的對比。

olive 在 #121212 底上是 4.47，差了一點點才到 4.5；換到 #1A1A1A，更掉到 4.15。因此深色模式下，強調色直接用亮黃或金黃就夠了，沒有必要再往暗黃調。

黃色與黃綠、橘色並排時，色盲讀者不易分辨

黃色不只有對比的問題，還有色相的問題。Okabe 與 Ito 的色盲友善配色說明提到，色盲讀者會把黃色與黃綠色看成幾乎相同的顏色；他們提出的配色因此刻意避開介於黃與綠之間的顏色，原因是那些顏色和黃色、橘色分不出來。同一份說明也提醒，細線與小字用藍色加黃色，對所有人都難讀，這類小物件應該改用較深的藍色與橘色。

所以只靠色相區分的圖表、標籤與狀態色，要另外加形狀、文字或亮度差。WCAG 的 SC 1.4.1 把這件事列為 Level A 的基本要求：不能只用顏色傳達資訊、指示動作或區分元素。黃色、黃綠色與橘色並排出現的警示、狀態與圖例，是最容易違反這條的地方。

黃色搭配的四組色碼，附實算對比值

下面四組黃色搭配可以直接複製，每一組都是「底色先定、文字色再驗對比，黃色只負責一塊用途清楚的位置」，而不是靠情緒聯想選色。四組刻意涵蓋四種關係：色環上相對的冷色（深海軍藍）、中性色（炭灰）、同色系的暖色（深棕）、色環上相鄰的偏冷色（深紫）。

選色之前，要先說清楚「互補色」是指哪一種色環。HSL 與 RGB 色環上，yellow 的色相是 60°，互補色是 240° 的 blue；傳統美術用的 RYB 色環，則常說黃色的互補色是紫色。兩種色環的答案不一樣，哪一種都不算錯，但講配色時要先講清楚用的是哪一套。

兩條通則適用於所有組合。首先，一個版面裡，黃色只當一種用途，不是當底，就是當強調，不要又當字又當底。其次，亮黃色不要鋪成整頁，大面積用淺黃或中性色，黃色留給按鈕、標籤、標題線條這類小面積。下面表格中標示「自訂值」的色碼，不是 CSS 色名，也不是任何標準。

深海軍藍底配金黃標題與按鈕

這是黃色與冷色的經典組合，金黃（51°）與深海軍藍（214°）的色相差約 164°，亮度差更大。可以用深色頁面底配金黃強調，也可以反過來，做金黃的按鈕、配深藍的字。

這一組的失分處，是 gold 放回白底只有 1.40，所以它只能在深色底上當文字。Okabe 與 Ito 提醒過，細線與小字用藍色加黃色難讀，這一組裡黃色只做標題、按鈕與大字，不要做小字。

淺灰白底配炭灰文字與芥末黃色塊

中性色襯黃色，是最安全也最耐看的搭法。頁面底用接近中性的淺灰白 whitesmoke（#F5F5F5），文字用炭灰，芥末黃只做色塊，不當字。

次要文字改用 #6B6B6B 對比是 4.89，仍然過關；換到炭灰底 #2B2B2B 上，gold 的對比是 10.09、白字是 14.16，也都很充足。

這一組的失分處在方向上，#E1AD01 放在 #F5F5F5 上只有 1.89，白字壓在 #E1AD01 上只有 2.06，兩個方向都不能當字。芥末黃要嘛當色塊、字用黑或炭灰，要嘛放在炭灰底上當強調，不要翻過來。

奶油黃底配深棕文字與赭紅強調

同色系的暖色搭配，整個版面偏暖，質感靠明度差撐起來，不是靠色相差。

這一組的失分處集中在 darkgoldenrod。白字壓在它上面只有 3.25，深棕 #3E2A14 壓在它上面也只有 4.17，一樣不過；darkgoldenrod 直接當奶油黃底上的字，對比是 3.07，只夠大字。按鈕的字因此要用黑色，不能用深棕。

深紫底配亮黃標題與薰衣草淺紫字

黃色與紫色，是亮度差最大的色相組合之一，很適合活動頁與創意類版面。前提是紫色要壓得夠深。

換成 CSS 色名也可以，indigo（#4B0082）上的 gold 是 9.23、yellow 是 12.06；rebeccapurple（#663399）上的 gold 只剩 5.99，仍然過 4.5，但小字已經吃緊。

紫色一旦調淺，黃色字的對比就會直線下降。決定這個組合好不好用的，是紫色與黃色之間的明度差。

這四組裡底色、輔色與強調色各佔多少面積，可以從 60-30-10 的配色比例起步。

印刷的黃色來自黃墨，螢幕亮黃轉成 CMYK 會有落差

螢幕稿交給印刷廠之前，黃色有三件事要先理解。CMYK 的 Y 是一個獨立的油墨版；RGB 的亮黃有些超出 CMYK 能印的範圍，轉換之後一定會有落差；最後的準繩是色票與打樣，不是螢幕。

其中最常遇到的是色域落差，螢幕能顯示的亮黃，印刷不一定印得出來，所以下面的 CMYK 數字一律當近似值看。

常見黃色的 CMYK 近似值，以色票為準

下表的 CMYK 是用簡單公式從 RGB 換算出來的起點，既不是色彩描述檔轉換，也不是任何印刷廠的實際配方。實際成色隨印刷機、紙張與描述檔而異，以印刷廠的色票或打樣為準。

Adobe 的 Photoshop 說明文件寫到，CMYK 實際能呈現的色彩範圍，取決於印刷機的特性與印刷條件，Photoshop 的 CMYK 模式也會隨「色彩設定」裡指定的工作空間而不同，所以同一組 RGB 用不同的 CMYK 描述檔轉換，結果也不一樣。同一份文件也提到，有些 RGB 顏色落在 CMYK 色域之外，轉換時會被改成最接近的 CMYK 色，飽和度很高的顏色外觀可能因此改變，純黃 #FFFF00 這類高飽和的亮黃，轉換後要特別留意。

RGB 與 CMYK 的色差，成因在於一個靠色光相加、一個靠油墨相疊，前面談兩者身分時已經提過。表裡的數字拿去當品牌黃的正式規格，風險很高。

螢光黃這類超出色域的亮色，CMYK 只能取近似色

黃色最亮的那一端，在印刷上一定會「不一樣」。Adobe Illustrator 的說明寫到，RGB 與 HSB 色彩模型裡的某些顏色（例如螢光色），在 CMYK 裡沒有對應的顏色，無法印出來；選到這種超出色域的顏色時，色彩面板或檢色器會出現警告三角形，可以一鍵改成最接近的可印顏色。

這不代表 #FFFF00 這個色碼一定超出色域，而是亮度與飽和度越高的黃色，越容易遇到這個狀況。實務上的做法很單純：定稿前，把品牌黃、標題黃用警告三角檢查一次，有出現三角形的，就接受它改成最接近的可印色；如果品牌黃一定要比 CMYK 能印的更亮，就改走專色，不過專色能不能達到想要的效果，要和印刷廠確認。

黃色要以色票和軟打樣確認，不能只看螢幕

收尾的實務做法是，品牌黃用專色色票確認，彩稿用軟打樣模擬紙張，正式印刷前再看一次打樣。

Pantone 的網站自己聲明，螢幕上的數位色彩模擬，不一定能準確對上實體的 Pantone 色彩標準。連專色的廠商都這樣說，螢幕上的黃色不能直接拿來當印刷的依據。

Adobe 的 Photoshop 軟打樣，則有一個 Simulate Paper Color 選項，可以預覽影像印在目標紙張上的樣子，這個選項能不能用，取決於所選的描述檔。淺黃底（lightyellow、lemonchiffon）在偏黃的紙上，與紙色的差距會縮小，開啟模擬紙色之後，才看得出它印出來是否還分得出底色。

黃色的難處，從來不在挑哪一種黃，而在它能撐住多少對比、印出來還剩多少亮度。下次在設計稿裡放一塊黃色之前，先決定它的用途是底、強調還是圖示，再把相鄰的文字色用 WCAG 公式算一次；品牌黃的色票則同時記下 HEX、CMYK 近似值、專色編號與用途，這樣的黃色，不論在螢幕上或紙上，都認得出來。