HTML颜色代码表这东西看着像是给新手准备的基础资料但我做了这么多年前端和视觉相关的工作说实话直到现在写样式的时候还是会来来回回到处找某个颜色的具体值。不是记不住是颜色这玩意儿太微妙了——同样一个浅蓝不同显示器、不同系统、不同格式下给人的感觉完全不一样。所以整理一份靠谱的颜色代码参考绝对不是整理一份背下来就完事的清单而是要把颜色背后的表示原理、转换逻辑和踩坑记录都梳理清楚才能真正在项目里用起来不慌。这篇文章我打算从颜色代码的几种写法讲起再把常用的色系速查表整理出来接着把HEX、RGB、HSL之间的换算原理拆开说最后聊一些我自己实际开发中积累的工具用法和排查经验。不管你是刚学HTML的初学者还是已经写了几年样式但从来没深究过颜色格式的老手这里面都有能直接拿走用的东西。1. 颜色代码基础四种主流格式一次讲透1.1 HEX十六进制最长见也最容易写错HEX格式大概是大家在代码里见得最多的长这样#3498db。它本质上是把RGB三个通道的值分别转成十六进制然后并排写在一起。前面那个井号只是标记告诉解析器后面是一串十六进制颜色井号本身不携带任何颜色信息。一个标准的六位HEX颜色结构是#RRGGBB其中RR是红色通道GG是绿色通道BB是蓝色通道。每个通道的取值范围是十进制的0到255对应十六进制的00到FF。这里有个新手特别容易跳进去的坑#FF0000是纯红色没错但如果你只写三位比如#F00浏览器也能认它会自动把每一位翻一倍解析成#FF0000。这种简写形式只适合每个通道的两位十六进制完全一样的情况比如#AABBCC可以简写成#ABC但#A1B2C3就不能简写一定得完整写六位。我见过不少人在#FFF和#F0F0F0之间反复横跳其实这俩完全是两种颜色一个是纯白一个是浅灰。另外从某个版本开始HEX还支持八位写法也就是#RRGGBBAA最后的AA表示alpha透明度。比如#00000080就是50%透明度的纯黑。不过这个写法的兼容性历史上有点波折建议如果是面向全平台的项目透明度还是优先用rgba()更稳妥。1.2 RGB与RGBA面向物理设备的表达RGB格式写成rgb(52, 152, 219)三个参数就是十进制形式的红绿蓝通道值。它的好处是直观因为很多图片处理软件里看到的取值就是0到255的十进制数字直接从设计稿里搬过来就能用。RGBA则在RGB基础上加了一个透明度参数取值范围是0到1的小数比如rgba(52, 152, 219, 0.6)表示60%不透明度的蓝色。在我个人的使用习惯里颜色比较简单的场景用RGB问题不大但只要涉及和不透明背景叠加的效果我几乎不用RGBA而是先算出最终应该呈现的颜色再写成不透明色。为什么这么做因为RGBA的透明效果是当时叠在某个背景上的效果一旦页面结构调整、背景色变化同一个RGBA值在不同位置上看起来会出现明显的色差。后期维护的时候排查这种颜色不一致的问题特别痛苦远不如一开始就锁定一个不透明的HEX值干净。1.3 HSL与HSLA符合人类直觉的颜色描述HSL可能是被大家低估的一种格式。它把颜色拆成色相Hue、饱和度Saturation、亮度Lightness三个维度写成hsl(210, 76%, 53%)这种形式。理解HSL有个很取巧的办法想象一个色轮色相就是你在色轮上转到的角度位置0度是红色120度是绿色240度是蓝色。饱和度是颜色的鲜艳程度0%就是完全灰掉100%就是最鲜艳。亮度是颜色的明暗程度0%是纯黑100%是纯白50%是正常亮度。我为什么说HSL符合人类直觉因为在设计配色方案的时候把主色调稍微变暗一点降低一点鲜艳度这种需求用HEX根本没法直观地操作你得知道颜色空间里的变换规则。而用HSL直接把亮度从60%调到50%或者把饱和度从70%降到50%颜色就会按照你预期的方向平滑变化。做单色系配色方案时HSL的效率是其他格式的好几倍。HSLA就是在HSL后加透明度参数用法和RGBA一致比如hsla(210, 76%, 53%, 0.5)。1.4 颜色关键字代码可读性的好帮手除了上面三种格式CSS还定义了140多个命名的颜色关键字比如red、white、aliceblue、rebeccapurple这种不用记忆任何数值就能用。这里有一个我实际开发中总结的习惯在业务代码里基础颜色用关键字是可以接受的但稍微自定义一点的颜色就算你想用white来表示我也会建议至少写#FFF甚至完整的#FFFFFF。原因很简单——代码在传输、压缩、转译过程中没有人能保证关键字不会被某些激进的构建策略错误处理而且HEX在压缩后的体积上也优于关键字。不过如果是写CSS变量定义的基础色调用关键字反而能提升可读性这个后面第四部分展开说。2. 常用颜色分类速查直接复制就能用的对照表2.1 暖色系红、橙、黄有温度的颜色这个色系是整个Web里用得最密集的区域从按钮的高亮到错误提示基本都绕不开。我按自己在项目里使用的频率整理了下面这张表。颜色名称HEXRGB适用场景纯红#FF0000rgb(255, 0, 0)强警示、紧急状态朱红#FF4D4Frgb(255, 77, 79)错误提示、删除按钮橙色#FF8C00rgb(255, 140, 0)中等提醒、暖色强调琥珀#FFC107rgb(255, 193, 7)评分星标、特别标注金黄#FFD700rgb(255, 215, 0)会员标识、金币类资产黄昏橙#FF6A00rgb(255, 106, 0)促销氛围、食欲类场景暖色的一个使用心得是尽量不要在纯白背景上使用高饱和度的纯红大范围铺底视觉冲击力过于强。更推荐的做法是用低亮度的红作为大面积背景用高饱和度的红作为点缀。比如很多数据可视化的危险状态用的其实不是纯红而是#C62828这类偏深的红文字白放在上面对比度才足够。2.2 冷色系蓝、青、绿克制又专业的底色冷色系几乎是B端产品、后台系统和科技类页面的底色担当。它的好处是视觉情绪稳定、不容易疲劳配合白色背景能营造出清晰的层级感。颜色名称HEXRGB适用场景皇家蓝#4169E1rgb(65, 105, 225)主按钮、链接色道奇蓝#1E90FFrgb(30, 144, 255)信息提示、高亮青绿#00CED1rgb(0, 206, 209)科技感点缀翡翠绿#00C853rgb(0, 200, 83)成功状态、通过提示薄荷绿#98FB98rgb(152, 251, 152)健康类、自然类背景深青#008B8Brgb(0, 139, 139)深色模式下的强调色我自己做后台系统时有一个默认习惯主按钮用#1677FF这类偏亮但不过分刺眼的蓝成功色用#00B42A级别的绿警示色用#FF9F0A。这种搭配在绝大多数屏幕上都有不错的辨识度而且遇到色盲用户时蓝色和绿色的区分度也足够。如果只是个人项目或者学习用的Demo直接用上面表格里的道奇蓝和翡翠绿也完全够看。2.3 中性色系灰、米、棕、黑搭建视觉层级的骨架很多人做页面时把注意力全放在主题色上结果背景、边框、文字这些中性色随便选最后页面层次一塌糊涂。中性色系才是最考验功力的地方。一套好的中性色能让内容自己呼吸起来。颜色名称HEXRGB适用场景纯黑#000000rgb(0, 0, 0)极少数用作文字色碳黑#24292Ergb(36, 41, 46)绝大多数场景下的标题文字墨灰#57606Argb(87, 96, 106)次要文字、辅助说明雾灰#8B949Ergb(139, 148, 158)占位文字、禁用文字边框灰#D0D7DErgb(208, 215, 222)分割线、输入框边界近白#F6F8FArgb(246, 248, 250)页面背景、卡片底色暖米#FDF6ECrgb(253, 246, 236)温馨类页面背景棕褐#8B4513rgb(139, 69, 19)复古风格、木质质感关于中性色我有个自己的小规则正文文字不要用纯黑纯黑在白色背景上对比度其实过高看久了会有点刺眼。碳黑#24292E是我个人最喜欢的文字色它比纯黑柔和但又不发灰。页面背景也别直接用纯白尤其大面积阅读场景近白#F6F8FA会让眼睛舒服得多。2.4 紫色与粉色系从气质到功能都不能小看紫色系这几年在Web设计里地位陡增主要原因是很多年轻化、潮流化产品靠紫色系拉开差异化。粉色系则从传统女性化标签变成了很多可爱风和年轻化产品的首选。颜色名称HEXRGB适用场景紫罗兰#8A2BE2rgb(138, 43, 226)会员体系、个性标签靛蓝#4B0082rgb(75, 0, 130)深色底、神秘氛围紫红#C71585rgb(199, 21, 133)时尚类点缀薰衣草#E6E6FArgb(230, 230, 250)轻盈背景色淡粉#FFC0CBrgb(255, 192, 203)柔和背景、节日氛围樱花粉#FFB7C5rgb(255, 183, 197)年轻化品牌主色用紫色系有一个坑要提醒紫色的认知亮度比它的数值亮度要低同样是#8A2BE2这种紫色看起来就比同亮度的蓝色要暗。所以紫色作为大面积背景时一定要把亮度值调高一点比如用薰衣草色而不是紫罗兰色作为文字色时要适当提高亮度否则在白底上识别度很差。粉色系则要注意别用得过于甜腻大面积使用的时候建议降低饱和度或者掺一点灰进去质感会立刻不一样。3. 颜色转换的原理为什么你能算出两种格式之间的对应关系3.1 HEX转RGB十六进制拆解的原始逻辑HEX转RGB是最基础也是最重要的一个转换。以#34A853为例三步就搞定。第一步去掉井号剩下34A853。第二步从前往后两两分组34、A8、53分别对应红、绿、蓝。第三步把每一组十六进制数转成十进制。这里有个换算规则十六进制里从右往左数第一位是个位第二位是16位A代表10B代表11C代表12D代表13E代表14F代表15。所以34计算过程是3乘以16得48加上4的个位等于52。A8就是10乘以16得160加8得168。53就是5乘以16得80加3得83。最终结果就是rgb(52, 168, 83)。想知道自己转换得对不对其实有个土办法任何通道如果是相同的十六进制对比如AA那它的十进制值就是17乘以对应的个位值。FF就是255CC就是20488就是13633就是51。这些常用值多遇几次就能记住了。3.2 RGB转HEX反向操作的思路从rgb(52, 168, 83)转回HEX就是把每个255进制的值转成十六进制。核心算法是用这个值除以16商作为高位余数作为低位。红色通道52除以16商是3余数是4所以是34。绿色通道168除以16商是10余数是810对应的十六进制是A所以是A8。蓝色通道83除以16商是5余数是3所以是53。合起来就是#34A853。如果某个通道的十进制值小于16比如10转换成十六进制就是0A因为商是0余数是10。这一步非常容易漏掉左边补0的操作我见过太多人把#0A0B0C写成了#ABC结果颜色完全变了。3.3 从RGB到HSL计算过程可手工验证RGB到HSL的换算比HEX和RGB之间麻烦一些因为要先把0到255的通道值归一化到0到1的小数。以一个具体例子演示rgb(52, 168, 83)。第一步三个值分别除以255得到R0.204G0.659B0.325。第二步找出这三个数里的最大值和最小值。最大值是0.659最小值是0.204。第三步亮度L就是最大值与最小值的平均数(0.6590.204)÷20.4315对应43%左右。第四步计算饱和度S。因为最大值不等于最小值所以颜色不是灰色需要按亮度区分公式。如果L小于0.5S(max−min)÷(maxmin)如果L大于等于0.5S(max−min)÷(2−max−min)。这个例子里L≈0.43所以S(0.659−0.204)÷(0.6590.204)0.455÷0.863≈0.527对应53%左右。第五步是色相H。因为最大通道是绿色H的公式基准是60度乘以2加上一个修正项(H60×2(B−R)/(max−min)) 120(0.325−0.204)÷0.455×60 12015.96≈136度。所以rgb(52, 168, 83)大致可以写成hsl(136, 53%, 43%)。我建议你在浏览器开发者工具里验证一下因为这个过程自己手工推导一遍对颜色空间的理解会彻底不一样。3.4 对比度计算与无障碍选色标准关于颜色搭配平面设计里讲究美观Web开发里还要讲究能看清。Web内容无障碍指南里对文字和背景的对比度有一个明确的最低要求普通文字要至少4.5:1大号文字18px以上或14px以上加粗可以放宽到3:1。对比度的计算基于一个相对亮度公式。每个通道先归一化然后根据一个伽马校正公式变换最后按0.2126倍红、0.7152倍绿、0.0722倍蓝加权合成。这个公式我没法在这里完整展开但结论很明确你要判断两个颜色是否能配在一起不能只看看起来深不深必须按公式计算。实际项目里我不建议手工算推荐的做法是直接用浏览器开发者工具里内置的对比度检查功能或者一些在线无障碍检查工具。不过有一个经验性的近似规则大段的正文文字如果背景是白色文字色尽量用#444444或者更深如果背景是浅灰文字色就要用接近黑的墨色。很多页面用浅灰背景配纯白文字这种组合的对比度往往只有2:1左右完全不合格。4. 生产环境中的取色与组织从拿到设计稿到维护一套配色系统4.1 从设计稿精确取色的完整流程设计师交付的稿子格式通常是图片或者设计软件的源文件前端工程师要拿到精确的颜色值流程看起来简单但有几个细节容易被忽略。第一步确认设计稿是标准sRGB色彩空间导出。如果设计师用了广色域显示器和P3色彩空间同一个HEX值在不同屏幕上表现会有轻微差异所以尽可能要求设计师导出Web版本。第二步打开设计软件用取色工具点击要取色的区域直接读取十六进制值。如果是图片里的颜色也可以把图片放大到400%然后取色这样能避开边缘的抗锯齿像素。第三步在浏览器里验证。把HEX值填到开发工具里和设计稿截图对比这一步很关键。很多设计师标注的颜色值在渲染时会被浏览器的色彩管理修正尤其是红色和橙色系直接用过标注值会出现肉眼可感知的偏差。第四步是处理透明叠加。如果设计稿里的颜色是半透明盖在复杂背景上我强烈建议你问设计师要到底层是什么颜色然后直接用不透明HEX值把最终效果烘焙出来而不是用RGBA去还原。原因我在第一部分说过透明色在不同背景下不可控。4.2 用CSS变量管理一套可维护的配色体系写样式的时候颜色最忌讳的就是满天星——这个页面一个#1890FF那个组件一个#108EE9看起来都是蓝但细看又不一样。长期的解决思路只有一个把所有颜色抽成CSS自定义属性也就是CSS变量。我在项目里的组织方式大概是这样先把全站的色板分成品牌色功能色中性色三大类然后在大类下按数值阶梯命名。:root { /* 品牌色阶梯 */ --brand-1: #E6F4FF; --brand-2: #BAE0FF; --brand-5: #1677FF; --brand-7: #0958D9; /* 功能色 */ --success-color: #00B42A; --warning-color: #FF9F0A; --error-color: #F53F3F; /* 中性色 */ --text-primary: #1D2129; --text-secondary: #4E5969; --text-disabled: #86909C; --border-color: #E5E6EB; --fill-color: #F7F8FA; }为什么要用数字标阶梯而不是用含义命名因为同一个品牌色在按钮、边框、背景、悬停状态下需要不同的深浅层次。用--brand-1到--brand-9这种数字阶梯组件需要主按钮色就用--brand-5需要鼠标悬停更深一点就用--brand-6后续设计师调整主色时只需要改--brand-5一个变量整个站所有深浅变化都跟着走这种效率是单个色值满天飞不能比的。4.3 暗色模式下颜色代码的适配思路暗色模式现在是很多项目的标配但它不是简单地把背景换成黑色、把文字换成白色就完事。我自己踩过几次坑之后总结出了一个比较省事的做法不直接为暗色模式定义一套全新的HEX值而是用HSL来微调。比如亮色模式下页面背景是#FFFFFF文字是#1D2129。到暗色模式时背景的HSL亮度从100%降到10%文字的HSL亮度从13%升到85%。这样做的好处是色相和饱和度保持同一套逻辑只有亮度维度发生翻转视觉上品牌感会被完整保留。如果项目用的是CSS变量暗色模式适配会非常优雅。直接在媒体查询里覆盖变量值就行:root { --bg-color: #FFFFFF; --text-color: #1D2129; } media (prefers-color-scheme: dark) { :root { --bg-color: #141414; --text-color: #E5E6EB; } }组件代码里全部引用变量不需要任何一处单独的暗色判断逻辑。这里有个小技巧暗色模式下的边框色不要用纯灰纯灰在黑色背景上会显得很死板。稍微带一点蓝色倾向的灰比如#303030在视觉上会比#666666和谐很多。5. 常见颜色问题与排查经验我在项目里踩过的坑5.1 显示器色差与色彩管理有一次我在公司显示器上调试一个页面橙色饱和度怎么调都差口气预览到自己笔记本上反而觉得还行。后来才发现问题出在系统的色彩配置上——Windows系统默认的sRGB校准和macOS的默认显示效果差异很大而且不少Windows笔记本出厂色域没有校准同一张图在不同机器上完全是两个样。前端这边能做的事有限但有几个习惯能减少返工。第一直接用浏览器渲染后的截图来确认颜色不要用图片处理软件里的颜色值想当然。第二需要精确控制颜色的项目可以考虑在代码里用color-profile相关的CSS属性做一层保护但这属于进阶玩法一般场景不要随便用因为浏览器支持程度参差不齐。第三发现自己这边的颜色和设计师有色差时优先怀疑硬件而不是急着改颜色值。5.2 十六进制和RGB混淆导致的样式失效这就是一个很典型的手误场景在CSS的background属性里写了background: #FF0000;没问题但如果你用了内联样式的字符串拼接把HEX误填进了rgba()函数里比如rgba(#FF0000, 0.5)整条规则都会被浏览器判为无效背景直接不显示。判断规则很简单带透明度的函数rgba()、hsla()接受的是数值加通道不会接受HEX和命名颜色rgb()现在倒是兼容HEX了但老项目的历史代码里可不一定。排查这类问题的时候直接在开发者工具里看那个元素的计算样式如果显示为无效值或者空白背景十有八九是格式混用了。5.3 透明色叠加后的脏色现象透明色叠在深色背景上会出现一种看着很脏的效果。比如你用rgba(255, 255, 255, 0.5)盖在#000000上面理论上得到中灰色#808080但很多显示器上因为渲染顺序、Gamma校正的原因实际观感会偏冷或偏灰绿。处理思路是在不需要真正透出底下内容的场景里扔掉透明度直接用算好的不透明颜色。我做一个浮层遮罩时就曾经为半透明白色盖在蓝色上的效果头疼过最后直接用色值计算工具烘焙出了一整个遮罩层的最终颜色视觉效果干净了后续维护也安心了。5.4 常见问题速查表问题现象可能原因排查方法颜色值没生效格式混用如rgba()里用了HEX开发者工具查看该属性是否无效颜色看起来发灰显示器色域偏小或工作色彩空间不一致换一台校准过的屏幕验证暗色模式失效媒体查询写错层级或变量覆盖优先级不够检查prefers-color-scheme的嵌套位置半透明色视觉上很脏透明色叠加产生了色彩混合偏差改用烘焙后的不透明HEX同一颜色两处显示不同一处被样式层叠覆盖用检查器定位具体生效的规则对比度不足看不清文字色和背景色明度差不够用无障碍对比度工具验证5.5 我整理颜色表的一个小习惯最后分享一个长期有用的经验。我电脑里始终维护着一个纯文本文件里面按色系记录了自己项目的全部颜色变量格式不用太复杂就三列用途、HEX、备注。每次新项目用色发生变动我会同步更新这份文件。这个习惯看起来笨但实际排查问题的时候效率极高——因为只要有一个人问我这个按钮的蓝是什么蓝我三秒钟就能告诉他准确的值和当时为什么选它。比你记住100个颜色值更重要的是你能有一套自己的方法去查找、验证和组织颜色。把上面这些内容过一遍你应该已经掌握了HEX、RGB、HSL三种格式的表达逻辑能独立完成格式转换也知道了怎么在项目里搭一套可维护的颜色体系。剩下的就是把常用值多用几次慢慢形成自己的手感。