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