CSS颜色代码全解析：从HEX到HSL，一份能落地的颜色对照表

我平时做项目评审十次有八次都在跟颜色较劲。设计稿里写了一个“雾霾蓝”开发同学打开取色器在PS里点了半天最后拿到的十六进制和设计标注差了2个值整个页面的层次感就变了。更麻烦的是凌晨临时调页面设计不在线只能凭感觉在颜色面板里瞎拖。后来我给自己立了个规矩把CSS颜色代码整理成一张自己的颜色对照表高频色值、标准命名颜色、现代颜色函数全部收进去。这篇文章就是我整理的结果从颜色代码的几种写法到怎么用对照表做项目配色再到实际开发里那些跟颜色有关的坑一次讲透。1. 颜色对照表不是“字典”是项目和团队的通用语言1.1 为什么手工维护一张颜色表比随时打开取色器更靠谱在HTML和CSS刚出现的年代给文字上色基本靠color: red;或者color: #ff0000;设计师和前端之间的沟通成本很低。现在不一样了设计系统越来越复杂同一个主色要派生出悬停色、按压色、禁用色、浅背景色如果每个人取色的习惯不同页面就会出现肉眼可见的色偏。我自己维护颜色表的习惯是从一次重构开始的。那时候项目里有几十个页面光蓝色系就出现了七八种看起来差不多的值#1890ff、#1e90ff、#0d6efd混在一起。后来我把全站涉及到的所有颜色全部抓出来按“用途色系”重新归档再统一替换成CSS变量问题才真正解决。所以我说颜色对照表不只是一个参考工具它更像项目里的通用语言——大家说“主蓝”的时候都知道它等于#2563eb。1.2 一张合格的颜色对照表应该包含哪些字段很多人从网上复制的“CSS颜色对照表”只有一个色块和十六进制值用来临时查可以但放进项目维护就远远不够。我自己的表格至少包含五列颜色名称或语义名称、十六进制值、RGB值、HSL值、适用场景。语义名称HEXRGBHSL常见用途主品牌色#2563ebrgb(37, 99, 235)hsl(221, 83%, 53%)按钮、链接、导航成功色#16a34argb(22, 163, 74)hsl(142, 76%, 36%)成功提示、通过状态警告色#f59e0brgb(245, 158, 11)hsl(38, 92%, 50%)待办、风险提示危险色#dc2626rgb(220, 38, 38)hsl(0, 72%, 51%)删除、失败提示信息色#0891b2rgb(8, 145, 178)hsl(192, 91%, 36%)信息提示、帮助为什么要把RGB和HSL都写上因为十六进制适合“复制粘贴”RGB适合在透明度变化时做调整HSL则能让你很直观地理解颜色之间的关系。比如你想把主色变浅一点不必去猜HEX的每一位怎么改只需要把HSL里的L亮度拉高就能得到一组合理的浅色变体。这张表平时不一定全部记住但当你需要做悬停色、阴影、渐变的时候参照它可以少走很多弯路。2. 浏览器内置的标准颜色名从red到rebeccapurple怎么用才不会翻车2.1 常用标准颜色名速览CSS规范里有一批可以直接通过英文名引用的标准颜色现代浏览器基本都支持。很多人觉得这些颜色名“不够专业”但我觉得它们是颜色对照表最好的入口尤其在做原型、写Demo、临时调试样式时用颜色名比写一长串十六进制快得多。我按色系整理了一批出现频率最高的标准颜色名包含对应的HEX和RGB你完全可以把它们当作速查表用。颜色名十六进制RGB直观印象black#000000rgb(0, 0, 0)纯黑white#ffffffrgb(255, 255, 255)纯白gray#808080rgb(128, 128, 128)标准灰silver#c0c0c0rgb(192, 192, 192)浅银灰red#ff0000rgb(255, 0, 0)纯红orange#ffa500rgb(255, 165, 0)橙色goldenrod#daa520rgb(218, 165, 32)金菊黄yellow#ffff00rgb(255, 255, 0)正黄green#008000rgb(0, 128, 0)正绿lime#00ff00rgb(0, 255, 0)荧光绿cyan#00ffffrgb(0, 255, 255)青色teal#008080rgb(0, 128, 128)蓝绿blue#0000ffrgb(0, 0, 255)正蓝navy#000080rgb(0, 0, 128)藏蓝purple#800080rgb(128, 0, 128)紫色magenta#ff00ffrgb(255, 0, 255)品红pink#ffc0cbrgb(255, 192, 203)浅粉brown#a52a2argb(165, 42, 42)棕色实际使用颜色名的时候大小写不敏感Red、red、RED三种写法效果完全一样。不过我不建议在正式项目里大量使用这些裸颜色名原因后面讲透明度时会提到——颜色名只能表示固定值你不能直接给red加透明度必须先转成rgba或使用color-mix这就会增加不必要的转换成本。2.2 那些看着像、实际有坑的颜色名除了常规颜色CSS标准里还有一批容易让人困惑的颜色名最常见的就是灰色系列和rebeccapurple。gray和grey在CSS里其实是同一个颜色都是#808080。darkgray和darkgrey也都是#a9a9a9。但请注意从颜色名看darkgray似乎应该是深灰实际上它的亮度比gray还要浅一点。silver看起来像银灰色数值是#c0c0c0比lightgray#d3d3d3更深。这种反直觉的命名很容易让新手在写样式时拿错色值但如果你的颜色对照表里把这些同名同义、反直觉的数值都列出来就能避免反复试错。rebeccapurple这个颜色值等于#663399从2014年起被纳入CSS Color Level 4规范现代浏览器都支持。虽然它很少直接出现在业务项目中但如果你在维护开发者文档、个人博客用它做强调色会显得很有味道。还有一类特殊的关键字严格来说不是颜色名但你必须知道transparent表示完全透明在很多浏览器里实际等于rgba(0, 0, 0, 0)currentColor表示继承最近一次设置的color值它是一个会“跟着上下文走”的颜色。这两个值在处理边框、分割线、图标颜色时非常有用。3. 从#FFFFFF到oklch颜色代码的几种写法分别该怎么选3.1 四种主流写法的字段对照CSS里表示颜色至少有四种主流写法十六进制HEX、RGB/RGBA、HSL/HSLA、以及现代CSS里的相对颜色语法和oklch。我先把它们的字段和特点放在一起对比写法示例是否支持透明度记忆难度适合场景HEX十六进制#ff8800第9位和第10位做alpha中设计稿取色、静态页面RGB/RGBArgb(255 136 0 / 50%)支持空格语法加斜杠alpha中需要微调透明度的元素HSL/HSLAhsl(32 100% 50% / 50%)支持低派生色、调色板现代颜色函数oklch(0.7 0.15 45)支持高设计系统、渐进增强以橙色为例#ff8800、rgb(255 136 0)、hsl(32 100% 50%)写出来是同一个颜色。但它们表达颜色的方式完全不同HEX是把红绿蓝三个通道用十六进制数直接堆在一起好处是紧凑坏处是没法一眼看出颜色之间的明暗关系RGB把三个通道拆开肉眼依然很难算出一个颜色变浅该改哪个数HSL则把颜色拆成色相、饱和度、亮度三个维度修改起来非常直观。现代CSS又加入了oklch/oklab这类感知均匀的颜色空间它的最大优势是在同一个L亮度值下不同颜色的视觉明暗更接近。这让我们在做颜色变量、深浅色切换时可以得到更一致的结果。需要提醒的是oklch的浏览器兼容性现在还比不上HEX和RGB生产环境使用时要评估目标用户设备通常我会把它作为渐进增强的一部分或者先用构建工具转换后再上线。3.2 透明度写在颜色里还是写在元素的opacity上这是颜色代码里最容易搞混的点。很多人想让背景“半透明”第一反应是给元素加opacity: 0.5结果发现里面的文字也跟着变淡了。原因很简单opacity作用于整个元素包括它内部的所有子节点而颜色的alpha通道只作用于当前元素的背景、边框或文字本身。/* 这样写整个弹窗包括文字都会变透明 */ .modal { background: #fff; opacity: 0.8; } /* 这样写只有背景透明文字依然是纯色 */ .modal { background: rgba(255, 255, 255, 0.8); color: #111; }这两种方式适用场景完全不同。如果你要做一个毛玻璃效果的遮罩层通常用第二种配合backdrop-filter: blur()能做出非常高级的半透明背景如果你要做一个整体淡入淡出的动画那才应该用opacity。我见过太多开发者在给分割线、表格斑马纹加透明效果时选错方案最后产品验收时文字看不清才回来排查。3.3 为什么我建议用HSL生成“色板”而不是凭感觉改HEX做按钮悬停效果时最常见的需求是“背景色变深一点”。用HEX表示时很多人会从记忆里掏出#1890ff然后把最后两位改成e6得到#1890e6这其实已经偏了。更简单的做法是把主色转成HSL然后只降低明度。:root { --primary: hsl(221, 83%, 53%); /* #2563eb */ --primary-hover: hsl(221, 83%, 45%); --primary-active: hsl(221, 83%, 38%); }这样做的好处是H色相和S饱和度保持不变只有L在变化整组颜色看起来就是同一个色系从亮到暗的演变不会出现偏绿或偏红的情况。这个思路也可以用来做背景色深浅变体、文字色、边框色。说白了HSL就是一把能够精确控制颜色明暗和鲜艳度的尺子适合用来“调色”HEX则更适合用来“存档”。我自己的颜色对照表里同时保留两种表达式就是为了既能交流又能快速派生出新颜色。4. 把颜色对照表变成一套能落地的配色方案4.1 从任意主色出发快速搭出同色系和对比色拿到一张颜色对照表不等于就有了配色方案。真正项目里需要的是“以某一个主色为核心的一组颜色”。我常用的方法非常简单先确定主色然后围绕这个主色生成同色系变体、中性色和强调色。举个例子假设主色是hsl(210, 90%, 50%)也就是一个比较标准的蓝色。同色系变体可以通过改变L值得到hsl(210, 90%, 40%)用于悬停hsl(210, 90%, 60%)用于高亮hsl(210, 90%, 95%)用于浅色背景。对比色可以在色相环上找到主色相对的方向用hsl(30, 90%, 50%)这种橙色来作为行动按钮的强调色。中性色就更容易了直接用黑、白、灰三种颜色的梯度变化不要在里面掺入其他色相这样页面整体会比较干净。很多团队把这一步交给设计系统自动完成比如用ColorBrewer或Ant Design的色板生成工具但基础原理都是HSL空间里的调整。理解了这一点你再去看那些“推荐颜色搭配”就不会觉得它们是一堆巧合了。4.2 语义化颜色变量让颜色表在代码里真正被复用颜色对照表整理得再好如果代码里到处都是#2563eb那这张表也只是个装饰。我建议项目从第一天起就把颜色定义成CSS自定义属性并用语义化名字命名。:root { --color-primary: #2563eb; --color-primary-hover: #1d4ed8; --color-primary-active: #1e40af; --color-primary-bg: #eff6ff; --color-success: #16a34a; --color-warning: #f59e0b; --color-danger: #dc2626; --color-info: #0891b2; --color-text-primary: #1f2937; --color-text-secondary: #6b7280; --color-text-disabled: #9ca3af; --color-border: #e5e7eb; --color-fill: #f9fafb; }这样定义之后给按钮写悬停效果就非常直观.btn-primary { background-color: var(--color-primary); transition: background-color 0.2s ease; } .btn-primary:hover { background-color: var(--color-primary-hover); }这份变量本质上就是你的颜色对照表只不过从文档搬进了代码。设计改版时只需要动--color-primary那一行全站按钮、链接、选中等状态就会同步更新。这里有一个细节命名尽量按“语义”而不是“颜色”比如用--color-success而不要用--color-green因为同一套色系在不同产品里可能代表不同含义语义化命名才能让维护者不用去猜。4.3 文字、背景、边框……颜色在不同CSS属性里的配合颜色不是孤立存在的。同一个色值放在color、background-color、border-color、box-shadow里给人的视觉感受完全不同。我平时检查页面时会刻意把同一个按钮的三种状态放在一起看默认态的边框色、悬停态的背景色、按下态的阴影色是否是一个色系的渐变。一个简单组合用主色做按钮背景用主色的深色变体做悬停色配上浅色背景做整个页面的底色再用中性色做文字和边框。如果你想让某个卡片有层次感可以给它的box-shadow用半透明的深色而不是直接上黑灰色.card { background: #fff; border: 1px solid #e5e7eb; box-shadow: 0 4px 12px rgba(17, 24, 39, 0.08); }这种半透明阴影实际上也遵循了颜色对照表的逻辑黑、白、灰不是只能用纯黑纯白用rgba拆开透明度之后它能在不显得脏的前提下给元素增加立体感。类似的技巧在文字外描边、渐变背景、涟漪光圈扩散动画里都很常见先把基础颜色定义好再通过透明度或HSL调整去衍生层次而不是每次都新建一个看起来差不多的新色值。5. 实际开发里和颜色有关的几个坑我的排查经验5.1 颜色名裸用导致透明度没法控制前面提过color: red;这行代码在浏览器里没有任何问题但如果你紧接着想给这个红色加透明度就会发现标准颜色名没有带alpha通道的写法。你只能把red手动转换成#ff0000再写成rgba(255, 0, 0, 0.6)。这个转换过程浪费不了多少时间但在项目里大量出现时很容易出现“同一个红有的地方rgba(255,0,0,.6)有的地方#ff000099还有的地方直接用hsl(0 100% 50% / 60%)”的混乱。所以我建议原始色值可以存在变量里使用处一律通过变量引用而不是到处裸写颜色常量。5.2 颜色名里的同义词和视觉歧义我们写color: gray和color: grey得到的都是#808080这是规范规定的同义词。但浏览器对lightgray、lightgrey、darkgray、darkgrey的支持也完全相同。这里的坑在于很多中文设计师习惯把“灰色”理解为比较浅的灰但CSS里gray默认是中等灰如果你直接用在浅色背景上对比度可能不够导致文字看起来很吃力。所以我建议在正式项目里文字灰不要直接用标准命名颜色而是要自己定义变量例如--color-text-secondary: #6b7280既保证了对比度又不会受颜色名歧义干扰。5.3 透明度叠加后颜色“脏了”还有一次我发现一个弹窗的遮罩层在深色图片上效果正常放到浅色页面背景上就变得很脏。排查半天发现问题出在叠加方式遮罩层用的是rgba(0, 0, 0, 0.4)这本身没问题但弹窗本身又套了一层半透明白色背景。两层透明度叠加之后底层颜色透上来的方式跟设计预期完全不同最终看到的是偏灰的混合色而不是单纯变暗。处理这类问题时我建议把颜色叠加当成“数学题”来算透明度的叠加是乘法的关系不是简单的相加。与其反复在浏览器里调不如先在颜色对照表上标清楚每一层的目标色再决定是用rgba、mix-blend-mode还是color-mix来实现。5.4 深色模式适配没考虑对比度现在不少产品都会适配深色模式最容易翻车的颜色坑是直接把浅色模式下的文字色变量换成白色结果在深色背景上对比度反而刺眼或者把背景换成纯黑然后又给卡片加了带透明度的白色阴影看起来像贴了块灰膏药。我个人建议深色模式不要用纯黑#000000而是用#1a1a1a、#111827这类带一点点暖色或冷色的深灰再配合prefers-color-scheme: dark做切换。media (prefers-color-scheme: dark) { :root { --color-bg: #111827; --color-card: #1f2937; --color-text-primary: #f9fafb; --color-border: #374151; } }切换之后别忘了检查白色文字和浅色背景的组合对比度是否达到WCAG要求。颜色对照表里如果只存HEX是看不出对比度的建议在表格中补充一组“深色模式替代值”或者直接给变量设置整套深浅两套映射避免上线前临时补样式。5.5 打印页面时背景色消失这是一个很不起眼但经常被忽略的问题。当用户按下CtrlP打印页面、或者导出PDF时很多浏览器的默认设置会去掉背景颜色只保留文字和边框。于是页面上用来做重点高亮的黄色背景、状态标签的绿色背景打印出来全部变成了白底黑字信息层级完全丢失。解决方法是在打印样式中显式开启颜色打印media print { * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }这样设置之后背景色和边框色才会被完整输出。虽然这个属性不属于CSS颜色代码本身但它和颜色在真实场景中的呈现强相关属于你维护颜色对照表时应当考虑的“最后一公里”。6. 一张可以直接抄作业的CSS颜色速查表6.1 高频开发用的颜色速查最后我把自己在实际项目中出镜率最高的颜色整理成一份速查表。它跟标准颜色名不一样更多是按“业务用途”整理的适合直接放进你的CSS变量文件里。用途推荐色值说明页面背景#f9fafb带一点灰的白色比纯白柔和卡片背景#ffffff纯白适合在浅灰底上突出层级主文本#1f2937深灰黑对比度足够又不刺眼次要文本#6b7280中等灰适合注释、辅助说明占位文本#9ca3af浅灰用于输入框placeholder分割线#e5e7eb极浅灰边框、分割线常用主按钮#2563eb蓝色行动力强成功提示#16a34a绿色代表完成和通过警告提示#f59e0b黄色系提醒注意错误提示#dc2626红色代表失败和删除信息提示#0891b2青色中性信息表格里的值都来自我日常项目里验证过比较舒服的组合但千万不要把它当成唯一标准。比如深色模式下页面背景可能要换成#111827卡片背景换成#1f2937文本和边框也要整体调节。所以速查表最重要的价值不是某一组具体色值而是它展示了一套颜色组织方式背景、文字、边框、状态四类颜色分开管理互不污染。6.2 如何把这个速查表变成你项目的初始颜色令牌拿到速查表后下一步是把它落成一个可以在项目里直接使用的颜色令牌文件。以最基础的CSS为例可以写一个tokens.css:root { --bg-page: #ffffff; --bg-subtle: #f9fafb; --bg-card: #ffffff; --text-primary: #1f2937; --text-secondary: #6b7280; --text-placeholder: #9ca3af; --border-default: #e5e7eb; --border-strong: #d1d5db; --brand-primary: #2563eb; --brand-hover: #1d4ed8; --brand-active: #1e40af; --status-success: #16a34a; --status-warning: #f59e0b; --status-danger: #dc2626; --status-info: #0891b2; }如果项目使用Less或Sass也可以把同样的内容定义为变量在需要做颜色计算时用HSL函数生成新色值。这样以后不管是写表格样式、导航栏、tab控件还是动画效果只要引用变量全站的色彩就能保持一致。我见过很多“三行模式的CSS文件”也能正常工作但一旦业务复杂起来没有颜色令牌的CSS维护成本会成倍上升。6.3 最后分享一个我个人的小习惯我从这几年维护颜色表里学到的最大一件事不是把色值背得多熟而是养成“先定义关系再填具体值”的习惯。拿到设计稿我第一反应不是找某个选择器填background-color而是先问这个颜色属于哪一类是品牌色、中性色还是状态色它和主色之间的明暗关系是什么想清楚之后再去颜色对照表里找对应的语义变量填入样式。这样做还有个额外好处跟设计师沟通时你可以直接说“昨天你给我的主色我已经把悬停、按下、浅底三个变体都生成好了”然后快速用HSL或调色工具算出来对方看到的效果往往比你每次手动截一个色块要准确得多。时间久了这份表会越长越像你自己项目的“设计语言”而不只是一张从网上复制粘贴的静态图片。最后再说一个细节无论你是用在线调色工具还是浏览器开发者工具取色一定要注意当前显示器是否有色彩管理尤其是做给客户演示的页面不同屏幕下同一个色值看起来会差不少。颜色对照表能保证的是代码层面的准确性最终肉眼看到的均匀性还要靠测试阶段的跨设备检查来兜底。希望这张表能让你在写CSS的时候少一点“猜”多一点“定”。