平面設計

調咖啡色老是變髒灰?補色起手順序、色碼表與印刷偏色

把藍色顏料一點一點加進鮮橙色,顏色會先悶成褐色,再多加一點就變成髒灰。咖啡色就落在這條路中間很窄的一段,難的不是調出褐色,而是在變髒之前把手停下來。

螢幕上找咖啡色又是另一套邏輯。CSS 命名色表裡有 brown,色碼 #A52A2A 卻是偏紅的暗紅;表裡也沒有叫 coffee 的色名,想要低飽和的咖啡色碼,得自己用 HSL 調出來。顏料盤上要做的是抵銷鮮豔,螢幕上則是把明度往下壓,轉成印刷用的 CMYK 之後,數字還會再換一套。

這些落差,都要從咖啡色其實不是一個標準色名說起。

咖啡色是什麼?

咖啡色是日常色名,不是色彩標準裡定義出來的顏色。教育部《重編國語辭典修訂本》收有「咖啡色」,釋義是「一種褐色系列的顏色,與咖啡的顏色相近」,用咖啡這個生活中的東西來比喻,而不是給一段明確的色彩範圍。

同一本辭典裡,「褐色」的釋義是「一種黃黑而少光澤的顏色」,「棕色」則是「像棕毛一樣的顏色」。咖啡色與棕色是拿常見的事物來比喻,褐色則只描述成黃黑、少光澤,3 個詞條都沒有劃出哪一條色相或明度的界線,所以棕、褐、咖啡在日常會混用,色相的範圍也高度重疊。

從色彩構成來看,咖啡色就是把橙、紅橙這類暖色的明度壓低,有時再降低一點飽和度。CSS 的 hsl() 寫法裡,色相 0 度是紅、60 度是黃,30 度附近是橙;hsl(30, 100%, 50%) 是鮮豔的橙色 rgb(255, 128, 0),只要把明度降到 25%,就成了 rgb(128, 64, 0) 的棕色。後面表裡的 8 個棕色系命名色,色相也都落在 0 到 30 度、明度在 25% 到 67%,全部集中在紅到橙一帶。

標準這一端同樣找不到現成答案。W3C《CSS Color Module Level 4》的命名顏色表裡,沒有 coffee、mocha、espresso、caramel 這類色名,所以日常說的深咖啡、焦糖色、摩卡色、奶茶色,都沒有標準色碼。本篇的色碼因此分成 2 類,W3C 命名色有標準出處,本站自訂的色碼一律標「示範色」,不冒充標準色票。

顏料是越混越暗,螢幕是越混越亮,兩邊調咖啡色的邏輯剛好相反,從顏料這一邊最容易看懂。

顏料調出咖啡色,靠補色對或紅黃藍三原色

咖啡色怎麼調,用顏料的話有 2 條路,一條是用補色對互相抵銷鮮豔,一條是把紅、黃、藍三原色一起混。顏料屬於減色混合,混進去的顏色越多越暗,所以調咖啡色靠的是讓鮮豔的顏色彼此抵銷,只剩下低彩度的褐色,深淺與冷暖再用白、黑和補色修正。

調色看的是顏色一步步的變化,不是照固定配方。不同品牌、不同材質(水彩、壓克力、油畫)的同名顏料,色相和染色力都不一樣,同一組比例換一批顏料就調不出同樣的顏色,比起記比例,掌握起手順序與判斷訊號更靠得住。動手之前,先在廢紙上試色,確認顏色再下筆。

調咖啡色常用的橙加藍、紅加綠與黃加紫 3 組補色

補色是調出咖啡色最快的一條路,指的是 2 個顏色混在一起後能互相抵銷,得到近乎無彩的黑或灰。不過配法並不只有一種,Colour Literacy Project 指出,補色可以用不同方式定義,常被接受的有 2 種,一種是以顏料、油墨或色光混合後能得到無彩的黑、灰或白為補色,另一種是以視覺殘像的色相相同為補色,定義不同,配對也就不同。

