藍色色碼怎麼選擇？淺藍到深藍 HEX、白底黑底對比與配色一次看

螢幕上最亮的藍光，對畫面亮度的貢獻只有最亮綠光的十分之一左右，約為最亮紅光的三分之一。這個懸殊的比例，決定了藍色在設計稿裡的性格。純藍 #0000FF 放在白底上，對比高達 8.59:1，穩穩超過一般文字的門檻；同一個色碼換到黑底，對比只剩 2.44:1，幾乎讀不出來。

這也是為什麼同一顆藍色按鈕，在淺色版面裡沉穩好看，一切換到深色模式就幾乎和背景融在一起。把藍色調淺，它很快變成偏紫的薰衣草色；調深，它又迅速滑向近乎黑色的深海軍藍，真正好用的那一段，比想像中窄。偏偏中文裡的天藍、寶藍、海軍藍，沒有一個對得到 CSS 規格的標準色碼，查表時十個網站可能給出十種答案。

好在這些問題都能用公式算清楚，亮度、對比、色名取值與印刷落差，各有明確的數字可以對照。只是要讀懂這些數字，得先弄清楚同一個純藍在網頁、設計軟體與印刷稿裡，其實是三套不同的標示方式。

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

純藍在各種場合的寫法如下，色碼可以直接複製使用。

三位簡寫的規則是每一位重複一次，#00F 會展開成 #0000FF。不是每個藍色都縮得成三位，寶藍 royalblue 的 #4169E1 拆成 41、69、E1 三組，沒有一組是相同的兩個字元，硬寫成 #46E 會展開成 #4466EE，就變成另一個顏色了。八位 HEX 的最後兩位則是透明度，80 換成十進位是 128，約等於 50.2% 的不透明度，所以 #0000FF80 是一層半透明的純藍；CSS 色彩規格自己的範例 #0000ffcc，最後兩位 cc 換成十進位是 204，剛好是 80% 的不透明度。

藍色在不同色彩模型裡的身分很不一樣。RGB 把它列為三原色之一，純藍就是藍色通道拉到 255、紅綠兩個通道維持 0；傳統美術的 RYB 色環同樣把它當作原色。CMYK 的原色油墨卻是青、洋紅、黃，沒有「藍」這個版，印出來的純藍，是青版與洋紅版疊印的結果。螢幕上的原色到了印刷稿成了混出來的顏色，這也是同一個藍從螢幕走到紙上總會有落差的源頭之一。

CMYK 欄的 C100 M100 Y0 K0，是用 K = 1 − max(R,G,B) 加上 C、M、Y 各自的簡單公式換算出來的起點，既不是色彩描述檔轉換，也不是任何印刷廠的實際配方，只能當作跟印刷廠溝通時的參考。至於 CSS 的 blue，飽和度是 100%，實務上很少直接拿來鋪大面積，後面算過亮度與對比，就看得出原因。

純藍是三原色裡最暗的一個，調淺偏向薰衣草色、調深接近黑色

在紅、綠、藍與青、洋紅、黃這六個純色裡，藍色的相對亮度最低，只有 0.0722。下表用 WCAG 公式算出每個純色的相對亮度，白色與黑色放在最後當對照。

這個數字來自公式的權重。WCAG 的相對亮度是 L = 0.2126 R + 0.7152 G + 0.0722 B，三個通道線性化之後再按權重相加，藍色只分到 0.0722，所以藍光再亮，對整體亮度的貢獻也最小。純藍對白底的對比因此是 8.59:1，對黑底只有 2.44:1，同一個色碼放在淺色背景很穩當，放在深色背景就有風險。

亮度這麼低，也決定了藍色往兩端調整時的樣子。往亮處調，它很快變成偏紫的淺藍；往暗處調，它一路維持藍色，只是越來越接近黑色。

純藍逐階調亮與調暗後，白底與黑底的對比門檻位置

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

