做前端和UI設(shè)計(jì)的朋友聊天記錄里多半都有過(guò)這么一幕設(shè)計(jì)師甩過(guò)來(lái)一張截圖說(shuō)“這里想用這種高級(jí)一點(diǎn)的灰”你盯著屏幕愣了三秒然后默默打開取色器開始吸取像素。顏色代碼表這東西看著基礎(chǔ)卻是每天都要用的硬通貨。不管是寫頁(yè)面、調(diào)PPT、剪視頻還是給甲方出方案拿不準(zhǔn)顏色的時(shí)候查表永遠(yuǎn)比肉眼硬猜靠譜。這篇文章我會(huì)把顏色代碼這件事徹底講透從HEX、RGB、HSL幾種格式的原理和換算到一份按場(chǎng)景分類的常用顏色代碼速查表再到開發(fā)、設(shè)計(jì)里的實(shí)際使用流程和踩坑經(jīng)驗(yàn)。適合剛?cè)腴T的前端新手、需要經(jīng)常跟顏色打交道的設(shè)計(jì)師以及那些只是偶爾做個(gè)物料但不想在色值上翻車的運(yùn)營(yíng)同學(xué)。讀完你至少能做到一件事拿到任何一張圖或一個(gè)色值都能快速搞清楚它是怎么組成的并且知道自己下一步該怎么用。1. 先搞懂顏色代碼的幾種格式與原理1.1 三種主流格式HEX、RGB、HSL各自的門道顏色代碼這件事核心就一句話計(jì)算機(jī)里的顏色本質(zhì)上都是數(shù)字。只是同一個(gè)顏色有好幾種不同的“記法”就像同一個(gè)日期可以寫成“2025-05-18”也可以寫成“May 18, 2025”含義一樣但適用場(chǎng)景不一樣。最常見(jiàn)的三種格式我一個(gè)個(gè)說(shuō)。HEX十六進(jìn)制形如#FF5733這是網(wǎng)頁(yè)開發(fā)里出鏡率最高的格式。六個(gè)十六進(jìn)制字符分成三段每段兩個(gè)字符對(duì)應(yīng)一個(gè)顏色通道順序是紅、綠、藍(lán)。#FF5733的意思就是紅色拉滿FF、綠色用了87、藍(lán)色用了51。這種格式的好處是緊湊、能直接寫進(jìn)CSS省字符壞處是普通人看著一長(zhǎng)串字母數(shù)字完全想象不出對(duì)應(yīng)什么顏色。RGB紅綠藍(lán)形如rgb(255, 87, 51)本質(zhì)和HEX一模一樣只是把十六進(jìn)制換成了十進(jìn)制。每個(gè)通道的取值從0到255255代表這個(gè)通道的光開到最大0代表完全關(guān)閉。RGB的好處是直觀數(shù)值越大顏色越亮調(diào)起來(lái)心里更有數(shù)。HSL色相、飽和度、亮度形如hsl(12, 100%, 60%)前三個(gè)字母分別是Hue色相、Saturation飽和度、Lightness亮度。色相用角度表示0度是紅色120度是綠色240度是藍(lán)色轉(zhuǎn)一圈360度正好回到紅色。這種格式最接近人類的感知方式——你不需要想紅綠藍(lán)各占多少只需要說(shuō)“這是什么顏色色相、夠不夠濃飽和度、亮不亮亮度”所以做配色調(diào)整的時(shí)候HSL往往是最好用的。除此之外還有一個(gè)RGBA和HSLA就是在末尾多了一個(gè)透明度參數(shù)A取值范圍0到10是全透明1是不透明。這在做彈層、遮罩、陰影這類需要層次疊加的效果時(shí)特別常用。1.2 十六進(jìn)制到底是怎么算的手把手教你換算很多新手看到#FF5733就頭大其實(shí)換算邏輯特別簡(jiǎn)單。記住一個(gè)基礎(chǔ)規(guī)則十六進(jìn)制就是滿16進(jìn)1字母A到F分別代表10到15。左右兩段分開看。以57為例左邊這位的5代表5個(gè)16右邊這位的7代表7個(gè)1所以57換算成十進(jìn)制就是5 × 16 7 87。同理FF就是15 × 16 15 25533就是3 × 16 3 51。所以#FF5733換算成RGB就是rgb(255, 87, 51)分毫不差。反過(guò)來(lái)如果要把一個(gè)十進(jìn)制數(shù)轉(zhuǎn)成十六進(jìn)制比如128先看它里面有幾個(gè)16128 ÷ 16 8余數(shù)是多少128 - 8 × 16 0所以128就是80。再比如200200 ÷ 16 12余812對(duì)應(yīng)字母C所以200就是C8。實(shí)際開發(fā)里你根本不需要經(jīng)常手動(dòng)做這個(gè)換算因?yàn)闉g覽器開發(fā)者工具、取色器、設(shè)計(jì)軟件全都內(nèi)置了即時(shí)轉(zhuǎn)換功能。但懂這個(gè)原理有一個(gè)好處當(dāng)你有“調(diào)深一點(diǎn)”“調(diào)淺一點(diǎn)”的需求時(shí)你能預(yù)判數(shù)值大概怎么變。比如#333333這種非常深的灰如果你想再淺一點(diǎn)往大了調(diào)就行——#555555、#777777每次調(diào)整都能估個(gè)大概。這種直覺(jué)在調(diào)色的時(shí)候比任何工具都值錢。提示日常用得最多的幾個(gè)十六進(jìn)制數(shù)和十進(jìn)制的對(duì)應(yīng)關(guān)系建議記一下00對(duì)應(yīng)033對(duì)應(yīng)5166對(duì)應(yīng)10299對(duì)應(yīng)153CC對(duì)應(yīng)204FF對(duì)應(yīng)255。這些數(shù)字在顏色代碼里出現(xiàn)頻率極高記住它們換算速度能快一大截。1.3 格式之間怎么快速轉(zhuǎn)換有必要背嗎這個(gè)問(wèn)題我的答案是不用背轉(zhuǎn)換公式但一定要會(huì)用工具。我見(jiàn)過(guò)太多人在群里問(wèn)“這個(gè)#F5F5F5轉(zhuǎn)成RGB是多少”其實(shí)三秒鐘就能解決。最快的辦法是打開瀏覽器調(diào)試工具F12在Styles面板里點(diǎn)任意顏色塊編輯器會(huì)實(shí)時(shí)展示HEX、RGB、HSL三種格式還能直接改。其次是用取色工具后面我會(huì)專門推薦幾款。如果你想偷懶直接在搜索引擎里輸入顏色代碼絕大多數(shù)搜索引擎會(huì)直接顯示預(yù)覽色塊和RGB/HSL值。但有一個(gè)轉(zhuǎn)換場(chǎng)景建議真正掌握——從HEX轉(zhuǎn)RGBA。因?yàn)樵O(shè)計(jì)師給的顏色通常是#FF5733這種不透明的HEX而你做頁(yè)面時(shí)經(jīng)常需要同色不同透明度的版本比如 hover 效果、背景疊層、蒙版。手動(dòng)把#FF5733轉(zhuǎn)成rgba(255, 87, 51, 0.6)是前端開發(fā)的高頻操作這個(gè)流程后面在實(shí)操環(huán)節(jié)會(huì)展開講?？傊袷街g的互相轉(zhuǎn)換思路比死記硬背重要拿到一個(gè)顏色先判斷它是HEX還是RGB再看有沒(méi)有透明度最后決定怎么用它。2. 一份能直接抄作業(yè)的常用顏色代碼表2.1 基礎(chǔ)色系網(wǎng)頁(yè)里出鏡率最高的18個(gè)基礎(chǔ)色做前端和設(shè)計(jì)的人桌面和收藏夾里幾乎都有一份顏色速查表。但網(wǎng)上流傳的大全表格往往列了幾百個(gè)顏色看著全真要用的時(shí)候反而不知道選哪個(gè)。我這里給一份精簡(jiǎn)到18個(gè)的基礎(chǔ)色表全部是在實(shí)際項(xiàng)目中最常用、不容易出錯(cuò)的顏色。這些顏色同時(shí)標(biāo)注了HEX和RGB方便不同場(chǎng)景直接復(fù)制。顏色名稱HEX代碼RGB值使用場(chǎng)景建議純黑#000000rgb(0,0,0)正文文字、深色模式背景深灰#333333rgb(51,51,51)次要文字、圖標(biāo)中灰#666666rgb(102,102,102)輔助文字、禁用狀態(tài)淺灰#999999rgb(153,153,153)占位符、描邊更淺灰#CCCCCCrgb(204,204,204)分割線、邊框背景灰#F5F5F5rgb(245,245,245)頁(yè)面背景、卡片底色純白#FFFFFFrgb(255,255,255)背景、反色文字紅色#FF0000rgb(255,0,0)錯(cuò)誤提示、刪除操作酒紅#800000rgb(128,0,0)強(qiáng)調(diào)色、活動(dòng)色橙色#FFA500rgb(255,165,0)警告、促銷標(biāo)識(shí)黃色#FFFF00rgb(255,255,0)高亮、選中標(biāo)記綠色#008000rgb(0,128,0)成功、完成狀態(tài)注意CSS里默認(rèn)的green其實(shí)是#008000這個(gè)偏暗的綠色平時(shí)設(shè)計(jì)中更常用的鮮綠色是#00FF00在CSS標(biāo)準(zhǔn)名里叫l(wèi)ime。有次接設(shè)計(jì)稿設(shè)計(jì)師標(biāo)注“綠色”沒(méi)給色值我用#008000配上去對(duì)方一看就說(shuō)“這綠得太沉悶了”后來(lái)才發(fā)現(xiàn)他腦子里想的是#00FF00。這也是為什么顏色代碼表一定要看HEX和RGB不能光看名稱。| 藍(lán)色 |#0000FF|rgb(0,0,255)| 鏈接、信息提示 | | 天藍(lán) |#87CEEB|rgb(135,206,235)| 插畫、漸變輔助色 | | 紫色 |#800080|rgb(128,0,128)| 會(huì)員標(biāo)、特殊標(biāo)識(shí) | | 粉色 |#FFC0CB|rgb(255,192,203)| 女性向活動(dòng)、優(yōu)惠標(biāo)簽 | | 棕色 |#A52A2A|rgb(165,42,42)| 復(fù)古風(fēng)、木質(zhì)紋理 | | 青色 |#00FFFF|rgb(0,255,255)| 科技感、漸變冷色 | | 深藍(lán) |#000080|rgb(0,0,128)| 背景、深色主題強(qiáng)調(diào) |2.2 風(fēng)格色系莫蘭迪、馬卡龍、賽博朋克怎么找代碼基礎(chǔ)色只能保證“不出錯(cuò)”但要讓頁(yè)面有調(diào)性就得用風(fēng)格色系。這幾年設(shè)計(jì)圈流行那幾類風(fēng)格其實(shí)都有對(duì)應(yīng)的色值規(guī)律掌握之后就不用每次去翻了。莫蘭迪色系特點(diǎn)是飽和度低、有點(diǎn)灰蒙蒙的柔和感看起來(lái)“高級(jí)”。典型配色有霧霾藍(lán)#85A9BF、灰豆沙粉#C69C9C、豆沙綠#A7BEAE、灰紫#B8A9C9。這類顏色的規(guī)律是RGB三個(gè)通道的數(shù)值比較接近、相互之間差距不大所以顏色看起來(lái)柔和灰暗。想自己調(diào)出莫蘭迪感有個(gè)土辦法把任意鮮艷顏色的HSL里飽和度砍掉一半左右亮度往中間拉一點(diǎn)基本就接近了。馬卡龍色系特點(diǎn)是飽和度中等偏上、亮度很高給人清甜明亮的感覺(jué)。常見(jiàn)的有淺粉#FFC8DD、薄荷綠#B8E0D2、淺黃#FFF3B0、淺藍(lán)#A9D6E5。這類顏色的核心是“奶”因?yàn)镽GB數(shù)值往往偏高比如#FFC8DD里紅色255、綠色200、藍(lán)色221所有通道都在200以上整體就會(huì)很輕盈。做女性向、兒童向或者零食電商的視覺(jué)馬卡龍色基本不會(huì)跑偏。賽博朋克風(fēng)格特點(diǎn)是高飽和撞色加暗背景常見(jiàn)霓虹青#00F0FF、熒光品紅#FF00A8、電光紫#8B00FF、亮黃#FFE300。這類顏色用起來(lái)有個(gè)重要原則——大面積用暗色比如深紫#1A0B33、黑青#0D1530壓底亮色只做點(diǎn)綴和高光。新手容易犯的錯(cuò)是滿屏高飽和熒光色亮到直接勸退用戶。實(shí)操心得配色風(fēng)格不是玄學(xué)是有規(guī)律的。把顏色代碼存下來(lái)以后多觀察它們的HSL值你會(huì)發(fā)現(xiàn)同一風(fēng)格的顏色在飽和度、亮度區(qū)間上是高度一致的。下次打開酷站收藏夾拿取色器吸一下你喜歡的設(shè)計(jì)稿背景色對(duì)照它們的HSL規(guī)律你就能自己反推出整套配色。2.3 功能色系后臺(tái)系統(tǒng)里按鈕、提示、狀態(tài)的配色邏輯如果你做過(guò)后臺(tái)管理系統(tǒng)、數(shù)據(jù)看板、SaaS產(chǎn)品一定會(huì)發(fā)現(xiàn)這些產(chǎn)品的顏色特別“規(guī)矩”成功是綠的、警告是橙的、錯(cuò)誤是紅的、信息是藍(lán)的。這不是設(shè)計(jì)師偷懶而是功能色有一套約定俗成的語(yǔ)義邏輯用戶已經(jīng)形成了條件反射。常見(jiàn)的功能色參考如下同時(shí)給出HEX和RGB功能類型HEX代碼RGB值使用建議主色/品牌色#1677FFrgb(22,119,255)主按鈕、選中態(tài)、鏈接參考Ant Design主色演變成功/完成#52C41Argb(82,196,26)成功提示、通過(guò)狀態(tài)、增長(zhǎng)數(shù)據(jù)警告/待處理#FAAD14rgb(250,173,20)警告提示、待審核、居中值錯(cuò)誤/失敗#FF4D4Frgb(255,77,79)錯(cuò)誤提示、刪除操作、失敗狀態(tài)信息/中性#1677FFrgb(22,119,255)信息提示、引導(dǎo)性說(shuō)明鏈接色#1677FFrgb(22,119,255)文字鏈接、可點(diǎn)擊元素功能色的核心講究是區(qū)分度也就是用戶掃一眼就知道當(dāng)前是正常、警告還是異常。所以功能色不要用模棱兩可的顏色不要用紫色做錯(cuò)誤提示不要用灰色做成功提示。同時(shí)同頁(yè)面里主色和功能色的使用頻次要拉開主色可以反復(fù)出現(xiàn)在按鈕、鏈接、導(dǎo)航里功能色只在對(duì)應(yīng)狀態(tài)出現(xiàn)不然滿屏都是彩色重點(diǎn)就沒(méi)了。3. 顏色代碼的真實(shí)應(yīng)用場(chǎng)景與實(shí)操要點(diǎn)3.1 開發(fā)時(shí)用HEX還是RGBA按場(chǎng)景選格式在實(shí)際寫頁(yè)面的時(shí)候用哪種顏色格式不是憑喜好而是看使用場(chǎng)景。我這里有幾個(gè)選了無(wú)數(shù)遍之后總結(jié)出來(lái)的經(jīng)驗(yàn)。靜態(tài)元素用HEX比如標(biāo)題、正文、背景、邊框這些顏色寫一次就固定的直接用HEX最簡(jiǎn)單代碼也最短。color: #333;比color: rgb(51,51,51);看著清爽多了。需要透明度變化用RGBA比如導(dǎo)航欄滾動(dòng)后的半透明背景、彈窗里的黑色蒙層、hover時(shí)的淺色遮罩這些場(chǎng)景用RGBA是最直觀的。你只需要寫background: rgba(0,0,0,0.5);就完事了不用再去單獨(dú)算顏色的半透明版本。需要?jiǎng)討B(tài)調(diào)色用HSL如果你做的功能允許用戶自己換主題色或者需要根據(jù)某個(gè)數(shù)值生成不同深淺的顏色HSL是唯一合適的格式。因?yàn)槟阒恍枰淖兩嗟闹当热缬靡粋€(gè)滑塊讓用戶從0轉(zhuǎn)到360一整條彩虹就出來(lái)了。如果用RGB做這件事你得同時(shí)控制三個(gè)通道累到懷疑人生。寫代碼時(shí)還有個(gè)小技巧CSS變量和顏色搭配使用。在項(xiàng)目的根目錄定義一套顏色變量比如--primary-color: #1677FF;后面所有引用主色的地方都寫var(--primary-color)。這樣以后改主題色只需要改一行全站跟著變。這套做法業(yè)界叫Design Token大廠的設(shè)計(jì)系統(tǒng)基本都是這么玩的。3.2 設(shè)計(jì)工具里的取色與配色流程如果是設(shè)計(jì)師或經(jīng)常做視覺(jué)的同學(xué)取色效率直接決定工作節(jié)奏。我的日常流程是這么走的拿到參考圖之后先用截圖工具或者取色器把核心顏色吸出來(lái)記下幾個(gè)關(guān)鍵色值然后進(jìn)配色工具里生成色板和漸變方案最后再把確定的色號(hào)輸出給開發(fā)。這里推薦幾個(gè)我用下來(lái)比較順手的工具。取色方面macOS自帶的“數(shù)字色度計(jì)”基礎(chǔ)但夠用Windows上微軟的PowerToys內(nèi)置了Color Picker快捷鍵就能喚起取色器全局取色不用切換窗口。如果你經(jīng)常做UI截圖標(biāo)注Snipaste的取色功能也很方便按一下就能吸色并自動(dòng)復(fù)制到剪貼板。配色方面Coolorscoolors.co是效率很高的一個(gè)隨機(jī)生成五色色板按一下空格就能換一組方案。Adobe Color支持基于色輪創(chuàng)建配色方案還能從圖片中提取顏色主題。UI Gradientsuigradients.com內(nèi)置了大量?jī)?yōu)質(zhì)漸變色值做背景漸變直接復(fù)制CSS代碼即可。Open Coloryeun.github.io/open-color是開源顏色系統(tǒng)已經(jīng)按色系和明度整理好了色階直接引用即可。操作提醒取色的時(shí)候有幾個(gè)細(xì)節(jié)容易翻車。一是注意取色器的采樣區(qū)域有些工具默認(rèn)取鼠標(biāo)指針?biāo)趩蜗袼氐念伾绻麍D片有噪點(diǎn)或者細(xì)邊單像素取出來(lái)的顏色會(huì)失真二是截圖時(shí)注意分辨率的縮放在高分屏上截圖取色建議先確認(rèn)取色器是否按物理像素采樣三是當(dāng)從微信或?yàn)g覽器截圖取色時(shí)圖片經(jīng)過(guò)壓縮會(huì)丟失部分色彩精度重要顏色盡量從原始文件取。3.3 從單色到色板三步搭配出一套不翻車的配色方案很多時(shí)候我們遇到的問(wèn)題是“手頭只有一個(gè)品牌色整套界面怎么配”。這里分享一套我從實(shí)戰(zhàn)中總結(jié)的三步法效果比盲目試色穩(wěn)定得多。第一步確定主色。主色就是品牌標(biāo)準(zhǔn)色通常來(lái)自Logo。把Logo放進(jìn)PS或?qū)I(yè)取色器提取最核心的那個(gè)顏色作為主色記為C。第二步用同一色相生成色階。保留主色的色相H值和飽和度S值只改變亮度L值分別調(diào)出深色版和淺色版。這樣生成的色板天然協(xié)調(diào)因?yàn)樯嘟y(tǒng)一。比如主色#1677FF它的HSL大約在hsl(214, 92%, 53%)左右我把亮度降到40%得到深藍(lán)升到80%得到淺藍(lán)用于不同層級(jí)的背景和按鈕狀態(tài)。第三步找一組中性色做配角。中性色就是黑、白、灰不參與色彩競(jìng)爭(zhēng)。把正文用#333、輔助文字用#666、分割線用#E8E8E8整套界面的“骨架”就很穩(wěn)了。如果覺(jué)得單調(diào)可以再引入一個(gè)低飽和的輔助色用于標(biāo)簽或圖標(biāo)點(diǎn)綴但輔助色面積一定不能超過(guò)主色。這三步走完一個(gè)頁(yè)面其實(shí)只需要兩三個(gè)彩色系加一組灰色階視覺(jué)上已經(jīng)足夠豐富。最怕的就是沒(méi)有章法地把七八個(gè)高飽和顏色堆在同一個(gè)頁(yè)面里那才是災(zāi)難。4. 最近常踩的坑顏色代碼相關(guān)的故障排查4.1 同一份代碼為什么每個(gè)屏幕顯示都不一樣這個(gè)坑幾乎每個(gè)做視覺(jué)的人都會(huì)遇到同一個(gè)#FF5733在設(shè)計(jì)師的Mac上看起來(lái)偏紅在客戶的Windows筆記本上偏橙在手機(jī)上又是一種顏色。出現(xiàn)這個(gè)問(wèn)題先說(shuō)結(jié)論很大概率不是代碼寫錯(cuò)了而是顯示器色彩空間不一致。目前市面上主流的屏幕色域有兩種sRGB和Display P3。sRGB是網(wǎng)頁(yè)內(nèi)容的標(biāo)準(zhǔn)色域絕大多數(shù)Windows設(shè)備和舊款顯示器都以此為準(zhǔn)。Display P3是蘋果推動(dòng)的廣色域標(biāo)準(zhǔn)覆蓋的顏色范圍比sRGB大約25%新款MacBook、iPad和iPhone都在用。當(dāng)你在P3廣色域屏幕上寫了一個(gè)sRGB色值的顏色系統(tǒng)會(huì)自動(dòng)映射并可能讓顏色看起來(lái)更鮮艷、更飽而在sRGB屏幕上則還原成原始值于是兩邊觀感就有了偏差。排查思路是這樣的先在瀏覽器開發(fā)者工具里確認(rèn)CSS里的顏色代碼本身沒(méi)問(wèn)題然后在兩臺(tái)顯示器上同時(shí)打開同一張參考圖對(duì)比。如果參考圖也有同樣的偏色說(shuō)明是屏幕色域差異如果只有網(wǎng)頁(yè)偏色再檢查是否誤用了P3色值——比如你在設(shè)計(jì)工具里直接截圖的色值可能已經(jīng)是P3值需要轉(zhuǎn)回sRGB再寫進(jìn)代碼。還有一個(gè)小細(xì)節(jié)CSS中可以用color-gamut媒體查詢來(lái)適配不同色域?qū)σ蟾叩捻?xiàng)目可以分別提供sRGB和display-p3的兩套色值。除了色域另一個(gè)常見(jiàn)原因是亮度調(diào)節(jié)。同一塊屏幕亮度不同時(shí)人眼感知到的顏色深淺也會(huì)不同尤其是深色背景上的淺色文字。這不是顏色的鍋但做設(shè)計(jì)評(píng)審時(shí)容易被當(dāng)成色差問(wèn)題提出來(lái)。4.2 設(shè)計(jì)師給的HEX怎么安全轉(zhuǎn)成帶透明度的RGBA這個(gè)場(chǎng)景太典型了設(shè)計(jì)稿里按鈕是#1677FF但它要求“點(diǎn)擊時(shí)顏色透明度60%”怎么辦很多人的第一反應(yīng)是打開轉(zhuǎn)換工具查一下RGB值然后拼rgba(22, 119, 255, 0.6)。這個(gè)思路對(duì)但有個(gè)更穩(wěn)的做法。實(shí)際上判斷一個(gè)顏色在某個(gè)透明度下疊加在某個(gè)背景上的最終可見(jiàn)顏色是一門專業(yè)的色彩疊加計(jì)算。如果只做CSS直接用RGBA就行瀏覽器會(huì)自動(dòng)幫你完成疊加計(jì)算。但如果你在做圖片導(dǎo)出、PPT配色或者把半透明色疊加到照片上的場(chǎng)景單純“透明度60%”得到的視覺(jué)效果會(huì)和設(shè)計(jì)稿有差異。這時(shí)候需要的是顏色疊加公式最終顏色 前景色 × 透明度 背景色 × (1 - 透明度)舉個(gè)例子一個(gè)不透明度40%的紅色#FF0000疊加在白色背景上最終顏色就是紅255×0.4255×0.6255綠0×0.4255×0.6153藍(lán)0×0.4255×0.6153得到rgb(255,153,153)也就是淺粉色。如果你在Photoshop里直接把這個(gè)效果取色取到的是#FF9999而不是#FF0000就會(huì)懷疑是不是顏色翻車了。明白這個(gè)原理你就知道做這類操作時(shí)應(yīng)該直接請(qǐng)教設(shè)計(jì)師最終期望的視覺(jué)效果而不是偷偷改色。實(shí)操心得跟設(shè)計(jì)師對(duì)齊透明度需求時(shí)最好問(wèn)清楚是“圖層不透明度”還是“填充不透明度”兩者計(jì)算邏輯不同。還有一類寫法是直接用HEX后加兩位十六進(jìn)制透明度比如#1677FF99后兩位99代表60%透明度約合153/255這在CSS里也是合法的8位十六進(jìn)制顏色格式很多設(shè)計(jì)工具導(dǎo)出的代碼就是長(zhǎng)這樣?？吹竭@種格式不用慌前面6位是顏色后兩位是透明度。4.3 對(duì)比度不夠被用戶噴顏色選擇也要過(guò)可訪問(wèn)性門檻我說(shuō)一個(gè)自己踩過(guò)的坑給某個(gè)活動(dòng)頁(yè)配了一組淺灰背景加淺色文字看著高級(jí)結(jié)果上線后大量用戶反饋看不清。原因就是前景色和背景色之間的對(duì)比度太低了。顏色搭配不僅關(guān)乎美觀還直接影響可用性尤其是戶外強(qiáng)光下用手機(jī)、視力不好的用戶以及色覺(jué)異常的人群。業(yè)界有現(xiàn)成的衡量標(biāo)準(zhǔn)就是WCAGWeb內(nèi)容可訪問(wèn)性指南里的對(duì)比度計(jì)算公式。簡(jiǎn)單的理解是將兩種顏色分別算出相對(duì)亮度較亮的值加上0.05再除以較暗的值加上0.05結(jié)果就是對(duì)比度。WCAG建議正常文本的對(duì)比度不低于4.5:1大號(hào)文本18px以上加粗或24px以上不低于3:1。工具方面很多配色軟件內(nèi)置了對(duì)比度檢查功能直接在line-height或字體排版的設(shè)置面板里能看到那個(gè)數(shù)字?？焖賹?shí)測(cè)的辦法是把你的文字顏色和背景顏色貼進(jìn)在線對(duì)比度檢測(cè)器看看是不是綠色通過(guò)。反過(guò)來(lái)講顏色代碼表里的同一個(gè)顏色在不同背景上的表現(xiàn)完全不同這也是為什么選色時(shí)一定要把“文字背景”當(dāng)成整體來(lái)看而不要孤立地評(píng)價(jià)一個(gè)顏色好不好看。如果對(duì)比度不達(dá)標(biāo)但你又不想放棄這個(gè)顏色可以做兩件事要么把文字改深比如從淺灰#999改成#333要么把文字加粗、加大利用大文本標(biāo)準(zhǔn)降低對(duì)比度要求。4.4 其他幾個(gè)詭異的小問(wèn)題有一個(gè)常見(jiàn)的坑顏色名稱在瀏覽器里表現(xiàn)不一致。CSS標(biāo)準(zhǔn)里預(yù)定義了幾百個(gè)顏色關(guān)鍵字比如gray、grey、silver這些在規(guī)范上都有統(tǒng)一值但實(shí)際使用中不同瀏覽器對(duì)個(gè)別名稱的解析可能有微差。有個(gè)更著名的例子是rebeccapurple一個(gè)帶有紀(jì)念意義的紫色所有現(xiàn)代瀏覽器都支持取值#663399。但性能優(yōu)化角度講一個(gè)顏色名的解析路徑比十六進(jìn)制值更長(zhǎng)反正都要敲鍵盤不如直接用HEX避免歧義。還有一個(gè)坑是透明背景疊加。如果你用截出的PNG去取色發(fā)現(xiàn)“本來(lái)應(yīng)該是白色背景取出來(lái)卻是灰色”先把Photoshop里的背景圖層檢查一下透明底在普通取色器里顯示為灰白格子取到的是棋盤格的灰色而不是真正的白。這類問(wèn)題不算代碼故障但很影響協(xié)作——前后端拿著完全不同的“白色”對(duì)來(lái)對(duì)去最后發(fā)現(xiàn)誰(shuí)都沒(méi)錯(cuò)錯(cuò)在取色方式。5. 顏色代碼工作流的高級(jí)玩法5.1 從顏色代碼到設(shè)計(jì)變量搭一套自己常用的色板庫(kù)用久了會(huì)發(fā)現(xiàn)大多數(shù)項(xiàng)目用到的顏色其實(shí)是高度重復(fù)的背景灰、正文黑、主色藍(lán)、成功綠、警告橙、錯(cuò)誤紅加上幾個(gè)深淺層級(jí)。所以建議每個(gè)人都維護(hù)一套自己的色板庫(kù)平時(shí)把所有用過(guò)的、驗(yàn)證過(guò)沒(méi)問(wèn)題的顏色按功能存起來(lái)下次新項(xiàng)目直接用省得每次重新配。一套完整的項(xiàng)目色板一般包含四層主色及深淺變體通常5到10個(gè)色階、中性灰階從深到淺約10個(gè)、功能色成功、警告、錯(cuò)誤、信息、輔助色根據(jù)品牌延展。存的時(shí)候不要只存HEX把對(duì)應(yīng)的RGB、HSL、用途說(shuō)明一并記錄下來(lái)。我自己的習(xí)慣是把它放在一個(gè)全局的CSS文件或者設(shè)計(jì)稿的色板頁(yè)里標(biāo)注好每個(gè)顏色的使用場(chǎng)景新同事接手直接看色板就知道該用哪個(gè)。5.2 最后的實(shí)用技巧查表和記憶怎么結(jié)合起來(lái)雖然有了全套色板但有些高頻顏色我建議直接背下來(lái)能背多少背多少背下來(lái)之后工作會(huì)順暢很多。優(yōu)先級(jí)最高的是黑色和各級(jí)灰階#000、#333、#666、#999、#CCC、#F5F5F5這些在寫文字層級(jí)時(shí)天天用。其次是品牌色你自己的項(xiàng)目主色、公司Logo色必須張嘴就來(lái)。再次是功能色的標(biāo)準(zhǔn)值成功、警告、錯(cuò)誤、信息四個(gè)顏色各記一個(gè)一般就夠用了。背色塊的小技巧是把顏色和它的十六進(jìn)制規(guī)律聯(lián)系起來(lái)。比如灰色系的規(guī)律就是RGB三個(gè)通道相等而#333比#666深、#666比#999深記數(shù)字順序就行。很多淺色背景是#F開頭的因?yàn)镕F、F5、FA這些通道值都很高接近白色。這些規(guī)律不是死規(guī)則但能幫你在沒(méi)有工具的時(shí)候快速估算一個(gè)顏色的深淺走勢(shì)。我見(jiàn)過(guò)一個(gè)挺絕的做法是把常用的幾十個(gè)顏色代碼做成本地網(wǎng)頁(yè)每格顯示色塊加HEX和RGB放在本地服務(wù)器或收藏夾里隨時(shí)打開就能搜。這比每次臨時(shí)百度又省事又準(zhǔn)確還能自己維護(hù)更新。如果你也想湊一套建議直接從這篇文章的分類色表里挑基礎(chǔ)色加功能色加你自己的品牌色基本就構(gòu)成一個(gè)能長(zhǎng)期用的色板庫(kù)了。