兩種定義落差最大的是藍。在顏料混色裡,要得到近乎中性的深灰,看起來是藍的顏料要和看起來是紅橙的顏料混,所以顏料調咖啡色時,和藍配對的是偏紅的橙;在色光的加色混合裡,藍光卻是要和黃光混才會得到白。

顏料調咖啡色最常見的補色配對有 3 組,橙加藍、紅加綠、黃加紫。每一組裡其實都含了紅、黃、藍 3 種原色,橙是紅加黃,綠是黃加藍,紫是紅加藍,再加上剩下的那一色,等於把 3 種原色都混進去,這也是它們都能走向褐色的原因。

起手時,先取量較多、染色力較弱的那一色當底,例如橙,再把補色一點一點加進去,看到鮮豔度消失、顏色轉成褐色就停手。藍、綠、紫這類顏料的染色力通常比較強,要從極少量開始;補色加太多,顏色會變成髒灰,而不是咖啡色。

兩色的量也決定咖啡色偏向哪一邊。誰的量多,咖啡色就偏向誰,橙多藍少會偏暖棕,藍多橙少則偏灰褐。這只是通則,實際加多少,仍得看手上那幾支顏料的染色力。

調咖啡色常用橙加藍、紅加綠、黃加紫 3 組補色,先放底色再少量加補色,鮮豔度消失轉成褐色就停手
3 組補色都含紅、黃、藍三原色,沒有固定比例,先放底色再一點點加補色,看到鮮豔度消失就停手,加太多會變成髒灰。

紅黃藍三原色一起混,先調橙色再加藍

手邊只有紅、黃、藍 3 支顏料時,走法其實是補色法的延伸,先把紅與黃調成橙,橙的補色是藍,再把藍一點一點加進去,直到鮮豔度消失。

3 色同時等量倒在一起,最容易調成髒灰或髒黑,因為藍的染色力通常最強,一下子就把其他顏色蓋掉。「幾份紅、幾份黃、幾份藍」這種固定比例也派不上用場,同名顏料的染色力本來就不一樣,換一個品牌,比例就跟著失效。

比例用不上,就看顏色來判斷下一步:

  • 顏色偏紅,補一點綠或藍
  • 顏色偏黃,補一點紫或藍
  • 顏色偏灰綠,是藍加過頭,回頭加紅或橙,把暖色拉回來

另外要分清楚,紅黃藍是傳統美術色環的三原色,印刷的青、洋紅、黃,與螢幕的紅、綠、藍,是另外 2 套不同的系統。接下來的色碼與 CMYK 數值,都屬於螢幕與印刷這 2 套。

用白、黑與補色調整咖啡色的深淺和冷暖

調出基礎咖啡色之後,要變成深咖啡、淺咖啡,或偏暖、偏冷,每一種調法都有副作用。調淺要加白色顏料(水彩則是加水稀釋),副作用是顏色會偏粉、偏灰,需要補一點黃或橙把暖度拉回來;調深要少量加黑,或加深藍、深紫這類暗色,黑加多很快就變髒,一次只加一點。

冷暖則看紅與黃的比例。偏紅偏黃的是暖咖啡,加一點藍或綠就會偏冷、偏灰。調色途中如果顏色走偏,可以對照下面的訊號找原因:

  • 顏色太綠或太灰,是補色加過頭,回頭補上原本被蓋掉的那一色
  • 顏色太鮮豔,是補色還不夠,再補一點點

整個修正的順序也有講究。先調到色相對了,再調深淺,順序反過來容易越調越髒。

現成的 Burnt Sienna 與 Burnt Umber 可當調色起點

美術顏料本來就有現成的棕色。需要穩定、重複調出同一個咖啡色時,從這類顏料起手,比從鮮豔色混起來快,再用前面的方法微調。

根據 Winsor & Newton 的商品說明,Burnt Sienna 是燒過 Raw Sienna 製成的濃褐色顏料,名稱來自義大利的 Siena,色調偏紅褐、透明;Burnt Umber 則是深褐色顏料,取自泥土裡的天然褐色黏土,名稱來自義大利的 Umbria,燒過的顏料顏色會更濃。