這張表最實用的是兩個門檻位置。白底上要過 4.5:1（一般文字），明度得在約 69% 以下，色碼約 #6161FF；要過 3:1（大字與圖示），明度約 76% 以下，色碼約 #8787FF。黑底上則是反過來，要過 4.5:1，明度得在約 68% 以上，色碼約 #5E5EFF；過 3:1 約在 60% 以上，色碼約 #3131FF。白底與黑底兩個 4.5:1 的門檻，幾乎重疊在明度 69% 附近，所以明度落在 68% 到 69% 這一窄段時，同一個色碼對兩種底色都能過 4.5:1。

深端沒有「變色」的問題。明度 25% 就是 CSS 的 navy #000080，再往下到 #000033 也還認得出是藍；有些顏色調暗之後，在人眼裡會換成另一個名字（黃色調暗變成橄欖色就是例子），藍色沒有這個現象。淺端則相反，W3C 色名表把明度 94% 的 #E6E6FA 叫作 lavender（薰衣草），它的色相仍是 240°，也就是淺藍淡到一定程度，人對它的稱呼就換了。

色相由青藍走向藍紫，白底對比在 240° 達到最高

「藍色」其實是一段色相區間，而不是單一一點。下表把飽和度固定在 100%、明度固定在 50%，只把色相從青藍掃到藍紫。

對白底來說，對比在 240° 最高（8.59），往青端、往紫端都下降；對黑底則是越靠近青端越高。210° 的天空藍和 240° 的純藍，白底對比分別是 3.83 與 8.59，差了一倍有餘，同樣叫作藍，可讀性卻可能相去甚遠。

色相越過 248° 以後，CSS 色名已經是 slateblue（248°）、blueviolet（271°）、indigo（275°）這類藍紫色，一般人不會再把它們叫作藍色；青端的 cyan（180°）與 turquoise（174°），也已經是青色一帶。以色相來看，藍色大致落在約 195° 到 240° 之間，再往外就是青色、藍綠色、靛色與藍紫色。

Material 與 Tailwind 藍色色階在白底過 4.5 的起點

業界常用的兩套藍色色階，可以佐證上面的實算。第一套是 Material Design 色彩規範的藍色色階（來自舊版 Material Design 1 的調色盤），第二套是 Tailwind CSS v3 的藍色色階，兩者的白底對比如下。

Material 的整條色階，色相只在 205° 到 216° 之間移動，Tailwind 的色階也只在 212° 到 226° 之間，調到最深一階，看起來仍然是藍色。這一點和一些暖色色階不同，例如 Material 的黃色色階，最深一階的色相已經落到 28°，滑進橘色了。

在白底上要過 4.5:1，Material 要到 700（4.60）、Tailwind 要到 600（5.17）才夠；兩邊的 500 都只過 3:1（3.12 與 3.68），可以當圖示與大字，不能當小字。Material 另有一個強調色 A700 #2962FF，白底對比 4.90，同樣過 4.5:1。這裡列出的是色階數值與算出來的對比，並不代表 Material 或 Tailwind 規定了這些顏色該怎麼用。

藍色色碼分成淺藍、鮮明中藍與深藍三類

W3C 的 CSS Color Module Level 4 命名顏色表，收了一批屬於藍色一帶的色名。把它們依亮度與飽和度分成三組，會發現大部分色名的色相集中在 195° 到 225° 之間，純藍系的 blue、mediumblue、darkblue、navy 與 midnightblue 則固定在 240°，差別主要在明度與飽和度，而不是色相。

色相落在 180° 一帶的青色、藍綠色，以及 250° 以上的靛色、藍紫色，不收進這三組。下面各表中的中文譯名只是常見叫法，不是標準名稱，跟人溝通色碼時，以英文色名或 HEX 為準比較不會出錯。

天藍、粉藍與冰藍等偏淺的藍色

這一組的明度都在約 73% 以上，適合當大面積的淺底、卡片底色與資訊區塊，不適合當文字或線條。lavender 的色相是 240°，偏向藍紫，放在表中是為了標出淺藍的邊界。

