卡其色在 CSS 裡其實是淡黃，灰黃卡其色碼與 4 組配色對比值

在 CSS 裡寫下 khaki，螢幕上出現的是一種淡黃色 #F0E68C，和多數人想到的卡其色，也就是卡其褲、帆布袋那種帶灰的黃褐色，並不是同一個顏色。真正偏灰黃的，是另一個叫 darkkhaki 的色名，色碼是 #BDB76B。同樣被叫作卡其，網頁標準裡的兩格，和日常口中的卡其色，其實落在不同的位置。

這個落差來自卡其色本身。它是從軍服染布流傳下來的名字，不是色彩標準先定義好的色票，名字底下其實是一整段從淡黃、灰褐一路到橄欖的色帶。所以在設計稿裡用到卡其色，得先決定自己說的是色帶上的哪一格，再看這一格的色碼、放在白底或深底上讀不讀得清楚，以及轉成印刷用的 CMYK 之後會變成什麼數字。

要弄懂為什麼卡其色沒有單一答案，得先回到這個名字最初指的是什麼。

卡其色是什麼？

卡其色是一種介於黃與褐之間、偏向塵土的暗淡顏色。khaki 這個字本身就是「塵土色」的意思，根據 National Geographic 的說法，它來自烏爾都語。

這個顏色是從軍服開始的。National Geographic 提到，Corps of Guides 於 1846 年在英國東印度公司佔領印度期間成立，成員是擔任斥候並參與作戰的印度士兵。創立者 Harry Lumsden 被認為是最早把卡其布用在軍事上的人，他的副手 William Hodson 在 1848 年說過，要讓這支部隊在塵土之地隱形。早期的做法也很直接，就是用當地的泥土把白棉布染成塵土的顏色，穿在身上，人就和地景混在一起。

從一支部隊的制服變成通用的顏色，中間隔了半個多世紀。1897 年，卡其成為英軍海外部隊的正式軍服；之後美國的 Rough Riders、波耳戰爭裡的南非軍隊，也都採用卡其色，兩次世界大戰期間更持續擴散。軍隊以外，卡其色先出現在採礦與農作的勞動服裝，再進入網球、高爾夫、健行與露營這類休閒活動。進入日常衣櫥則晚得多，1910 年代 Levi Strauss 開始行銷適合戶外活動的卡其服裝，到了 1950 年代前後，廠商開始量產能穿進教室與辦公室的卡其褲，1990 年代 Dockers 又帶動了商務休閒的風潮。

中文裡的「卡其」，也和布料、制服連在一起。教育部《重編國語辭典修訂本》收有「卡其布」條，釋義是一種斜紋布，卡其是英語 khaki 的音譯，質地結實耐磨，多用於縫製背包、制服等。

換句話說，卡其色的源頭是一種染法和一種布，不是一組固定的數字。它沒有單一的標準色碼，網頁標準裡名叫 khaki 的那一格，只是這條色帶上的其中一個點。

khaki 與 darkkhaki 的 HEX、RGB、HSL 寫法

網頁標準裡帶 khaki 字樣的色名只有 khaki 與 darkkhaki 兩個。W3C 的 CSS Color Module Level 4 把 khaki 定義為 #F0E68C，是偏亮的淡黃；darkkhaki 定義為 #BDB76B，才是偏灰黃、比較接近日常卡其褲的那一格。下表把兩者的各種寫法並排，可以直接複製使用。

CMYK 這一列是用 K = 1 − max(R, G, B) 這條簡單公式，從 RGB 數字換算出來的近似值，既不是色彩描述檔的轉換結果，也不是任何印刷廠的實際配方。

六位 HEX 能不能縮成三位，要看三組數字裡每一組的兩個字元是否相同，像 #FFAA00 可以寫成 #FA0，每一位重複一次就能還原。#F0E68C 的第一組是 F0，#BDB76B 的第一組是 BD，兩個字元都不一樣，所以這兩個卡其色都不能縮寫成三位；硬寫成 #FEB 這類看起來接近的簡寫，展開後會是 #FFEEBB，已經是另一個顏色了。

八位 HEX 的最後兩位則是透明度。#F0E68C80 的 80 換成十進位是 128，除以 255 約等於 50.2%，所以它是一層約半透明的 khaki。