現成棕色如果偏紅或偏黃,可以用前面提到的補色微調。同一個色名在不同品牌的實際色相略有差異,購買前看色卡,或先試色比較保險。另外,這 2 個都是美術顏料的色名,與螢幕上 CSS 的 sienna 是不同的東西,後面的命名色會再提到。

CSS 命名色沒有 coffee,8 個棕色系都偏紅橘

要能直接複製的標準色碼,CSS 命名色是最有出處的一組。W3C 的命名顏色表裡,本篇歸為棕色系的有 maroon、brown、sienna、rosybrown、saddlebrown、chocolate、peru、sandybrown,共 8 個。更淺、更偏黃的 tan、burlywood、wheat 已經落在卡其色的範圍,黃褐的 goldenrod、darkgoldenrod 則偏向金黃,所以這裡都不列。

這些命名色有 2 個地方值得先注意。第一是飽和度偏高,8 個裡有 7 個在 56% 以上,其中 maroon 是 100%、sandybrown 是 87%,只有 rosybrown 低到 25%,所以多數看起來偏紅磚、偏橘,和日常說的低飽和、偏灰一點的咖啡色有落差。第二是色名容易誤導,CSS 的 chocolate 是偏橘的 #D2691E,明度 47%,並不是巧克力那種深褐;CSS 的 brown 色相是 0 度,偏紅的暗紅,色感比較接近紅磚,真正偏深褐的是 saddlebrown。

下面表格的 CMYK 欄,是用 K = 1 − max(R, G, B) 這條簡單公式,從 RGB 數字換算出來的近似值,既不是色彩描述檔的轉換結果,也不是任何印刷廠的實際配方,實際以色票與打樣為準。

偏紅的 maroon、brown、sienna 與 rosybrown

色相 0 到 19 度的紅褐一帶,色感偏磚紅、紅土與粉褐。CSS 裡沒有一個叫咖啡色的色名,這一組只是色相上最靠近紅的棕色系。

CSS 色名HEXRGBHSL(色相、飽和度、明度)CMYK(公式換算的近似值)
maroon#800000rgb(128, 0, 0)hsl(0, 100%, 25%)C0 M100 Y100 K50
brown#A52A2Argb(165, 42, 42)hsl(0, 59%, 41%)C0 M75 Y75 K35
sienna#A0522Drgb(160, 82, 45)hsl(19, 56%, 40%)C0 M49 Y72 K37
rosybrown#BC8F8Frgb(188, 143, 143)hsl(0, 25%, 65%)C0 M24 Y24 K26

brown 與 maroon 都屬暗紅,maroon 的飽和度高達 100%、明度更低,顏色也更深。sienna 像紅磚土,是這一組裡最接近褐色的;rosybrown 飽和度只有 25%,偏灰粉,是這一組最低調的一個。

偏橘的 saddlebrown、chocolate、peru 與 sandybrown

色相 25 到 30 度的橘褐一帶,包含最接近深咖啡的 saddlebrown,也包含最容易被名字誤導的 chocolate。

CSS 色名HEXRGBHSL(色相、飽和度、明度)CMYK(公式換算的近似值)
saddlebrown#8B4513rgb(139, 69, 19)hsl(25, 76%, 31%)C0 M50 Y86 K45
chocolate#D2691Ergb(210, 105, 30)hsl(25, 75%, 47%)C0 M50 Y86 K18
peru#CD853Frgb(205, 133, 63)hsl(30, 59%, 53%)C0 M35 Y69 K20
sandybrown#F4A460rgb(244, 164, 96)hsl(28, 87%, 67%)C0 M33 Y61 K4

saddlebrown 與 chocolate 的色相、飽和度幾乎一樣,分別是 25 度、76% 與 75%,差別只在明度 31% 對 47%,所以 chocolate 看起來是亮了一階的橘棕。peru 偏沙褐,sandybrown 已經偏橘黃,像焦糖奶茶的淺色端。

這一組仍然偏橘、飽和度偏高。要接近日常咖啡那種低飽和的暗棕,得靠下一節的 HSL 自己調。