這一組的白底對比全部落在 1.07 到 1.78 之間，當文字或邊線一律看不見。aliceblue 對白底只有 1.07，拿來當淺底色時，得靠色塊邊界或陰影才分得出區塊。

換到黑底，情況就完全相反，淺藍的對比全在 11.80 以上，深色模式需要藍色強調色時，可以從這一組取色。

道奇藍、寶藍與鋼藍等鮮明的中間藍

明度約 49% 到 66%、飽和度高的這一組，是網頁按鈕、連結與標題強調最常見的區間。純藍 blue 也列在表裡，當作參照。

中間藍多數的對比落在 3 到 5 之間，剛好是「過不過」的邊緣。白底上，只有 royalblue（4.85）與 blue 超過 4.5，steelblue（4.11）與 slategray（4.05）只差一點；dodgerblue 只有 3.24，只夠大字與圖示。黑底上，royalblue 只有 4.33，沒有過 4.5，dodgerblue、cornflowerblue 與 steelblue 則都過了。

也因為亮度居中，這一帶是藍色裡少數有機會在白底與黑底都讀得到的區間，steelblue、royalblue 與 slategray 兩邊的對比都在 4 以上，只是沒有一個兩邊同時過 4.5，要不要採用，得看它是當文字、圖示還是色塊。slategray 是低飽和的灰藍，飽和度只有 13%，「霧藍」「灰藍」這類中文叫法多半落在這一帶，但並沒有標準值。

海軍藍、午夜藍與深藍等偏暗的藍色

明度降到約 25% 到 40% 的這一組，是白底上最穩的藍色文字色，也是深色版面常見的底色。它的特點是兩面性，白底對比極高，到了黑底與深色底上卻完全消失。

四個 CSS 色名的白底對比在 11 到 16 之間，作為白底上的正文色、標題色綽綽有餘。黑底對比卻只有 1.31 到 1.88，小面積的文字與線條放上去，肉眼幾乎會把它當成黑色。

另外要留意，CSS 的 navy 是把純藍的明度減半，飽和度仍然是 100%，色相也仍是正藍。介面設計常改用飽和度較低、偏灰的深藍當底色，例如自訂值 #0B1F3A（色相 214°、飽和度 68%）。

天藍、海軍藍與寶藍這類中文色名沒有標準色碼

CSS 規格裡只有 blue、navy、skyblue 這類英文色名，沒有任何一個中文色名是規格裡的標準值；中文叫法與英文色名之間，只能說「翻譯得通」，湖水藍、霧藍這些甚至找不到對應的色名。因此任何「天藍 = #XXXXXX」的寫法，都是某個網站或某套軟體自己的取值，不是標準。

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

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

下表的「最接近」只是近似的對照，並不是標準；備註欄放白底對比，可以看出名字好聽並不代表能用。

最後兩列值得多看一眼。湖水藍偏向青色，已經超出藍色的色相範圍；靛藍則要提防一個陷阱，CSS 色名表裡的 indigo 是偏紫的深色，並不是一般人說的靛藍。

天藍的 HEX 取值落差與查證方式

天藍是「同名不同碼」最明顯的例子。下表拿幾個落在天藍範圍的取值來算，其中前三列是 CSS 色名的取值，#007FFF 則是示範取值，以色環 210° 的飽和亮藍定義。

這些取值都可能被拿來當作天藍，白底對比卻可以從 1.5 的淡色，一路跨到 3.8 的飽和亮藍；#007FFF 的鄰居 #0080FF，只差 1 個 RGB 單位，白底對比是 3.80。另外，CSS 規格裡有一個叫 azure 的色名，色碼是 #F0FFFF，近乎白色，白底對比只有 1.03。名字聽起來像一種藍，色碼卻完全不是那回事。粉藍也是一樣，CSS 的 powderblue 是 #B0E0E6（白底 1.43），另一個示範取值 #B6D0E2，白底對比是 1.60。

從這些落差可以看出，色名決定不了可用性，要看 HEX 與用途。遇到來路不明的藍色名稱，可以照下面三步查證。

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

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