把兩欄 HSL 放在一起看，差別就清楚了。khaki 的明度 75%、飽和度 77%，是一個又亮又飽和的顏色，看起來自然是淡黃色。darkkhaki 的色相幾乎相同（54° 對 56°），但飽和度掉到 38%、明度降到 58%，才有了灰黃卡其的樣子。兩個色名的色相相近，差別在於灰度與明度，而不是單純的「淺卡其」與「深卡其」。

卡其色依明度分成淡色、中間色與暗色三段

日常說的卡其色既然是一段色帶，比較實用的找法，是從 CSS 命名顏色裡挑出「落在卡其附近」的色名，再依 HSL 明度分成三段：明度 75% 以上的淡色、約 58% 到 70% 的中間色、約 30% 以下的暗色。

「卡其」「米色」「沙色」「駝色」這類中文色名沒有通行的標準色碼，所以表裡列的是最接近的 CSS 色名，不是中文色名的定義。分段只看明度，也不代表哪一段才是「真正的卡其」，挑最接近需求的那一格就好。再暗、再偏紅的褐色，色感已經更接近咖啡色，這裡就不列了。

khaki、palegoldenrod、wheat 與 beige 等偏淡的卡其

明度 75% 以上的淡色段，最適合當大面積的底色或色塊，黑色或深色的字壓上去很清楚。

這四個顏色的色感各有偏向。khaki 與 palegoldenrod 都偏黃，後者飽和度低一些，看起來更柔和；wheat 的色相落在 39°，偏橘米色；beige 的明度高達 91%，幾乎接近奶白。想找「淺卡其」或「米白底」，其實就是這一段最淡的那一端，從 khaki 往 beige 走，顏色會一路退成淡淡的奶油色。

這一段的顏色有一個共同點，就是黑字壓在上面，對比都在 15 以上，閱讀完全沒有問題。反過來，把這些顏色當成字色放在白底上，對比就低到連大字的 3:1 都達不到。

darkkhaki、tan 與 burlywood 等明度居中的卡其

明度約 58% 到 70% 的中間段，顏色有了明顯的灰度或暖度，是這條色帶裡最有「卡其褲」「帆布」氣質的一帶。

darkkhaki 偏灰黃綠，色相仍然貼著黃色；tan 與 burlywood 的色相同為 34°，偏向暖調的沙褐色，只是 burlywood 的飽和度更高，看起來更飽滿一些。三者放在一起，darkkhaki 偏冷、另外兩個偏暖，在同一個版面裡很容易分出主次。

這三個顏色在白底上的對比都不到 3:1，所以適合當底色與色塊，不適合直接當字色。

olive 與 darkolivegreen 等偏暗的橄欖調

明度 30% 以下的暗色段，色相仍落在黃綠，是需要更沉穩的色感，或要在白底上當字色、線條色時的選擇。

olive 的飽和度是滿格的 100%，色感比較鮮明，帶著明顯的黃綠色味道；darkolivegreen 灰一些，更像軍綠與樹叢的顏色。兩者在白底上的對比差距不小，darkolivegreen 是 5.95，olive 只有 4.20，這個差別會直接決定它們能不能當一般文字的顏色。

另外還有一個鄰近色 olivedrab（#6B8E23，色相 80°、飽和度 60%、明度 35%），它比 darkolivegreen 更亮、更鮮，落在暗色段與中間色段之間，想要橄欖調又不想那麼沉的時候可以參考。

淡色與中間卡其在白底上對比不足，要當底色使用

淡色與中間段的卡其色，HSL 明度都在 58% 以上，直接當字色放在白底上，對比連大字的門檻都過不了；反過來把它們當底色，壓在上面的字色就得挑對。

W3C 的 WCAG 2.2（成功準則 1.4.3）規定，一般文字與背景的對比至少要 4.5:1；大字至少 3:1，而大字指的是 18 pt 以上，或 14 pt 以上的粗體，換成像素大約是 24px 與 18.5px。成功準則 1.4.11 則要求，按鈕邊框、圖示這類介面元件與圖形物件，對相鄰顏色至少要 3:1。W3C 也特別說明，算出來的對比值不做四捨五入，4.499:1 就是沒過 4.5:1。