CSS 的 8 個棕色系命名色色票與 HEX、HSL 色碼,brown #A52A2A 是暗紅,saddlebrown #8B4513 才偏深褐
CSS 命名色裡沒有 coffee,8 個棕色系多數偏紅橘,名叫 brown 的其實是暗紅,真正偏深褐的是 saddlebrown(資料來源:W3C)。

接近咖啡的低飽和棕色,用 HSL 自己調

前一節的落差,可以靠 HSL 補回來。螢幕上的咖啡色,色相固定在橙附近(約 25 度),飽和度降到 40% 上下,明度再往下壓。HSL 的 3 個旋鈕各管一件事,色相是顏色落在色環上的角度,飽和度是顏色有多鮮豔,明度是顏色有多亮;調咖啡色時先固定色相,再動飽和度與明度。

這一節所有色碼都是本站自訂的示範色,不是標準色票。表中「口語參考」欄的深咖啡、咖啡、淺咖啡、奶茶色、奶油白,只是日常叫法,沒有標準色碼;HSL 欄是由 HEX 反算後四捨五入,CMYK 欄沿用前面的公式換算近似值。轉成 RGB 之後還有個快速判斷的規則,表中暖褐色的 R 一定大於 G、G 大於 B,G 越接近 R 越偏黃,G 越接近 B 越偏紅。

固定色相只動明度,從深咖啡一路走到奶茶色

同一個色相(約 25 度)、同樣的飽和度(約 40%),只改明度,就得到 8 階由深到淺的示範色。

階口語參考HEXRGBHSL(由 HEX 反算)CMYK(公式換算近似值)
一深咖啡#362417rgb(54, 36, 23)hsl(25, 40%, 15%)C0 M33 Y57 K79
二無#4F3422rgb(79, 52, 34)hsl(24, 40%, 22%)C0 M34 Y57 K69
三咖啡#6B472Ergb(107, 71, 46)hsl(25, 40%, 30%)C0 M34 Y57 K58
四無#8F5F3Drgb(143, 95, 61)hsl(25, 40%, 40%)C0 M34 Y57 K44
五無#B67C54rgb(182, 124, 84)hsl(24, 40%, 52%)C0 M32 Y54 K29
六淺咖啡#C9A082rgb(201, 160, 130)hsl(25, 40%, 65%)C0 M20 Y35 K21
七奶茶色#E0C9B8rgb(224, 201, 184)hsl(25, 39%, 80%)C0 M10 Y18 K12
八奶油白#F3E9E2rgb(243, 233, 226)hsl(25, 41%, 92%)C0 M4 Y7 K5

8 階的色相與飽和度幾乎沒動,只有明度從 15% 走到 92%,所以看起來仍是同一個咖啡,只是從近黑的深褐一路淡下來。

到了第七、八階,已經是奶茶、奶油的感覺,和米色、卡其色的淺端重疊,這也說明了咖啡色和米色之間並沒有一條分界線。後面的配色會直接取用這 8 階。

咖啡色 8 階 HSL 示範色碼,從深咖啡 #362417 到奶油白 #F3E9E2,色相與飽和度固定、只改明度
固定色相約 25 度、飽和度約 40%,只改明度就從深咖啡走到奶油白,一到四階對白底都能當內文字色(資料來源:W3C)。

色相與飽和度各挪一點,咖啡色就偏紅、偏黃或偏灰

以第三階(明度 30%)為基準,只動色相或只動飽和度,各取 3 個示範色,就能看出偏紅咖啡、偏黃咖啡、偏灰咖啡與濃郁焦糖棕的數值是什麼樣子。先看色相,明度與飽和度都固定在 30% 與 40%:

示範色HEXRGBHSLCMYK(公式換算近似值)
偏紅棕#6B362Ergb(107, 54, 46)hsl(8, 40%, 30%)C0 M50 Y57 K58
基準(第三階)#6B472Ergb(107, 71, 46)hsl(25, 40%, 30%)C0 M34 Y57 K58
偏黃褐#6B552Ergb(107, 85, 46)hsl(38, 40%, 30%)C0 M21 Y57 K58