藍色的聯想源自天空與海水，卻隨語言和文化而異

藍色之所以跟天空、海水連在一起，先是物理事實。NASA 說明，陽光進入大氣，會被空氣中各種氣體與微粒往四面八方散射，藍光因為波長較短，被散射得比其他顏色多。NOAA 則說明，海洋看起來是藍色，是因為水會吸收光譜中紅色的部分，像濾鏡一樣留下藍色的部分讓人看見。

再看偏好。YouGov 在 2015 年 5 月發布一份 10 國調查，涵蓋中國、香港、新加坡、印尼、泰國、馬來西亞、德國、英國、美國與澳洲，藍色在每一國都是調查列出的顏色裡最多人選的最愛色，比例從印尼的 23% 到英國的 33% 不等，領先任何其他顏色 8 到 18 個百分點。就連把紅色、黃色與綠色視為吉利顏色的中國，最多人選的也是藍色。

語言甚至會影響人怎麼分辨藍色。Winawer 等人 2007 年發表在 PNAS 的實驗發現，俄語把淺藍（goluboy）與深藍（siniy）當成兩個不同的基本色名，俄語使用者在分辨分屬這兩類的藍色時，比分辨同一類的藍色來得快；英語使用者則沒有這個差異。而且當受試者同時進行語言干擾作業時，俄語使用者的這個優勢就消失了。放到設計實務上，團隊溝通「淺藍」「深藍」時，別只靠這兩個詞，附上色碼才不會各說各話。

顏色與情緒的連結，也有共通與在地並存的現象。Jonauskaite 等人 2020 年發表在 Psychological Science 的研究，涵蓋 30 個國家、4,598 位受試者與 22 種語言，發現顏色與情緒的連結有跨國共通的部分，平均相似度為 r = .88；同時，國家在語言或地理上越接近，連結的相似度也越高，表示在地差異是真實存在的。

把這些放在一起看，藍色最常被拿來連結的天空與海水，是物理事實；至於「藍色代表信任、專業」這類說法，並不是上面這些研究證明的結論，在不同地區與情境未必成立。品牌選藍，與其依賴聯想，不如看它跟同業、競品的區隔，以及色票能不能在各種物料上維持一致。

藍色在白底上對比充足，到了黑底要改用中間藍或淺藍

藍色最常見的實務問題，是同一個色碼在淺色與深色背景上的表現完全不同。亮度偏低的藍放在白底上，對比綽綽有餘，換到黑底卻可能幾乎看不見。不過亮度落在中段的藍有個好處，同一個色碼在白底與黑底都能過 4.5:1。

彩色底上，黑字與白字對比剛好相等的分界，落在相對亮度約 0.179，底色比它亮就配黑字，比它暗就配白字。

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

WCAG 2.2 對顏色對比訂了三個數字，連結、按鈕與圖示用上藍色時，全都受這幾條約束。

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

還有一個容易算錯的細節。WCAG 的說明文件指出，對比值不能四捨五入後再判斷通過與否，4.499:1 就是不達標。文中表格的對比值為了好讀，都取到小數點後兩位，判斷是否過關則以未四捨五入的數值為準；下面連結藍實算表裡的 Bootstrap 藍，就是剛好壓線的現成例子。

連結藍與介面主色在白底上的實算對比

把網頁上最常見的幾個藍色放在白底上實算，會看到預設連結藍遠超標準，現代介面常用的亮藍反而落在邊緣。

HTML 標準（WHATWG）的預設樣式，把未造訪連結設為 #0000EE、已造訪連結設為 #551A8B、點擊中的連結設為 #FF0000，而且預設連結還加了底線，並不只靠顏色辨認。

亮藍的處境最尷尬。Material 的 500、Tailwind 的 500 與 dodgerblue 放在白底上，只能當大字與圖示；拿它們當按鈕底色，白字也不及格（對比分別是 3.12、3.68、3.24），這時要把白字換成黑字（對比分別是 6.72、5.71、6.49），或是把按鈕底色降一階。連結色同樣不適合用 steelblue、dodgerblue 這類介於 3 與 4.5 之間的藍色當小字。