對比值要先算出兩個顏色各自的相對亮度，再代入比值公式。每個 RGB 通道先除以 255、做 sRGB 線性化，才能算出相對亮度，步驟如下：

線性化：通道值 ≤ 0.04045 時除以 12.92，否則 ((通道值 + 0.055) / 1.055) 的 2.4 次方
相對亮度 L = 0.2126 × R + 0.7152 × G + 0.0722 × B
對比 = (較亮色的 L + 0.05) ÷ (較暗色的 L + 0.05)Code language: plaintext (plaintext)

文中所有的對比值都依這個公式計算，白色的 L 是 1.0、黑色是 0；khaki 的 L 是 0.7701，darkkhaki 是 0.4575，可以用同一條公式自己複驗。

卡其色當字色或圖示時，白底與黑底上的實算對比

下表把前面幾個卡其色當字色或圖示時，對白色與黑色背景的對比算出來。

白底上，淡色與中間段的卡其全都低於 3:1，連大字、圖示都不夠格。olive 的 4.20 高於大字的 3:1，卻低於一般文字的 4.5，所以只能當大字使用。只有最暗的 darkolivegreen 以 5.95 的對比，能當一般文字的顏色。

黑底上的情況正好反過來，所有卡其色都超過 3:1，khaki 與 darkkhaki 也都過了 4.5。所以卡其色並非不能當字色，淡色與中間段的卡其只要放在夠深的底上，就一樣讀得清楚。

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

把卡其色當按鈕、卡片、橫幅的底色，是最常見的用法。同一款卡其換上不同的字色，有的輕鬆過關，有的離一般文字的門檻還差一點。

先看 khaki #F0E68C 當底色：

sienna 的 4.39 離 4.5 只差一點，依 WCAG 不做四捨五入的規定，仍然算不過。saddlebrown 與 sienna 同樣是棕色，色相相近、明度只差一點，結果一個過關、一個不過，所以選字色不能只靠眼睛判斷，要實際算一次。

再看 darkkhaki #BDB76B 當底色：

兩張表放在一起，可以看出卡其底配深色字，比配白字穩得多。同樣是 darkolivegreen 這個橄欖綠，在淡卡其底上可以過關，換到中間卡其底上卻失敗了，原因是底色變暗，兩者之間的明度差跟著縮小。表裡的深棕 #3E2F1C、深藍 #1F2A44、炭灰 #2B2B2B 是示範用的顏色，不是任何品牌的色票。

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

卡其色屬於中性色，和藍、綠、灰黑這類顏色並排時，最容易取得平衡。下面四組各以一個底色為主，搭配主字色與強調色，每一組附上 HEX 與依 WCAG 公式實算的對比值，色碼是示範，不是標準色票。

卡其色在這四組裡分別擔任標題色、色塊、強調色與整塊底色，同一個顏色換了位置，搭配的字色與底色也跟著改變。

深藍底配淡卡其標題與白色內文

這是卡其色當標題色與高亮色的暗色主題。深藍與淡黃的色相相隔很遠，色塊之間分離得很清楚。

淡卡其在深色底上的對比相當充足，拿來當標題與按鈕底都沒問題。分隔線、圖示這類元件只需要 3:1，darkkhaki 的 6.89 綽綽有餘，不必再特別調亮。

米白底配橄欖綠文字與卡其色塊

這是淺色底的穩重配法，橄欖綠負責文字與主按鈕，卡其色只當色塊與分區的底色。

這一組要特別留意，darkkhaki 色塊對米白底只有 1.91，低於介面元件需要的 3:1。色塊裡的字讀得清楚，不代表色塊本身分得清楚，所以不能單靠色差來區分範圍，要再加上邊框、標題，或是留出足夠的空白。

炭灰底配中間卡其強調色

灰黑配卡其是低彩度的組合，卡其色負責強調，其餘全部是中性色，整體偏沉穩。

中間卡其 darkkhaki 放在深灰底上有 6.84，輕鬆超過 4.5，和它在白底上只有 2.07 形成鮮明的對照。同一個顏色只是換了底，就從白底上不能當字色的顏色，變成這一組裡最穩的強調色。

淡卡其底配深棕文字與赭色強調

卡其色直接當整塊底色，字色與強調色全都往棕色走，是四組裡最暖、最接近牛皮紙與帆布質感的一組。