色相每挪十幾度,咖啡就從紅棕走到黃褐。對照 RGB 也看得出來,偏紅的那個 G 與 B 很接近、R 遠大於兩者,偏黃的那個則是 G 離 B 比較遠。

再看飽和度,色相固定在 25 度、明度固定在 30%:

示範色HEXRGBHSLCMYK(公式換算近似值)
灰褐#564B43rgb(86, 75, 67)hsl(25, 12%, 30%)C0 M13 Y22 K66
基準(第三階)#6B472Ergb(107, 71, 46)hsl(25, 40%, 30%)C0 M34 Y57 K58
濃郁焦糖棕#824417rgb(130, 68, 23)hsl(25, 70%, 30%)C0 M48 Y82 K49

飽和度降到 12% 就變成灰褐,升到 70% 則接近 CSS 的橘棕,這個 #824417 的色感已經貼近前面的 saddlebrown。從這幾組數值可以得到一個觀察,想讓顏色「像咖啡」,先把色相放在 20 到 30 度附近,飽和度放在 30% 到 45% 之間,再用明度決定深淺。這是本站示範色的觀察,不是業界標準。

咖啡色的 4 組示範配色與實算對比值

4 組示範配色各由一個底色、主字色與強調色組成,取用前面 8 階的示範色與少數 W3C 命名色,對比值都依 WCAG 公式實算。色碼都是示範,不是標準色票。4 組分別是淺底、深底、加大地色與加冷色,咖啡色在各組分別扮演字色、底色、強調色與橋接色的角色。

W3C 的 WCAG 2.2 規定,一般文字對背景至少要 4.5:1,大字(18 pt 以上,或 14 pt 粗體以上)至少 3:1;辨識介面元件所需的視覺資訊,以及理解內容所需的圖形,對相鄰的顏色至少 3:1。表中的對比值取到小數第 2 位,通過與否則以實際算出的值判斷。