連結除了顏色之外，還需要底線或其他非顏色的線索。WCAG 的 SC 1.4.1 要求不能只用顏色傳達資訊，連結如果只靠藍色與周圍文字區分，色覺不同的讀者就可能漏看。

亮度落在中段的藍色，白底與黑底都能達到 4.5

對比公式反解之後，相對亮度落在約 0.175 到 0.183 之間的顏色，對白底與黑底的對比同時超過 4.5。對白底的對比是 1.05 / (L + 0.05)，要不低於 4.5，L 必須不超過 0.1833；對黑底的對比是 (L + 0.05) / 0.05，要不低於 4.5，L 必須不低於 0.175。飽和的藍在這個亮度仍然鮮明，因此同一個色碼可以同時用在淺色與深色版面，不必另外換色。

現成的例子有兩個。Material Blue 700 #1976D2 的相對亮度是 0.178，白底 4.60、黑底 4.56；Bootstrap 的 #0D6EFD 相對亮度是 0.183，白底 4.50、黑底 4.67。再看飽和度 100% 的藍色，各色相落在這個窗口的位置，大致如下表。

反例也很清楚。Material Blue 500 #2196F3 與 Tailwind 的 blue-500 #3B82F6，相對亮度約在 0.24 到 0.29 之間，白底只有 3.12 與 3.68，黑底則是 6.72 與 5.71，整體偏亮；royalblue 的相對亮度是 0.167，白底 4.85，黑底卻只有 4.33，整體偏暗。

這個窗口只有 0.008 寬，餘裕很小。而且上面算的是對純黑 #000000，深色模式的底色通常是 #121212，這時 Material Blue 700 #1976D2 的對比只剩 4.07，需要再亮一階。

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

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

藍底的分界，大約落在 Material 700 一帶，也就是前面提到的相對亮度 0.179，比它深的用白字，比它淺的用黑字。白字壓在 #2196F3 與 dodgerblue 上不及格（3.12 與 3.24），壓在 skyblue 上更只剩 1.74。

黃色與 gold 壓在深藍上很穩，在 navy 上分別是 14.91 與 11.41，但是一旦底色淺過 royalblue，對比就快速下降。紅字壓在藍底上最高只有 4.00（在 navy 上），其餘最高也只有 2.30，基本上不能用。

中灰字也要留意。#767676 是在白底上剛好過 4.5 的灰色（白底 4.54），放到藍底上最高只有 3.52，所謂的「安全灰」，換了背景就不安全了。

深色背景上的純藍與海軍藍對比不足，強調色要改用淺藍

反過來看，藍色當字或當圖示，放在黑底或深色底上，純藍與深藍系幾乎消失，必須換成亮度高的淺藍。下表是在 Google Material 深色主題採用的底色 #121212，以及更淺一點的 #1A1A1A 上算出來的對比。

深色模式下，藍色強調色要從白底常用的 600 到 700 級，換到 200 到 400 級，Material 200 到 400 與 Tailwind 300 到 400，在 #121212 底上的對比都在 7 以上；純藍與海軍藍則只能留給淺色版面。

藍與紫並排時，色盲讀者不易分辨

藍色在紅綠色盲讀者的眼裡，容易和紫色混在一起。Okabe 與 Ito 的色盲友善配色說明提到，紅綠色盲讀者難以分辨「只差在紅色或綠色成分」的顏色，例如「藍與紫羅蘭色（藍加紅）」；低飽和的顏色更難分，例如「天藍與粉紅」。他們的配色因此刻意用偏紅的紫取代紫羅蘭，因為紫羅蘭靠近藍色，在色盲讀者的眼裡看起來是同一個顏色；配色裡的天藍與藍色，則靠亮度與飽和度的差異來區分。

