做前端也好做设计也好跟颜色代码打交道几乎是每天的必修课。这些年我见过太多人处理颜色靠截图取色、靠在线工具来回切换、靠看起来差不多就把代码贴上去了结果换了个屏幕或者换了个场景就翻车。其实颜色代码这件事只要把背后的逻辑理顺它就像查字典一样简单甚至能让你不打开设计软件就能在脑子里快速估算出一个颜色的大致代码范围。这篇内容就是围绕颜色代码表来展开的适合刚接触配色的小白也适合已经用了一年半载但还是只会复制粘贴、想搞清楚原理的从业者。我会把常用的配色代码、不同颜色体系的转换逻辑、以及实测中踩过的坑一次讲透。1. 别只会复制粘贴HEX、RGB、HSL、CMYK四种颜色代码的本质区别颜色代码不是只有一种写法。很多人一提到颜色代码就想到#FFFFFF这种以井号开头的六位十六进制数这没错但只掌握这一种远远不够。实际工作中你会在设计软件里看到RGB在调色面板里看到HSL在印刷需求里看到CMYK。如果搞不清它们各自是什么、为什么存在遇到跨场景协作的时候就会非常被动。1.1 十六进制HEX代码从#FFFFFF说起HEX全称是Hexadecimal十六进制颜色代码它本质上是RGB颜色的另一种表示方法。一个#FFFFFF由三组两位十六进制数组成每组对应红、绿、蓝三个通道取值从00到FF换算成十进制就是0到255。举几个例子你就看明白了#FF0000FF是255对应纯红绿和蓝都是0。#00FF00纯绿因为只有绿色通道拉满。#0000FF纯蓝。#000000三个通道都是0黑色。#FFFFFF三个通道都是255白色。两个字符的十六进制数能表示多少种值从00到FF一共是256种那么三个通道组合起来就是256的三次方16777216种颜色也就是常说的1600万色。这就是HEX代码能表达的颜色范围上限。我自己比较推荐在实际开发中养成一个习惯看到任意一个HEX代码先在头脑里按通道拆分。比如#2E8B572E对应红通道十进制468B对应绿通道十进制13957对应蓝通道十进制87。整体偏绿饱和度不算太高明度中等偏暗。这个颜色其实就是海绿色。你不需要记住每个代码对应什么颜色但能拆通道之后看到一个陌生代码就能大致判断它的色相倾向。这套能力在日常调试样式表的时候极其好用。1.2 RGB与HSL屏幕世界的两套语言RGB是Red、Green、Blue三个通道的简称取值用十进制0到255表示或者用百分比表示。rgb(255, 0, 0)和#FF0000是同一个颜色rgb(255, 255, 255)和#FFFFFF也是同一个颜色。它们在数学上是完全等价的只是书写方式不同。但RGB有个天然的问题它不直观。给你一个rgb(46, 139, 87)你能立刻说出它偏什么色吗大多数人反应不过来。因为人类对颜色的认知方式是色相、饱和度、明度而不是红多少、绿多少、蓝多少。这也是HSL存在的意义。HSL是Hue色相、Saturation饱和度、Lightness明度三个维度的缩写色相H用角度0到360度表示0度是红色120度是绿色240度是蓝色360度又回到红色。饱和度S用百分比表示0%是灰色100%是纯色。明度L用百分比表示0%是黑色100%是白色50%是既不太暗也不太亮的中间状态。拿刚才的#2E8B57来说转换成HSL大约是hsl(146, 50%, 36%)。你看146度落在绿色到青色的区间饱和度50%明度36%。这种表达方式一眼就能读出一个颜色的性格。所以我强烈建议你把用HSL思维去看颜色当成一种基本素养。设计工具里调出任何颜色时优先看一眼HSL的数值比只看HEX更容易培养出色彩直觉。1.3 CMYK印刷世界里被忽略的代码体系CMYK是Cyan青、Magenta品红、Yellow黄、Key黑四个通道的组合它跟RGB是两套完全相反的混色逻辑。简单理解RGB是加色模式全通道为255时是白色因为光全开越加越亮CMYK是减色模式全通道为0时是白色背景越加越暗最终趋向黑色。屏幕上的颜色由发光体直接呈现所以用RGB。印刷品的颜色是墨水附着在纸面上再反射光所以用CMYK。你精心设计的一张贴图在屏幕上饱和度很高、层次很丰富一旦拿去印刷如果不做色彩转换印出来往往会发灰、发暗、颜色失真。这就是为什么正经的印刷流程里设计文件通常需要先转成CMYK预览一遍确认颜色衰减在接受范围内。颜色代码表如果只面向屏幕场景那HEX和RGB基本够用但只要你涉及线下物料、周边产品、包装印刷就得具备CMYK的基础认知不然最终交货时色差会被人质疑到怀疑人生。关于色差这个坑后面我专门用一节来讲。2. 颜色代码表背后的色相环逻辑从红橙黄绿到蓝紫的秩序感颜色代码表面上是密密麻麻的字符实际上它背后藏着一套完整的秩序体系。理解这个秩序你就不需要靠死记硬背来记忆颜色而是可以像推演公式一样推导出想要的代码。2.1 色相、饱和度、明度理解任何颜色代码的三把钥匙先说色相环。标准的色相环从红色开始按顺时针方向依次经过橙、黄、绿、青、蓝、紫最终回到红色。这正好对应HSL里0度到360度的角度变化0度红30度橙60度黄120度绿180度青240度蓝300度品红/紫360度红闭环懒一点的记法你只需要记住三原色在大脑里的位置红在0度绿在120度蓝在240度。其他的颜色都在它们之间的夹角里。橙在红和黄之间所以大约30度青在绿和蓝之间大约180度附近。饱和度决定颜色是鲜艳还是灰调。饱和度100%的颜色非常冲眼降低到50%左右就柔和了降到10%基本接近灰色。在实际项目中饱和度是最容易影响整站气质的参数大面积的纯饱和色会让页面显得廉价而低饱和度的颜色会让页面高级感明显提升。明度决定颜色有多亮或多暗。明度接近0%是黑色接近100%是白色50%左右是最纯粹的本色。调节明度其实是处理层次感的利器。同一组色相的按钮、标题、背景靠明度拉开层级比靠色相硬拼要舒服得多。2.2 互补色、邻近色、类似色配色关系的代码坐标用HSL的角度坐标来做配色决策比用眼睛猜靠谱得多互补色色相环上正好相隔180度的两个颜色。红色0度和青色180度蓝色240度和橙色30度绿色120度和品红300度。互补色放一起对比最强用在强调和提醒场景非常有效但大面积互相搭配容易刺眼。类比色色相环上相隔30度左右的颜色。比如红色0度和橙色30度蓝色240度和紫色270度。这类配色天然和谐不容易出错适合需要整体感和舒适感的设计。邻近色相隔60到90度左右。比类比色有更强的变化感但又不至于冲突。很多后台管理系统的主色和辅助色就是这个逻辑。在实际操作中我会用一个取巧的办法在HSL里固定饱和度和明度只改变色相角度。比如hsl(200, 70%, 50%)是蓝色把色相改成150就得到一个青绿色改成30就变成橙色。把四个操作按钮用同一饱和度、同一明度、不同色相代码排在一起整个界面的色彩逻辑会非常统一。这个技巧在没有设计师配合的前端项目里堪称救命稻草。2.3 一组经典色相的代码速记这里放一组我在多个项目里反复用到的经典色相代码按色相环顺序排好。这些不是标准答案但作为起点非常够用颜色HEX代码RGBHSL红色#FF0000rgb(255, 0, 0)hsl(0, 100%, 50%)橙色#FF8C00rgb(255, 140, 0)hsl(33, 100%, 50%)黄色#FFD700rgb(255, 215, 0)hsl(51, 100%, 50%)绿色#008000rgb(0, 128, 0)hsl(120, 100%, 25%)青色#00CED1rgb(0, 206, 209)hsl(181, 100%, 41%)蓝色#0000FFrgb(0, 0, 255)hsl(240, 100%, 50%)紫色#800080rgb(128, 0, 128)hsl(300, 100%, 25%)品红#FF00FFrgb(255, 0, 255)hsl(300, 100%, 50%)这张表的价值不在于你直接抄代码而在于你能通过对比看出同一色相明度不同、饱和度不同代码变化的方向是什么。绿色#008000的HSL里明度只有25%因为它往深里取黄色#FFD700的明度是50%因为黄色本身明度高取太暗就不是黄色了。这种直观对比看三遍你就能建立代码方向感。3. 高频场景配色速查表网页、PPT、数据可视化各取所需颜色代码表不是背出来的是用出来的。我按三类高频场景把代码重新组织了一下每一类背后的取舍逻辑都不一样这样你在实际使用的时候就不是盲目抄颜色而是带着目的去选。3.1 Web开发最常用的安全色与语义色Web前端最常用的颜色其实集中在少数几个语义角色上成功、警告、危险、信息、中性色。它们已经形成了事实标准语义HEX代码常见用途成功绿#52C41A / #67C23A操作成功、订单完成警告橙#FAAD14 / #E6A23C提醒、待处理危险红#FF4D4F / #F56C6C删除、失败、错误信息蓝#1890FF / #409EFF链接、进行中、提示中性灰#8C8C8C / #909399次级文字、占位边框灰#D9D9D9 / #E4E7ED分割线、描边页面背景#F0F2F5 / #F5F7FA后台页面底色双数编码出现得比较多的原因是Ant Design和Element UI是前端领域两套装机量巨大的组件库它们的语义色经过大量产品检验对比度和协调性都比较稳。如果你想快速开发一套不丑的后台界面直接沿用这些颜色代码是性价比最高的方案。有个细节值得强调成功绿我前后写了两组分别是#52C41A和#67C23A。前者更偏翠绿后者更偏柔和绿。在深色背景上用前者识别度更高在浅色背景上用后者更耐看。同样一个语义角色不同背景下微调代码是完全正常的操作。3.2 数据可视化配色中的区分度优先级数据可视化跟UI配色是两码事。UI讲究和谐和层级数据图表讲究的是区分度。做图表的时候你最怕出现相邻两组数据颜色太接近用户一眼扫过去分不清谁是谁。我的经验是图表配色优先保证色相的大距离差而不是等饱和度、等明度。一组推荐的8色序列#1F77B4蓝#FF7F0E橙#2CA02C绿#D62728红#9467BD紫#8C564B棕#E377C2粉#7F7F7F灰这套颜色取自Matplotlib的默认配色研发数据行业用了很多年核心逻辑就是色相尽量拉开蓝、橙、绿、红四色之间最小色相差也接近100度。不过要注意图表里不要出现第五种纯色超过8个分类时建议合并分类或者改用黑白灰的点线面区分硬加颜色只会让图变成花布。另外图表中的文字标签和图形主体之间也要保留对比。浅色图形配深色文字、深色图形配浅色文字这是图表可读性的底线。3.3 适合直接套用的几组低饱和莫兰迪色代码莫兰迪色这阵子在UI设计、PPT、家居软装上都很火很多人搜颜色代码表就是为了找这类高级灰调的颜色。莫兰迪色的本质就是低饱和度、中等明度、略微偏灰的颜色组合。它们的HSL特征很一致饱和度大多在20%到40%之间明度在40%到70%之间。我整理了三组可以直接套用的组合组合颜色1颜色2颜色3颜色4雾灰蓝组合#8FA3B8#A3B1C6#BCC9D6#D9E0E8豆沙粉组合#C4A4A4#D4B8B8#E3D0D0#F0E4E4燕麦奶组合#D6C6A8#E0D3B8#EADFC8#F3EBDB这三组颜色的共同特点是什么饱和度都很克制明度趋近因此组合在一起特别安静。做PPT的时候标题用颜色1正文背景用颜色4装饰线条用颜色2或颜色3整页的层次感就自然出来了。这种成套系使用的颜色代码比自己一个颜色一个颜色去试要高效得多。不过也要提醒一句莫兰迪色不等于百搭色。它是低对比代名词如果页面里需要强调的CTA按钮也用了莫兰迪色系用户可能根本注意不到按钮在哪。我的习惯是大面积背景用莫兰迪色系关键交互元素保留一到两个高饱和度色。这是高级感和可操作性之间的平衡点。4. 从代码到视觉色彩转换计算与对比度校验的实用方法颜色代码表不光是一堆静态数据它还能支撑起一系列动态计算。这一节讲两件最实用的事不同代码体系的换算方法、以及判断文字和背景是否可读的对比度校验。搞定了这两件事你在处理颜色代码时就从查表者升级成了计算者。4.1 HEX转RGB的手算与工具技巧HEX转RGB的原理其实不复杂。拿#FF8C00举例去掉井号得到FF、8C、00三组。把每组十六进制转十进制。FF2558C140000。结果是rgb(255, 140, 0)。十六进制转十进制的方法第一位乘以16第二位乘以1然后相加。比如8C就是8乘以16再加12等于140。这里的C在十六进制里代表12F代表15。这个手算过程看起来麻烦但练几次之后速度会很快而且你能逐渐建立FF是255、CC是204、99是153、66是102、33是51、00是0这样几档常用点位。反方向RGB转HEX也一样把十进制数拆成除以16的商和余数分别转成十六进制字符。255除以16商15余15写作FF140除以16商8余12写作8C0除以16商0余0写作00。实际开发中浏览器控制台和设计工具都提供了直接的取色转换功能手算是为了让你建立数量级直觉不是让你时刻手算。我自己的习惯是日常交互用浏览器开发工具里那个取色器它自带HEX、RGB、HSL三种格式切换遇到批量处理颜色的时候就写一个小脚本或者用在线颜色转换工具一次性处理。记住核心换算逻辑工具只是加速器。4.2 文字与背景的对比度校验WCAG标准怎么用颜色代码表选出来的颜色好不好看是一个维度能不能看清是另一个维度。这里必须提到WCAG的对比度标准。WCAG 2.1规定正文文字与背景色的对比度至少需要达到4.5:1大号文字18号以上加粗或者24号以上可以放宽到3:1。对比度的计算方式是对比度 (L1 0.05) / (L2 0.05)其中L1是较亮颜色的相对亮度L2是较暗颜色的相对亮度。相对亮度的计算公式涉及RGB通道的线性化手算很麻烦但好在有大量在线工具可以一键计算工具名一般是Contrast Checker或者颜色对比度检测器。你只需要输入前景色和背景色的颜色代码工具会直接输出对比度数值以及是否符合WCAG标准。举个实际例子白色文字配#1890FF蓝色背景对比度大约在3.9比1左右作为正常大小的正文其实是低于4.5:1标准的。这时候要么把蓝色调暗一点比如换成#0E6EB8要么把文字加大。很多前端项目踩过无障碍测试不通过的坑根因就是颜色代码选得太轻松、没有过对比度校验。我建议在项目启动阶段就把主色的浅色背景版本和深色文字版本一并确定下来不要到测试阶段才改。与其逐个颜色去试不如先锁定一组通过对比度校验的主色和辅助色颜色代码表里备注好各自的对比度数值方便随时查验。4.3 深浅色模式切换的颜色代码调整思路深色模式已经是各种系统标配了。你的界面支持深色模式时不能简单把背景色从白色换成黑色就算完事因为颜色在深色背景上的感知会变化。核心原则是深色模式下的文字颜色不要用纯白一般推荐#E5E7EB或#F2F3F5这类略微偏灰的白因为纯白在深色背景上会发刺、泛光。同理深色模式下的边框不要用纯黑推荐#3A3F45或#4B5563这类深灰色既保留了边界感又不会像纯黑一样死板。颜色代码从浅色模式映射到深色模式我自己用的方法是保持色相不变整体下降饱和度再根据角色调整明度。比如一个品牌蓝在浅色模式是#2B6CB0到深色模式下可以调整为#63B3ED让它在暗底上更亮、识别度更高。背后逻辑是深色背景下需要更亮的颜色来维持感知对比度而饱和度过高会产生光晕感所以同步降一点饱和度是稳妥的。这套调整思路不涉及特别复杂的算法你只要记住色相不变、饱和度和明度做镜像调整在取色器里手动微调几次就能找到手感。等调出感觉以后回头再看各种颜色代码表你会发现自己已经能预测很多颜色在深浅两种模式下的表现了。5. 我踩过的颜色代码坑设计稿与成品色差的三类元凶颜色代码表最大的价值在于标准统一。但是标准再统一实际操作中还是会有各种意外让颜色对不上。下面三个坑是我真实踩过的每一个都花过不少时间排查分享出来给各位省点弯路。5.1 显示器色彩模式不一致有一回我调了一个大半天才满意的品牌绿色值是#2F9E44在公司的设计稿上色彩很正。结果第二天把同一份设计稿发到另一个同事那里他说这个绿怎么这么艳、这么刺眼。我当场就愣住了排查到最后发现罪魁祸首是两台显示器的色彩模式不一致——我的屏幕开了sRGB模式他的屏幕用的是鲜艳模式饱和度被默认拉高了。这件事给我的教训是颜色代码本身是中立的但显示设备会翻译它。跨团队协作时如果对方反馈色差第一优先级不是怀疑代码而是确认对方的显示器色彩设置是否统一。最保险的做法是设计岗统一用sRGB模式因为Web内容的行业标准就是sRGB。自己调色时也尽量在校准过的屏幕上操作否则你看到的正可能根本不正。5.2 压缩与格式转换带来的色偏第二个坑跟图片压缩有关。页面里的图片经过压缩、转格式后颜色时不时会偏一点。最常见的场景是设计源文件用的是PNG格式里面某个颜色是#6B4EFF导出成JPG之后因为JPG是有损压缩色值可能变成#6749FF肉眼看不明显但用取色器一吸就露馅。如果对某个颜色有严格要求就必须用PNG或WebP等无损格式设置里关掉压缩选项导出的图片需要拉回来看一眼取色值是否一致。更彻底的方案是凡是带品牌色的地方优先用CSS或前端代码直接写颜色代码而不要做成图片。代码渲染的颜色不会有任何压缩损失这是最稳的一条路。5.3 颜色代码张冠李戴命名与复制时的低级错误这个坑最让人哭笑不得。有一次我在一个项目里发现按钮的悬浮态颜色不对代码里写的是#40A9FF但界面上明显偏紫。排查了很久才发现是设计稿里跟这个颜色接近的另一个色值#4A9EFF被人复制错了俩颜色放一起几乎一样但放到按钮背景上就产生肉眼可辨的差异。从那以后我给自己立了个规矩颜色代码一定要做命名管理。在CSS里用CSS变量或者设计令牌把颜色语义化命名比如--color-primary、--color-success、--color-text-secondary所有使用处都引用变量禁止在组件里散落写死的颜色代码。这样即使颜色代码表更新了也只改变量一处全站自动生效。命名和复制是小事但小事不管理在项目变大之后会变成一场灾难。另外还有一个很低级的错误HEX代码漏写井号或者六个字符漏写一个。#FF0000写成FF0000在很多CSS预处理器里也能被识别但换到部分工具的取色区就识别不了兼容性是最差的。养成好习惯所有颜色代码统一带井号、统一小写或大写放在一个可检索的文档里这比记忆任何颜色代码都重要。6. 给不同定位的人一份实用的颜色代码管理建议文章最后我不做总结就根据我的实际经验给不同角色的人几句实在建议。如果你刚接触配色我建议不要急着收藏一堆所谓的高级配色表先把HSL三个参数的含义揉碎了理解。随便挑一个你喜欢的颜色把它的HSL数值写下来然后在取色器里分别改色相、改饱和度、改明度观察颜色是怎么变化的。这个实验做上一小时你对颜色的理解会比背一百个代码更深刻。如果你是有经验的开发者我建议把颜色代码表整理成项目的设计令牌文档并且给每组主色都标注好对比度数值和深浅色两种模式下的变体。把这件事做在前面后面所有页面开发都能直接引用不会出现一个人一个色值的混乱局面。如果你经常做PPT或者自媒体配图建议优先使用色相相邻、饱和度统一的三色组合背景永远用最低饱和度的颜色文字用最高对比度的颜色。记住这三点搭配起来基本不会翻车。颜色代码表说到底就是一张地图地图再详细也代替不了你走路。多动手调、多留心观察颜色在不同设备上的表现慢慢你就发现那些密密麻麻的字符背后其实是有一套简明有序的视觉语法在支撑的。