咖啡色放在白底上時,明度 40% 以下(也就是 #8F5F3D 以下)的色階,對白底都能過 4.5:1,例如 #6B472E 對白底是 8.18,#8F5F3D 是 5.42。#B67C54 對白底只有 3.50 左右,只能拿來做大字或圖示。

奶油白底,字與連結用咖啡色階

最保守的是淺色底,整組都從 8 階示範色裡取,色相一致、整體很安靜,適合需要溫潤、不刺眼的版面。假設龐果設計的作品集頁面採用這組,配色與對比值如下:

用途色碼對比
底色#F3E9E2無
內文#36241712.36
標題與連結#6B472E6.85
強調字#8F5F3D4.54
按鈕底色 #6B472E 上的字#F3E9E26.85(白字則是 8.18)
反例(大字也不合格)#B67C542.93

#8F5F3D 只比 4.5 的門檻高出 0.04,已經是能當內文字色的最淺一階;#B67C54 只有 2.93,連大字的 3:1 都不到。同一個色相拉出 5 階,哪幾階能當字、哪幾階只能當色塊,要用對比值判斷,而不是靠眼睛。

深咖啡底上的字與分隔線都要取淺階

暗色主題的咖啡配法,底色是近黑的深褐,字與強調色都往淺階取。

用途色碼對比
底色#362417無
內文#F3E9E212.36
副標#E0C9B89.30
強調#C9A0826.21
分隔線(中間階,不合格)#8F5F3D2.72
分隔線(改用這一階才合格)#B67C544.22

分隔線若是用來區分內容、屬於理解版面所需的圖形,就要對底色達到 3:1。用中間的 #8F5F3D 只有 2.72,低於門檻,改用 #B67C54 就有 4.22,過關。深咖啡底上,字與線都要比中間階再往淺處取,中間階最容易停在門檻之下。

咖啡色加橄欖綠、赭色與沙色的大地色組合

咖啡色是大地色系的核心,這一組再搭橄欖綠、赭色與沙色 3 個取自土壤、植物與岩石色感的顏色。「大地色」本身沒有標準色票,這組只是示範,橄欖綠用 CSS 的 darkolivegreen #556B2F,赭色用 CSS 的 sienna #A0522D,這裡的 sienna 是 CSS 色名,不是美術顏料的 Burnt Sienna。

用途色碼對比
底色#F3E9E2無
標題與主按鈕(咖啡)#6B472E6.85
連結與次要按鈕(darkolivegreen)#556B2F4.98
強調字(sienna)#A0522D4.70
沙色塊 #E0C9B8 上的字#3624179.30

這組整體偏沉穩,缺點是 3 個色都偏暗,少了一個亮點色。想讓畫面亮一點,可以多留一些奶油白的空白,讓版面透氣。

咖啡色搭青灰色時靠明度拉開對比

暖咖啡搭冷青灰最能看出,色相相反不等於看得清楚,明度才是對比的主因。這組的底色用 CSS 的 darkslategray #2F4F4F。

用途色碼對比
底色#2F4F4F無
內文#F3E9E27.47
副字#E0C9B85.62
強調(只夠大字與圖示)#C9A0823.76
反例(咖啡直接放在青灰上)#6B472E1.09

咖啡 #6B472E 直接放在青灰 #2F4F4F 上,對比只有 1.09,色相雖然一冷一暖,明度卻幾乎一樣,兩色貼在一起很難分辨。冷暖搭配要讓兩色的明度拉開,咖啡色放在冷色底上,得用淺階。

咖啡色 4 組示範配色的 HEX 色碼與 WCAG 實算對比值,咖啡 #6B472E 放在青灰 #2F4F4F 上只有 1.09
同一組咖啡色階能不能當字或分隔線,要看對比值,咖啡直接放在青灰底上只有 1.09,明度拉開才看得清楚(資料來源:W3C)。

咖啡色轉成 CMYK 只是參考值,印刷時要留意偏色

螢幕上看起來剛好的咖啡色,轉成 CMYK 之後有 2 件事要先知道。同一個咖啡色,用公式換和用色彩描述檔換,會得到落差明顯的 2 套數字;咖啡色在印刷時,也特別容易偏紅、偏黃或偏灰。

Adobe 的 Photoshop 說明指出,CMYK 雖然是標準的色彩模型,實際能呈現的色彩範圍會依印刷機與印刷條件而異。也就是說,不論是公式還是描述檔,算出來的都只是起點。

公式與描述檔換出 2 套不同的 CMYK 數字

下表用同樣 4 個咖啡色,並排公式換算與單一描述檔換算的結果。描述檔欄是以 Python 的 Pillow(ImageCms),用 Windows 內建的 Agfa SWOP Standard 描述檔(RSWOP.icm),從 sRGB 以相對色度換算出來的單一結果,不是通則,也不是配方。

顏色HEXCMYK 公式近似CMYK 描述檔近似(單一描述檔結果)
saddlebrown#8B4513C0 M50 Y86 K45C36 M81 Y95 K16
示範色三階(咖啡)#6B472EC0 M34 Y57 K58C48 M69 Y79 K32
示範色四階#8F5F3DC0 M34 Y57 K44C38 M66 Y82 K9
示範色一階(深咖啡)#362417C0 M33 Y57 K79C21 M28 Y25 K90

從表中可以看出幾件事。公式欄的青版一律是 0,描述檔轉出來的 4 個咖啡色卻 4 版都有墨,青版從 21 到 48;前 3 個咖啡色在描述檔裡,洋紅都比黃少,再加上青與黑壓暗,這也是咖啡色在印刷裡要靠 4 版疊出來的原因。公式欄看起來很乾淨,真正印出來的墨量卻複雜得多。

公式只看 RGB 數字,描述檔則會依印刷條件調整 4 色的墨量。實際成色隨印刷機、紙張與描述檔而異,以印刷廠的色票或打樣為準。

咖啡色印刷偏色的成因與軟打樣確認

咖啡色是中低飽和度、多版疊出來的顏色,任何一版的少量變動,都可能讓它偏色。偏紅還是偏黃,主要看洋紅版與黃版的比例,例如前面色相 8 度與 38 度的 2 個示範色,公式換算的洋紅版分別是 50 與 21,黃版都是 57;深淺則由黑版的量決定。

淺咖啡與奶茶色這類淺色底,又最容易受紙色影響。Adobe 的 Photoshop 說明提到,校樣設定裡有「模擬紙張顏色」,用來模擬真實紙張偏暗的白;也有「模擬黑色油墨」,用來模擬許多印表機上實際得到的深灰,而不是純黑。這 2 個選項不是每份描述檔都支援。

螢幕上看對的咖啡色,可以靠軟打樣先確認。在 Photoshop 的「檢視 > 校樣設定」(View > Proof Setup)選好印刷條件的描述檔,再用「檢視 > 校樣色彩」(View > Proof Colors)切換校樣顯示,就能看到轉成印刷條件之後的樣子。

定稿前,把咖啡色的 HEX、CMYK 近似值與色票編號一起記下來,並註明用途是底色、字色、連結還是強調,之後換人接手或重新輸出時,才不會各用各的版本。

咖啡色印刷偏紅偏黃看洋紅版與黃版比例、深淺看黑版,送印前用 Photoshop 校樣設定與校樣色彩做軟打樣
咖啡色偏紅或偏黃看洋紅版與黃版,深淺看黑版,送印前先軟打樣確認,最後仍以印刷廠的色票或打樣為準(資料來源:Adobe)。

咖啡色沒有一組放諸四海的標準色碼,顏料盤上看的是補色抵銷,螢幕上看的是色相、飽和度與明度,印刷時看的是色票和打樣。先把色相定在紅橙之間,再慢慢調深淺,顏色就不容易走偏;交給印刷之前用色票確認一次,螢幕上的那個咖啡色,才會是紙上拿到的咖啡色。

常見問答

本區問答由 AI 依文章內容自動整理,僅供快速參考,正式內容仍以全文為準。

咖啡色有標準色碼嗎?

咖啡色是日常色名,沒有標準色碼,W3C 的 CSS 命名色表裡也找不到 coffee、mocha 這類色名。CSS 的 brown 是 #A52A2A,屬於偏紅的暗紅;棕色系命名色裡偏深褐的是 saddlebrown #8B4513。

咖啡色用顏料怎麼調配?

咖啡色用顏料調配,靠補色對互相抵銷鮮豔,常見橙加藍、紅加綠、黃加紫 3 組。先取量多、染色力較弱的一色當底,再把補色一點一點加入,鮮豔度消失轉成褐色就停手;只有紅黃藍時,先把紅與黃調成橙再加藍。

低飽和的咖啡色用 HSL 怎麼設定?

低飽和的咖啡色可以先把色相放在 20 到 30 度附近、飽和度放在 30% 到 45%,再用明度決定深淺,例如 hsl(25, 40%, 30%) 就是 #6B472E。這是本篇示範色的觀察,不是業界標準。

咖啡色字放在白底上對比夠嗎?

咖啡色在白底上,明度 40% 以下的色階都能達到 WCAG 一般文字 4.5:1 的門檻,例如 #6B472E 對白底是 8.18、#8F5F3D 是 5.42;#B67C54 只有 3.50 左右,只適合大字或圖示。

咖啡色印刷為什麼容易偏色?

咖啡色是中低飽和、靠多版疊出來的顏色,任何一版少量變動都可能偏紅、偏黃或偏灰,偏紅偏黃看洋紅版與黃版的比例,深淺看黑版。送印前可先用 Photoshop 的校樣設定做軟打樣,實際成色以印刷廠的色票或打樣為準。

資料來源
  1. 重編國語辭典修訂本:咖啡色 — 教育部
  2. 重編國語辭典修訂本:褐色 — 教育部
  3. 重編國語辭典修訂本:棕色 — 教育部
  4. CSS Color Module Level 4 — W3C
  5. Complementary colours — Colour Literacy Project
  6. Web Content Accessibility Guidelines (WCAG) 2.2 — W3C
  7. 了解 Photoshop 色彩模式 — Adobe
  8. 螢幕校樣色彩 — Adobe
  9. Winton Oil Colour - Burnt Sienna — Winsor & Newton
  10. Artists' Oil Colour - Burnt Umber — Winsor & Newton