同一份說明還提醒，細線與小字用藍色加黃色，連一般視力的人都難以閱讀，細線與小物件宜改用較深的藍色與橘色，而不是天藍與黃色。該頁也提到，連非色盲的人，都覺得藍色的影像不容易看清楚，純藍放到深色背景上，對比又只剩 2 左右，辨認起來更吃力。

所以只靠色相區分的圖表、標籤與狀態色，要另外加上形狀、文字或亮度差。前面談連結時提到的 SC 1.4.1，把這件事列為 Level A 的基本要求，除了傳達資訊，指示動作與區分元素也同樣不能只靠顏色。藍色與紫色並排出現的圖例，是最容易違反這條的地方。

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

四組搭配的色碼都可以直接複製，每一組都先定底色、再驗文字色的對比，讓藍色負責一塊用途清楚的位置，而不是靠情緒聯想選色。

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

兩條通則適用於所有組合。首先，一個版面只用一個藍色色相當主色，深淺靠明度階變化，不要同時混用天藍、純藍與藍紫。其次，亮藍色不要鋪成整頁，大面積用淺藍或中性色，飽和的亮藍留給按鈕、連結與標題線條這類小面積。下面表格中標示「自訂值」的色碼，不是 CSS 色名，也不是任何標準。四組色碼裡，底色、輔色與強調色各佔多少面積，可以從 60-30-10 的配色比例起步；橘色與藍色這類冷暖混搭，要以冷色為主還是暖色為主，也值得先想清楚。

深海軍藍底配橘色按鈕與淺灰藍字

藍與橘是最典型的冷暖對比，深海軍藍（色相 214°）與橘色（色相 39°）的色相差約 175°，而且亮度也拉得開。可以用深色頁面底配橘色強調，也可以反過來，做橘色按鈕、配深藍的字。

要注意的是，橘色放回白底只有 1.97，白字壓在橘色按鈕上也只有 1.97，所以這組橘色只能在深色底上當文字，或是當底色、配深色字。Okabe 與 Ito 也提過，細線與小物件用深藍配橘色，比天藍配黃色好讀；即使如此，橘色在這組裡仍只用在標題、按鈕與大字，細小的字交給白字與淺灰藍字。

淺灰白底配炭灰文字與單一藍色主色

中性色襯藍色，是網頁介面最常見、也最耐看的做法。藍色只做連結、按鈕與重點，不鋪面。頁面底用 whitesmoke（#F5F5F5），文字用炭灰。

這組最容易出錯的地方有三個。第一，壓線的藍色最怕換背景，例如 royalblue #4169E1 放在白底上是 4.85，放到 #F5F5F5 上只剩 4.45，就不過了；Bootstrap 的 #0D6EFD 白底剛好 4.50，放到 #F5F5F5 上更掉到 4.13。第二，#767676 在 #F5F5F5 上只有 4.17，也不及格。第三，#DBEAFE 與 #F5F5F5 的對比只有 1.12，淺藍標籤和頁面底色幾乎分不出區塊，要靠邊線，而邊線色對相鄰色要有 3:1，例如 #3B82F6 對 #F5F5F5 是 3.37。

淺藍底配深藍字與中藍按鈕的同色系組合

整頁只用藍色一個色相，靠明度階拉出層次，適合企業官網與報告類版面。下面用 Tailwind v3 的幾階藍色當範例。

反向做法也行得通，用 #1E3A8A 當深藍底，白字是 10.36，#DBEAFE 字是 8.49，#BFDBFE 字是 7.29，#93C5FD 字是 5.74，#60A5FA 字只有 4.07，小字就不過了。

問題集中在淺色那一端。blue-300 #93C5FD 放在白底只有 1.80，放在 #EFF6FF 上更只有 1.66，只能當裝飾；邊線與圖示要用 blue-500 #3B82F6（對 #EFF6FF 是 3.38，對白底是 3.68）以上，才過 SC 1.4.11 的 3:1。blue-400 #60A5FA 對白底只有 2.54，同樣不及格。

