1. 从一份“再也不用百度”的色表说起先交代个背景前段时间我接手一个拖了好几年的老站点页面配色乱得让人头疼。头部导航用一种偏蓝的灰按钮又是另一种蓝侧边栏忽绿忽紫表格边框甚至出现三种深浅不同的灰。翻遍项目文件没有设计规范没有主题变量所有颜色都是当年写页面的人临时从在线色值网站里抄的有些直接裸写在行内样式里有些用的是含义不明的十六进制缩写。为了把这些颜色理清楚我第一次认认真真做了一件事把HTML里能用到的颜色代码整理成表分类、标注用途、补齐RGB和HSL换算。做完之后我发现这东西比想象中有用得多——不光是给新页面写样式用日常改需求、调bug、跟设计对视觉稿效率都翻倍。这篇文章就是把那份整理过程、整理结果和使用心得一起端出来。你可以把它当成一份随手可查的HTML颜色代码速查手册也可以当成一篇“如何系统化处理网页配色”的实操笔记。无论你是刚接触前端的小白、做后台界面的全栈工程师还是经常要跟设计稿较劲的网页重构师这份内容应该都能直接用到你的日常项目里。我尽量不堆术语把颜色代码的写法规则、常用色系分布、真实项目里的选色经验和容易踩的坑讲透。看完之后再遇到“这个蓝色到底怎么写的”这种问题就不用翻书、也就不用搜网页了。2. 三种主流写法Hex、RGB、HSL到底有什么区别HTML颜色代码很多人第一反应就是“井号加六位字母数字”也就是十六进制表示法比如#FF5733。这确实是用的最多的方式但要真正用好颜色代码表最好先把三种主流格式都搞清楚因为不同场景下它们各有各的顺手之处。2.1 十六进制写法Hex最常用但别忽略三位缩写和带透明度格式十六进制颜色代码的本质本质上是把红、绿、蓝三个通道分别用两位十六进制数来表示从00到FF对应十进制的 0 到 255。比如#FF5733拆开就是红通道 FF255、绿通道 5787、蓝通道 3351整体是一个偏橙的珊瑚红。实际项目里有三类写法值得留意。第一类是简写形式。CSS里允许把类似#FF5733这种六位代码中成对重复的字符压缩成三位也就是#F53。谁会在意这种写法主要是为了省那三个字节的CSS文件大小。不过我从某前端团队那边学到一句话三位缩写虽然在老浏览器和各种CSS预处理器里都能正常解析但可读性不如六位团队协作时真没必要为了省三个字符给后续维护埋雷。除非写的是那种非常压缩的单行CSS库否则我建议一律写六位。第二类是带透明度的写法。CSS Color Module Level 4 引入了一种八位十六进制格式如#FF573380最后两位表示 Alpha 透明度取值范围同样是00到FF。其中80近似于 50% 透明度。这个功能非常实用以前要实现“半透明红色”只能通过rgba(255,87,51,0.5)或者先定义一个透明度样式现在一个字符串就搞定。唯一的坑是老版本浏览器特别是IE系列不支持这种写法如果你负责的项目还要兼容老内核这条路就走不通老老实实退回rgb()或rgba()。第三类是整数写法也就是#AABBCC中每个通道对应一个大写或小写字母大小写不敏感。实践中大家习惯统一写大写因为大写数字字母在代码里辨识度更高。一个小建议写代码时尽量统一一种写法别一会儿大写一会儿小写颜色代码表也要统一否则自动化扫描工具和同事的肉眼都会很难受。2.2 RGB写法带透明度的典型场景和设计稿换算最直观RGB格式就是rgb(255, 87, 51)这种三参数分别对应红绿蓝通道的十进制值。它与Hex是等价的只是表达形式不同。什么时候用RGB比用Hex方便当你从设计工具比如设计稿标注里直接拿到的是十进制 RGB 值的时候不用做 Hex 换算直接复制进CSS就行需要调透明度时rgba(255,87,51,0.6)比在Hex末尾加两位十六进制要直观得多如果要做颜色之间的动态计算比如根据数值变颜色在 JavaScript 里操作 RGB 数的加减乘除也比去解析字符串简单。很多人在RGB的格式细节上翻过车主要是两个地方一是现代CSS里空格和逗号的写法。官方规范是rgb(255 87 51 / 0.6)也就是空格分隔、滑动透明度的斜杠写法不过传统逗号写法rgba(255,87,51,0.6)在所有现代浏览器里依旧兼容。考虑到兼容性和团队既有写法用逗号版通常最稳妥。二是rgb()和rgba()已经是同义词了新规范里rgb(255,87,51,0.5)这种带第四参数的写法也合法。不过为了不被老浏览器坑还是建议在意兼容性的项目沿用老式的rgba()。2.3 HSL写法按色相、饱和度、亮度思考微调颜色时最舒服HSL是这三个格式里最容易理解的颜色模型也是我推荐给新手的“思考工具”。hsl(9, 100%, 60%)中第一个参数是色相角度0到360度分布整个色轮第二个是饱和度百分比第三个是亮度百分比。举个例子之前要调一个“看起来像番茄红”的颜色我习惯直接用 Hex 慢慢试试半天可能还是不对。现在先想番茄红是暖色色相大概在 10 度到 20 度之间饱和度高一点亮度中等。直接设hsl(12, 82%, 58%)然后微调两个百分点很快就能得到视觉上想要的颜色。这就体现出HSL的价值调整颜色时不需要去理解Hex每一位的变化对被感知颜色有多大影响只需改变一个维度的数值即可。CSS里HSL同样支持透明度写法是hsla(12, 82%, 58%, 0.6)或者用空格加斜杠的hsl(12 82% 58% / 0.6)。兼容性方面hsl()从IE9时代就已经得到了广泛支持所以放心用。三种格式的等价关系我整理成了下面这个表颜色描述HexRGB/RGBAHSL/HSLA番茄红#FF6347rgb(255,99,71)hsl(9,100%,64%)钢蓝色#4682B4rgb(70,130,180)hsl(207,44%,49%)金锭色#FFD700rgb(255,215,0)hsl(51,100%,50%)森林绿#228B22rgb(34,139,34)hsl(120,61%,34%)半透明珊瑚红#FF7F5080rgba(255,127,80,0.5)hsla(16,100%,66%,0.5)曾经有人用一句话总结三种格式的用途我觉得很精辟Hex是“写给浏览器看的”RGB是“写给设计稿看的”HSL是“写给人看的”。你大可不必纠结只掌握一种全学会以后按场景随便切换颜色代码表对你来说才真正算得上是一个好用的工具。3. 一份按色系拆好的高频颜色代码对照表网上有很多颜色代码表但大部分存在两个问题要么只是颜色名和Hex的一一罗列没有分类要么分类是按“网页安全色”来分的实际项目里并不好用。我这份表按视觉色系来整理每一项标注了代表场景和用途直接照着抄就能用在页面里。3.1 中性色系灰、黑、白、米色页面骨架的底色中性色是所有页面里使用频率最高的色系文字、边框、背景、阴影全靠它们撑起来。更重要的是中性色的选取决定了整个页面的“干净程度”。颜色名称HexRGB常见用途纯黑#000000rgb(0,0,0)正文文字、深色主题背景炭黑#1A1A1Argb(26,26,26)相比纯黑更柔和大段阅读不刺眼墨灰#333333rgb(51,51,51)次级文字、标题常用中灰#666666rgb(102,102,102)辅助说明文字、占位符银灰#999999rgb(153,153,153)禁用态文字、图标辅助色浅灰#CCCCCCrgb(204,204,204)分割线、边框淡灰#F5F5F5rgb(245,245,245)页面背景、区块底色米白#FAFAFArgb(250,250,250)表单背景、卡片底色纯白#FFFFFFrgb(255,255,255)卡片、弹窗、内容背景中性色表我给一个实用建议页面里的文字颜色不要全文一个色值。通常的做法是正文用#1A1A1A或#333333标题可以用#000000辅助文字降级到#666666或#999999这样页面看起来层级分明阅读起来不累。网格线、边框和分隔线统一用#E5E5E5这类非常浅的灰色不要用深灰深灰边框会显得非常“老派”像早年用表格布局的页面。3.2 红色系与橙色系强调色和警示色用的好是点睛之笔红色系在页面里承担的任务非常重按钮主色、错误提示、未读消息、促销标价。橙色系则常常作为“次强的强调色”能让页面活泼又不至于像红色那样强烈。颜色名称HexRGB常见用途朱红#FF0000rgb(255,0,0)极强警示、数字标红绯红#DC143Crgb(220,20,60)电商促销、重要提醒番茄红#FF6347rgb(255,99,71)活泼强调色适合标签珊瑚红#FF7F50rgb(255,127,80)温和的强调色适合按钮砖红#B22222rgb(178,34,34)深色背景上的警示文字深橙#FF4500rgb(255,69,0)消息提醒、热力提示橙色#FFA500rgb(255,165,0)次级强调、价格色浅橙#FFB347rgb(255,179,71)柔和视觉、图表配色红色最怕大面积使用。如果页面主色调是红色按钮悬停的红色会比默认色更深一些不然纯红色在屏幕上看久了会产生洋红色飘溢感视觉很躁。一个常见做法是默认态#DC143C悬停态#A31230专门用来做警示按钮。橙色方面主色#FFA500适合做非主操作按钮前提是旁边有更显眼的主色按钮在“压阵”。3.3 黄色系与棕色系暖背景、柔和边框、内容高亮黄色系的明度很高通常不适合做大面积文字。它更适合做背景色、高亮标记、图表的辅助色。棕色系则非常适合做“自然的背景色”比如木质感界面、盘点和日志面板。颜色名称HexRGB常见用途明黄#FFD700rgb(255,215,0)高亮、星标、会员标识奶油黄#FFF8DCrgb(255,248,220)弹窗背景、温柔提示柠檬黄#FFFACDrgb(255,250,205)笔记背景、标记底色卡其#C3B091rgb(195,176,145)柔和边框、扫描件风格棕色#A0522Drgb(160,82,45)木色风格装饰深棕#5C4033rgb(92,64,51)复古风标题、正文替代浅棕#D2B48Crgb(210,180,140)侧边栏背景、分隔区域黄颜色做背景的时候千万不要同时用白字。白色和奶油黄的对比度只有一点点特别是手机屏幕亮度调低时更明显。黄色系高亮文字至少要保证字号较大、行距较宽否则会显得像没渲染好一样。3.4 绿色系与青色系成功提示、生态感、清新背景绿色系是“安全、正确、成功”的默认语义色地图应用、数据报表、后台管理系统里都会频繁使用。青色系青绿色、湖蓝色区域则能给界面带来清凉感和通透感也很适合做渐变背景的起点。颜色名称HexRGB常见用途纯绿#008000rgb(0,128,0)状态正确、通过标识翠绿#2E8B57rgb(46,139,87)成功按钮、提交操作淡绿#98FB98rgb(152,251,152)成功提示背景、图标薄荷绿#E0FFF0rgb(224,255,240)清新面板、操作成功区域深青#008B8Brgb(0,139,139)高端商务、信息标签青色#00CED1rgb(0,206,209)活泼链接、图表系列色湖绿#00FA9Argb(0,250,154)渐变装饰色、背景点缀绿色系里的“语义区分”很重要。成功提示的背景色和前景色要拉开对比度背景用#E0FFF0这样的极浅绿前景用#0B6E4F这样的深绿而不是背景深绿前景深绿。很多时候页面看起来“土”就是语义色没拉开层次所有绿色都挤在同一亮度区间。3.5 蓝色系与紫色系科技感、品牌色、次级信息蓝色系是国家化页面的“安全色”绝大多数品牌色和信息型界面都离不开它。紫色系在数据可视化、女性用户为主的界面、创意类页面里出现的频率也很高。颜色名称HexRGB常见用途宝蓝#0000FFrgb(0,0,255)强链接、基础引导色蔚蓝#007BFFrgb(0,123,255)现代按钮默认色深天蓝#00BFFFrgb(0,191,255)登出链接、辅助操作钢蓝#4682B4rgb(70,130,180)静态信息、数据标签淡蓝#E6F2FFrgb(230,242,255)信息提示背景靛蓝#4B0082rgb(75,0,130)创意主色调紫罗兰#8A2BE2rgb(138,43,226)会员标识、VIP标签薰衣草#E6E6FArgb(230,230,250)柔和卡片背景蓝色页面里最容易犯的错误是“一蓝到底”。所有区域都用同一种蓝色界面就没有了层次感。更合适的做法是设定一个主蓝、一个深蓝用于强调和悬停、一个浅蓝用于背景再加上一个中性色进行过渡。我之前做过一个某跨平台系统的后台页面主色#007BFF、强调色#0056B3、背景切换#F0F7FF层次一下子就出来了用户反馈“界面清爽了不少”。3.6 粉色系与彩色组合点缀型的角色不可喧宾夺主粉色系作为点缀色非常好看特别是配合浅灰色和白色底。金色、银色和高饱和度彩色通常只出现在特殊场景比如徽章、VIP标识、图表中的某一根数据柱。颜色名称HexRGB常见用途粉红#FFC0CBrgb(255,192,203)促销活动、女性向界面玫瑰粉#FF69B4rgb(255,105,180)重点徽标、图标深粉#E75480rgb(231,84,128)大促标签、优惠券色蜜桃#FFE5B4rgb(255,229,180)暖系背景、提示边框金色#FFD700rgb(255,215,0)会员等级、积分奖励银色#C0C0C0rgb(192,192,192)次级图标、禁用内容铜色#B87333rgb(184,115,51)等级展示、历史记录彩色点缀有个原则页面里亮色面积占比不要超过10%。我见过最夸张的例子一个信息面板从上到下用了五种高饱和度颜色用户根本分不清哪个信息更重要。正确的做法是在主内容保持中性色底的前提下只把强彩色用在“需要用户注意”的少数元素上。4. 真正能用起来的颜色代码梳理方法从零整理一份团队色板在整理颜色代码表的实际操作中我发现最大难点不是找到那个色值而是知道“这个色值应该放在表里的哪一类、命名成什么、用在什么地方”。这里分享一套我实操过的方法论适合个人学习也适合小团队维护。4.1 第一步按语义而不是按颜色名归档网上很多色表是按颜色相分档案比如“红色系”“蓝色系”这样做只能帮你查到一种颜色的名字对选色决策帮助有限。我建议再增加一个维度按“语义”归档也就是这个颜色在页面里做什么用。举个例子语义组“Primary”品牌主色、按钮主色、链接色语义组“Success”成功提示、通过状态、正向数值语义组“Warning”警示提示、待处理状态、临界值语义组“Danger”错误、删除、失败、阻塞语义组“Neutral”背景、边框、文字、禁用态语义组“Chart”图表系列色、数据映射色。每一条记录至少包含四列语义名、Hex、RGB/HSL、使用场景说明。比如Status--Success#2E8B57成功提示图标与文字。这样整理出来的表在设计评审会上可以直接拿出来对照比甩出一堆色值让人猜不知道高到哪里去了。4.2 第二步给出每个语义色的“深/浅两档变体”实际做页面时光有基础色往往不够。按钮需要悬停色背景需要高亮色边框需要淡化色。如果每一次都临时去拉一个颜色很容易导致色调不一致。针对每一个语义色预先准备深色变体和浅色变体。具体做法很简单深色可以在原色基础上把HSL的亮度降低15%到20%浅色则把亮度提高20%到25%同时适当降低饱和度。例如基础警示红#DC143C深色变体#A31230浅色背景变体#FDE8EC。这样的三件套基础/深/浅可以应对绝大多数场景而且色相没变视觉上是一家人。做这一步时最好在HSL思路下进行微调不要靠肉眼在Hex里硬找。用代码来说类似这样的换算:root { --color-danger: #DC143C; --color-danger-dark: hsl(350, 81%, 35%); --color-danger-light: hsl(350, 86%, 92%); }悬停时用--color-danger-dark提示背景用--color-danger-light。同一语义色系的各种变体全部成对出现页面配色立刻整齐了许多。4.3 第三步写成CSS变量或设计令牌避免在页面里裸写色值颜色代码表整理得再好如果页面里还是到处stylecolor:#FF5733那这份表基本白做。把它固化成一套变量设计令牌才是关键。使用CSS自定义属性变量是最快捷的方式:root { --brand-primary: #0056B3; --brand-primary-hover: #003C7A; --bg-base: #FAFAFA; --bg-panel: #FFFFFF; --text-primary: #1A1A1A; --text-secondary: #666666; --border-normal: #E5E5E5; --status-success: #2E8B57; --status-warning: #E6A700; --status-error: #D0021B; }页面上统一引用变量好处显而易见改主题时只动:root里的几行而不是全项目全局替换团队协作时新来的同事看到var(--text-secondary)就知道这是次要文字色而不是看到一个裸的#666666还要猜它是不是某个人的特殊偏好。如果你用的是预处理器或框架例如在JavaScript代码里做主题切换原理一致把颜色定义收敛到一处即可。按我过去的经验做完这套固化之后整个项目里裸色值至少能减少九成。4.4 第四步定期审查色表清理“一次性颜色”颜色代码表不是建好就一劳永逸。项目迭代半年后重新审一遍所有用到的颜色会发现在各种临时需求里混入不少“一次性颜色”某个活动页的渐变紫、某次运营海报的背景橙、某个老模块里的深绿。这些颜色如果不在色表归档里就会成为后期维护的负担。我的方法是每季度做一次颜色审计。用脚本扫描样式文件和HTML里的所有颜色值跟色表里的变量集合比对把不在变量体系里的裸颜色统计出来。数量较少时直接修掉数量多时就开一次“字段替换会”把它们纳入中性色或语义色体系。这项工作耗时不大但能显著降低配色失控的概率。5. 高频踩坑现场与解决方案实战里最麻烦的几个问题颜色比别的编码问题特殊浏览器显示效果基本一致但有几种情况会造成严重的“看起来不对”这里把我亲自处理过的几个案例拿出来讲一讲。5.1 深浅对比度不够按钮文字看不清某后台系统之前用浅橙色#F6B0A0做按钮底色配白色文字。当时设计觉得橙色和白色很搭实际线上后手机端用户一直反馈按钮上的字看不清。原因很简单白字和浅橙背景的亮度对比度不够。换算一下浅橙背景的感知亮度大约152白色文字感知亮度是255对比度只有1.7比1左右远低于正常文本所需的4.5比1颗粒度粗的老年用户眼睛稍一疲劳就几乎看不见按钮上的字。解决方法是把按钮底色加深或者改用深色文字。我选了把按钮改深将背景调整为#D26D45白字对比度提升到4.3比1虽然还差一点点到正常标准但配合大号按钮字体实际可读性已经很不错如果要严格达标再用#B7522E对比度直接到5.2比1。从那以后所有带文字的背景色我都会先做一次亮度对比度估算。5.2 十六进制色的“位数陷阱”让人误以为颜色变了这种问题几乎每隔一阵就能碰到一次从设计稿里复制了一个#F5F5F5代码里不知道怎么被压缩成了#F5F结果页面背景从浅灰变成了洋红偏灰#F55F55与#F5F5F5完全是两回事。因为三位简写和六位完整写法的对应规则是基于“每两个相同字符压缩为一位”简写后值和原值并不相等。这类问题实际上没有太好的自动化防错手段只能立规矩项目源码里不允许出现三位简写统一使用六位格式。代码检查规则里配上强制简写就再不会溜进来了。5.3 显示器色差与印刷色差屏幕上的颜色换台机器就变了另一个高频问题不在代码本身而在“色差”。同一份颜色代码在某个屏上显得沉稳在另一个屏上却发蓝发紫。这个锅不能完全甩给代码多半是显示器和色彩配置差异造成的。常规解决办法是办公用的显示器尽量统一采购型号重要的视觉稿和评审会让大家在同一台经过基础校色的设备上看如果涉及线下印刷物料画面里不要只依赖屏幕选色要与印刷厂确认色号或CMYK值毕竟CMYK和RGB是两个色域而HTML颜色代码只能管屏幕端。5.4 颜色命名引发的语义混淆团队里曾发生过一个典型事故。色表里有两个蓝色一个叫$blue一个叫$primary-blue。某次第三方接手把原本应该用主按钮蓝的地方换成了$blue页面按钮立刻显得暗淡。排查半天发现根因就是颜色变量命名没有体现“语义用途”颜色名像“blue”这种本质上只是描述色相没有描述它应该被谁使用。改进方法就是强调“用语义命名不入颜色名”。变量取名为--btn-primary-bg、--link-color、--info-text这样无论谁读到都知道它服务的对象。我后来在代码评审时遇到新的颜色变量第一句话就问这个变量名能让人猜出它用在哪个组件上吗如果不能就改掉。6. 进阶一点扩展名颜色、渐变过渡和无障碍对比度除了手写Hex、RGB、HSL和CSS变量HTML本身还支持一类“直接用英文名描述”的预定义颜色比如tomato、steelblue、rebeccapurple。这里把它们到底怎么用、以及几个更进阶的话题一起讲清楚。6.1 浏览器内置命名颜色什么时候用什么时候不用现代浏览器内置了大约一百四十多个预定义颜色名称从black、white、red这种基础色到coral、seagreen、mediumvioletred这种已经写成名字的扩展色应有尽有。好处是非常直观读代码就像读英语句子background-color: lightcoral;一眼就明白。但实际项目里我很少直接在生产环境使用命名颜色主要原因有两个一是非基础色名称的精确色值在不同浏览器里可能存在细微差异二是命名颜色没法和团队的语义化变量体系兼容比如你不能把一个叫lightcoral的颜色轻易归类到“危险”语义里。所以折中方案是原型验证、临时调试、教学Demo用命名颜色提高效率正式代码只用颜色表里的变量。6.2 利用HSL做渐变和主题调色板不用手动计算一堆相近色HSL在处理“同一色相的一组颜色”时简直是神器。比如某个页面的图表需要五根同色系但不同深浅的柱子直接用Hex去逐个微调非常痛苦如果用HSL只要保持第一个参数不变改第二、第三个参数就行。.chart-bar-1 { background-color: hsl(210, 70%, 55%); } .chart-bar-2 { background-color: hsl(210, 70%, 65%); } .chart-bar-3 { background-color: hsl(210, 70%, 75%); } .chart-bar-4 { background-color: hsl(210, 70%, 85%); } .chart-bar-5 { background-color: hsl(210, 70%, 93%); }肉眼看上去它们就是同一蓝色的阶梯渐变不需要费劲地找五个看起来“大概一致”的Hex值。这个方法我用了很多年做数据可视化页面时效率极高而且色板统一度远胜手动挑色。6.3 无障碍视角文字与背景的对比度不是玄学有计算公式很多人不知道 WCAGWeb内容无障碍指南里对文字与背景的对比度有明确的数值要求普通文字至少 4.5:1大号文字18pt以上或14pt加粗以上可以放宽到 3:1图形和UI组件建议 3:1。计算方式是把两个颜色分别转为亮度值做一次乘除运算。我平时会先在脑海里粗略估算深色文字配浅色背景通常问题不大浅色文字配浅色背景必挂深色文字配深色背景也要小心。复杂拿不准的颜色可以借助浏览器的开发工具。比如Chrome DevTools里选中一个元素如果文字颜色和背景颜色对比度不足样式面板会直接给出红色警告提示。用久了之后你会发现“选色不踩对比度坑”是件能训练出来的直觉。6.4 从一个“看起来还行”的颜色代码表到真正属于你的主题库最后分享一下“把色表变成主题库”的心路历程。当初我只是为那个老站点整理了一张速查表用着用着发现只靠一张静态表没法根治配色混乱。于是先把它转成团队的CSS变量体系再按语义分档给每个语义配好基础、深、浅三件套最后又套进了一个简单的在线文档每遇到一个好看又合理的搭配就补充进去同时标注用途和场景。真正哪天需要换主题其实只需替换:root里那几个变量。前端项目里最常见的“从蓝变橙”需求实际操作就是把品牌色变量改掉其余位置全部自动跟随。这么一套下来颜色代码表才真正从“备忘”变成了“工程资产”。在很多项目里颜色是最容易“看起来差不多就行”的环节但往往就是这一个个“差不多”把页面的质感和可维护性一点点拖垮。别怕麻烦把色值梳理成体系花不了几小时带来的效果却能在之后每次改需求、每次评审、每次团队交接时持续兑现。