sienna 比 saddlebrown 只淺了一點，對比卻從 5.54 掉到 4.39，離一般文字的 4.5 還差 0.11，所以這組的強調色要用 saddlebrown，sienna 頂多留給大字。順帶一提，這組的底色上若換成白字，對比只有 1.28，完全不能用。

卡其色轉成 CMYK 只能取近似值，定稿以色票為準

螢幕稿交給印刷廠之前，卡其色的 CMYK 有兩件事要先知道。一是從 RGB 換成 CMYK 的數字不是唯一的，用公式換算和用描述檔換算，會得到不同的結果；二是最後的準繩是色票與打樣，不是螢幕。因此文中的 CMYK 數字都只能當成近似值。

常見卡其色的 CMYK 公式近似值，與描述檔轉換的落差

下表的 CMYK 是用公式從 RGB 換算出來的起點，不是任何印刷廠的實際配方。

公式只看 RGB 的數字，描述檔則會依印刷條件去調整四色油墨的量，所以同一個色碼，換算方式不同，數字就不同。以 khaki 為例，公式換算是 C0 M4 Y42 K6；改用 Windows 內建的 Agfa SWOP Standard 描述檔、從 sRGB 以相對色度做一次轉換，得到的結果約是 C5 M3 Y60 K0。darkkhaki 也是一樣，公式是 C0 M3 Y43 K26，用同一份描述檔、同樣條件轉換，結果約是 C23 M14 Y70 K1。

這兩組描述檔數字只是用來說明差異的例子，不是通則，更不是建議的配方；換一份描述檔或另一種轉換方式，數字還會再變。Adobe 的 Photoshop 說明文件指出，CMYK 實際能呈現的色彩範圍，取決於印刷機的特性與印刷條件。所以不論用公式還是描述檔，算出來的都只是起點，實際成色還會受紙張影響，最後以印刷廠提供的色票或打樣為準。

定稿前用色票、色域警告與軟打樣確認卡其色

卡其色是低彩度的中性色，偏黃、偏綠、偏灰之間的細微差異，很難靠螢幕分辨。卡其色要用在品牌輔助色或印刷的底色時，就得靠色票和軟打樣來確認。

Pantone 的網站自己聲明，網站上顯示的 Pantone 顏色是電腦模擬的結果，可能與 Pantone 的標準色不符，使用前要查閱 Pantone 出版的色票。連提供專色色票的廠商都這樣提醒，螢幕上看起來對的卡其色，自然不能直接拿來當印刷的依據。

超出色域的顏色，則可以在 Illustrator 裡先檢查。Adobe 的說明寫到，RGB 與 HSB 色彩模型裡的某些顏色（例如螢光色），在 CMYK 裡沒有對應的顏色，無法印出來；選到超出色域的顏色時，色彩面板或檢色器會出現警告三角形，按下去會改成最接近的可印顏色。卡其色的飽和度不高，不像螢光色那樣明顯超出，但 khaki 這種偏亮的淡黃，還是用警告三角檢查一次比較放心。

彩稿的部分，可以在 Photoshop 用 View > Proof Setup（檢視 > 校樣設定）選好印刷條件的描述檔，再用 View > Proof Colors（檢視 > 校樣色彩）切換校樣顯示，在螢幕上模擬印出來的樣子，Photoshop 預設的快速鍵是 Ctrl+Y（macOS 為 Command+Y）。自訂校樣設定裡還有「模擬紙張顏色」可以勾選，不過不是每一份描述檔都支援。紙張本身偏黃或偏灰時，卡其色與紙色的距離會縮短，淡卡其底印在偏黃的紙上，可能就和紙色分不出來，軟打樣可以提早看出這件事。

卡其色沒有單一的標準答案，同一個名字底下，淡黃、灰黃、沙褐到橄欖都是選項，該選哪一格，取決於它在畫面裡要當底、當字，還是當強調。動手之前，先決定這一格卡其色的用途，再把相鄰的字色用 WCAG 公式算一次；要送印的卡其色，則把 HEX、CMYK 近似值與色票編號一併記下，並註明用在哪裡。這樣螢幕上看起來剛好的卡其色，到了紙上才不會變成另一個顏色。