米白底配深藍文字與磚紅強調

暖中性底襯冷色藍，是印刷品、文件與品牌手冊風格的經典組合。暖色的米白讓深藍顯得沉穩，磚紅則是點綴，不是主角。

暖底會吃掉藍色的對比餘裕。Material Blue 700 #1976D2 放在 linen 上只有 4.09，royalblue #4169E1 只有 4.31，兩個在白底過關的色碼，到了米白底都不過，所以標題與連結要用 #0D47A1 或更深的藍。

印刷的藍色由青與洋紅疊印，螢幕亮藍轉成 CMYK 會有落差

螢幕稿交給印刷廠之前，藍色有三件事要先理解。第一，前面提過 CMYK 沒有藍墨，純藍是青版與洋紅版疊印出來的；第二，RGB 的亮藍與青藍有些超出 CMYK 能印的範圍，轉換之後一定有落差；第三，最後的準繩是色票與打樣，不是螢幕。

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

下表的 CMYK 跟開頭純藍那一欄一樣，是用簡單公式從 RGB 換算出來的近似值。實際成色隨印刷機、紙張與描述檔而異，以印刷廠的色票或打樣為準。

Adobe 的 Photoshop 說明文件寫到，CMYK 實際能呈現的色彩範圍，取決於印刷機的特性與印刷條件；部分 RGB 顏色落在 CMYK 色域之外，轉換時會被改成最接近的 CMYK 色，高飽和顏色的外觀可能因此改變。同一組 RGB，用不同的 CMYK 描述檔轉換，結果也不一樣；以常見的描述檔轉換來看，大致的方向是亮度與飽和度越高的藍色與青色，轉換之後越暗、越不鮮豔，但具體會變成什麼顏色，仍要看所用的描述檔。

另外，公式常算出 C 與 M 同時 100 的組合（純藍、navy），這並不是建議的配方。把這張表直接當成品牌藍的正式規格，印出來的顏色很可能跟預期不同。

鮮亮的藍與青容易超出色域，CMYK 只能取近似色

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

這不代表 #0000FF 這個色碼一定超出色域，而是亮度與飽和度越高的藍色與青色，越容易遇到這個狀況。Okabe 與 Ito 的說明，對純綠與純紅也有類似的提醒，指出它們超出了可印刷的色彩範圍；那一頁談的不是藍色，但純色在印刷時被壓暗的道理是相通的。

實務上的做法很單純，定稿前，把品牌藍、標題藍用警告三角檢查一次，出現三角形的，就接受它改成最接近的可印色；如果品牌藍一定要比 CMYK 能印的更鮮亮，就改走專色，不過專色能不能達到想要的效果，要和印刷廠確認。

品牌藍要以專色色票和軟打樣確認

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

Pantone 的網站自己聲明，網站上顯示的 Pantone 顏色是電腦模擬的結果，可能與 Pantone 的標準色不符，使用前要查閱 Pantone 出版的色票。專色的廠商自己都這樣說，螢幕上的藍色就更不能直接拿來當印刷的依據；品牌藍如果需要比 CMYK 更穩定，或是超出 CMYK 的色域，可以指定專色，以實體色票本比色為準。

Adobe 的 Photoshop 軟打樣有一個 Simulate Paper Color 選項，會依打樣描述檔模擬真實紙張偏暗的白，並非所有描述檔都支援這個選項。淺藍底（aliceblue、lightblue）在偏黃的紙上，與紙色的差距會縮小，開啟模擬紙色之後，才看得出它印出來是否還分得出底色。

藍色的難處，不在挑哪一種藍，而在它放進深色背景之後還剩多少對比、印到紙上之後還剩多少鮮度。下次在設計稿裡放一塊藍色之前，先決定它的用途是文字、底色還是強調，再把相鄰的顏色用 WCAG 公式算一次，深色版面另外驗過一次；品牌藍的色票，則同時記下 HEX、CMYK 近似值、專色編號與用途，這樣的藍色，不論在螢幕上或紙上，都認得出來。