搞前端开发的谁的收藏夹里没有几张颜色代码表呢我入行那会儿第一件事就是把常用颜色的 HEX 值抄在便利贴上贴在显示器边框红橙黄绿青蓝紫要啥颜色低头一瞄就行。这些年过去浏览器的开发者工具越来越强UI 框架也都收编了标准化色板但颜色代码这件事依然是绕不开的基本功——不管是切图、调样式还是跟设计师对稿只要对颜色代码的概念有一点含糊协作效率立马打折扣。这篇文章不打算单纯甩给你一张大表完事而是想把 HEX、RGB、HSL 这些常见格式掰开揉碎讲清楚它们各自的逻辑、换算关系、适用场景再结合我在实际项目里踩过的坑聊聊取色、配色调色、落代码的完整链路。无论你是刚入门的前端、需要自己切图的独立开发者还是想搞明白颜色代码是怎么回事的设计新人照着文章的思路走一遍基本就能在自己的项目里直接用起来。1. 先搞懂颜色代码的几种格式别再混着用颜色代码看起来只是几个字符实际上背后是几套完全不同的描述颜色的语言。我见过不少同事把 #FFF 和 rgb(255,255,255) 来回贴也知道它们都是白色但要问他为什么等价或者让他手动把 #2D8CF0 转成 RGB就卡住了。这一节把三种最常用的格式一次说透。1.1 HEX 十六进制为什么 #FF5733 是橙色而不是红色HEX 是前端代码里出现频率最高的格式以 # 开头后面跟六位十六进制字符。这六位其实是三组组合每组两位#RRGGBB分别对应红色、绿色、蓝色的通道值范围从 00 到 FF。十六进制里 FF 就是十进制的 255所以 #FF0000 是最纯的红#00FF00 是最纯的绿#0000FF 是最纯的蓝。#FFFFFF 是白#000000 是黑。那 #FF5733 为什么是橙色拆开看红色通道 FF 拉满绿色通道 57十进制 87蓝色通道 33十进制 51。红色占绝对主导绿色中等、蓝色很少——这个组合在直觉上就是偏暖的橙红色。很多新手以为带 FF 就是红、带 00 就是黑其实颜色是三个通道共同决定的任何一个通道的数值微调色相就会跑偏。这里有个实操里很实用的点HEX 支持三位缩写条件是每个通道的高位和低位相同。比如 #FF0000 可以写成 #F00因为 FF、00、00 每组的两位都一样#33AA55 就不能简写成 #3A5因为 #3A5 展开成的是 #33AA55 吗是的恰好这位作者没料到——三位的展开规则是把每一位重复一次所以 #3A5 等于 #33AA55刚好等于原值这种情况是巧合。更准确的例子是 #12AA6B 不能简写因为第 1、3、5 位和第 2、4、6 位不一致。缩写只适合节省空间比如纯黑 #000、纯白 #FFF、纯红 #F00其余情况老老实实写六位避免别人阅读时产生误解。另外现在还有八位 HEX比如 #FF000080后两位是透明度通道也是十六进制表示80 就是半透明。这个在移动端和现代浏览器里支持得很好但老项目里还是用 rgba(255,0,0,0.5) 更保险兼容性更好。1.2 RGB 和 RGBA屏幕上的一束光怎么拼出颜色RGB 是面向显示设备的描述方式原理跟老式 CRT 屏幕的三色荧光粉一脉相承把红、绿、蓝三束光按不同亮度混合就能模拟出人眼能感知的绝大多数颜色。所以 rgb(255, 87, 51) 和 #FF5733 是同一个颜色的两种写法前者是十进制记法后者是十六进制记法本质都是红多、绿中等、蓝少。RGB 的强度范围是 0 到 255因为 8 位色深刚好能表示 256 个级别。这个 255 经常有人问为什么不是 256 或者 100答案是 0 也算一个级别从 0 数到 255 一共 256 级。手机上常见的 8 位色深一个通道 256 级三个通道组合起来就是 256 × 256 × 256约 1678 万色日常图片和界面完全够用。RGBA 是在 RGB 基础上加了 alpha 透明度取值范围是 0 到 10 完全透明1 完全不透明。透明度这个东西最容易出问题因为它的效果取决于叠在什么背景上rgba(0, 0, 0, 0.5) 的黑色半透明遮罩放在白底上是浅灰放在图片上就是压暗一层。后面我会专门讲透明叠加的坑。实际开发里RGB 最大的用途是配合 JS 做动态颜色比如图表库根据数据动态生成渐变色用模板字符串拼 rgb() 比拼十六进制方便得多。反过来十六进制在静态样式里更直观能一眼看出颜色深浅这在写死配色的时候优势很大。1.3 HSL 色相环思维跟设计师高效对颜色的沟通语言HSL 是我个人觉得最人性化的一种颜色代码格式。hsl(h, s%, l%) 三个参数分别代表色相、饱和度、明度。色相 h 取值 0 到 360本质是一个色环的角度0 是红顺时针转 120 到绿240 到蓝360 又回到红。饱和度 s 是 0% 到 100%0% 就是纯灰100% 是纯色明度 l 也是 0% 到 100%0% 是黑100% 是白。为什么说它人性化因为人描述颜色的方式本身就是这是个偏红的橙色挺鲜艳不算太亮这跟 HSL 的参数是一一对应的。而 HEX 和 RGB 都太抽象了看到 rgb(255, 87, 51) 根本想不出它长什么样。用 HSL你调明度就是往颜色里加白加黑调饱和度就是让颜色变鲜艳或变灰完全符合直觉。设计里做同色系配色HSL 简直是神器。比如你想做一组从浅到深的蓝色直接固定 h210然后让 l 从 85% 递减到 30%一组和谐的品牌蓝就出来了。这在代码里可以写 CSS 变量动态控制也可以用循环自动生成色阶省去手动一个个算 HEX 的痛苦。后面讲品牌色管理时我会具体演示这个思路。2. 常用颜色代码速查这些色值值得直接背下来颜色代码表之所以经久不衰是因为有些色值真的高频到不用查。这一节我按实用场景整理了一份经过实战筛选的清单并解释每类颜色的视觉特性和典型用途顺便把换算逻辑讲透。2.1 前端开发高频使用的几组色值先看最基础的安全色和中性色。黑白灰是界面骨架纯黑 #000000 用在文字上其实有点生硬我一般用 #1F1F1F 或 #333333 这种带一点呼吸感的深灰代替纯白 #FFFFFF 作为背景没问题但大面积使用时配一个 #F5F5F5 的次级底色会让页面更有层次。边框和分割线常用 #E5E5E5 或 #EBEBEB灰得刚刚好不抢内容。下面这张表是我在项目里反复用到的色值按使用场景分类场景色值用途说明主文字#1F1F1F替代纯黑视觉更柔和次要文字#595959说明文字、描述性内容禁用状态#BFBFBF按钮、输入框的禁用态主背景#FFFFFF页面默认背景次级背景#F5F5F5卡片区域、区块分隔边框分割#E5E5E5列表分割线、卡片描边品牌蓝#2D8CF0互联网产品最常见的强调色成功绿#52C41A操作成功提示警告橙#FAAD14警示、注意类提示错误红#F5222D操作失败、必填校验这些值不是我凭空编的很多来自 Ant Design 这类成熟组件库的官方色板经过了大量产品验证直接用于业务项目比临时取一个颜色靠谱得多。不过要注意品牌蓝 #2D8CF0 这类色值在不同产品里会有细微差异别拿别人产品的品牌色硬套但作为通用强调色、通用状态色是没问题的。2.2 颜色代码互相换算的底层逻辑掌握了换算逻辑你就等于自带一个颜色代码转换器任何格式拿来都能算。HEX 转 RGB 的核心就是十六进制转十进制把两位一组拆开再用高位 × 16 低位计算。拿 #336699 举例第一组 33 等于 3 × 16 3 51第二组 66 等于 6 × 16 6 102第三组 99 等于 9 × 16 9 153所以 rgb(51, 102, 153)。反过来也一样把 RGB 的每个值除以 16商是第一位、余数是第二位再转成十六进制字符就行。这类转换如果只用一次在浏览器控制台临时写两行就行但如果经常需要批量处理我建议直接背一个极简的 JS 函数。我在自己工具库里放了个小工具核心逻辑如下// HEX 转 RGB function hexToRgb(hex) { const h hex.replace(#, ); const full h.length 3 ? h.split().map(c c c).join() : h; const num parseInt(full, 16); return { r: (num 16) 255, g: (num 8) 255, b: num 255 }; } // RGB 转 HEX function rgbToHex(r, g, b) { return # [r, g, b] .map(v v.toString(16).padStart(2, 0)) .join(); }这段代码里有个容易忽略的细节三位 HEX 要先按每位重复一次的规则展开否则 parseInt 之后位运算会出问题。我最早写工具时就漏了这一步导致 #FFF 转出来是 #0FFFFF排查半天才发现是缩写展开的问题。你可以把这个函数放进自己的小工具库或者直接在控制台里跑省得每次都打开在线转换网站。2.3 CSS 命名颜色的坑rebeccapurple 这类名字能信吗CSS 规范里有一批可以直接用名字引用的颜色比如 red、blue、gold、mediumseagreen总数有 148 个。它们的好处是代码可读性极高写 background: skyblue 比写 #87CEEB 好懂多了。但坑也很明显第一名字和实际颜色的对应关系不直观steelblue 到底是什么蓝大多数人想象不出来第二名字精度不够能满足需求的只有那 148 个想要一个稍微深一点的天空蓝就抓瞎了第三部分命名色在不同浏览器、不同系统上的渲染存在细微差异虽然现代浏览器基本统一了但谨慎起见正式项目还是用 HEX 或 HSL 更稳妥。这里面有个值得记住的小故事rebeccapurple#663399这个命名色是 CSS 社区为了纪念 Web 先驱 Eric Meyer 因病去世的女儿 Rebecca 而加入规范的它的色值恰好是 Rebecca 生前最喜欢的一种紫色。这种人文细节在技术规范里很少见也让我觉得颜色代码不只是冷冰冰的数字背后是有故事和审美的。所以我给命名色的定位是注释友好型选择——在代码里用命名色做临时调试很方便一眼能看出是红是绿但正式 UI 里不要大面积依赖名字尤其是确定品牌色和关键状态色时必须用精确的 HEX 或 HSL 定义避免不同浏览器渲染不一致。3. 实操流程取色、配色、落到代码里的完整链路很多教程讲颜色代码只停留在认识格式层面真到动手环节反而语焉不详怎么从一张设计稿里准确取出颜色怎么把取到的颜色变成可维护的代码资产这一节我按实际工作流拆解从取色工具、转换方法到品牌色管理一条龙讲清楚。3.1 选对工具从浏览器到系统自带的取色器取色的第一选择永远是浏览器开发者工具。打开 Chrome按 F12切到 Elements 面板在 Styles 里任意颜色的色块上点一下就会弹出取色器。它自带屏幕吸管功能可以直接吸取页面上任何元素的颜色吸完自动生成 HEX 值还能顺便看 RGB、HSL 和对比度信息。这个工具的最大优势是零安装、随时可用而且取的是渲染后的实际颜色比截图工具取色更准确。如果你需要取桌面软件里的颜色比如从设计稿、从图片软件里吸色那就得上系统级工具。macOS 自带的数码测色计藏在启动台的其他文件夹里可以显示光标所在位置的 RGB 色值Windows 上推荐 PowerToys 里的 Color Picker快捷键 Win Shift C取完自动复制成指定格式的色值还支持自定义格式模板。这类工具我用下来的心得是能用系统自带的就别装第三方减少一个常驻后台进程也少一份广告弹窗的烦恼。代码编辑器也能帮大忙。VS Code 里装了颜色预览插件后鼠标悬停在色值上就能看到颜色预览点击还能弹出取色器直接改色。这个功能对边写 CSS 边调色的场景特别有用不用反复切窗口去查色板开发效率明显提升。3.2 从设计稿到代码颜色代码转换的正确姿势设计师给你的设计稿通常是一张 Figma 或 Sketch 的源文件里面是精确的颜色值。在 Figma 里选中任意图层右侧属性面板会直接显示填充颜色的 HEX、RGB 和 HSL 三种格式也能直接复制。这里有个关键细节Figma 默认复制的可能是原始颜色而不是最终呈现颜色如果设计稿里有透明度叠加或混合模式你复制出来的色值在浏览器里还原出来会对不上。碰到这种情况建议截图后用浏览器吸管或者让设计师在导出设置里勾选展平透明度拿到真正的最终色值。拿到色值落到代码里时我习惯先统一格式。个人推荐在 CSS 里统一用 HEX在需要透明度的场景用 rgba 或 8 位 HEX在 JS 动态生成颜色的场景用 rgb 或 hsl。别一个项目里六位 HEX、rgba、命名色混着写后期维护非常痛苦。更麻烦的是团队协作时各写各的所以我会在项目规范里明确写一条静态样式一律 HEX动态颜色一律 hsl禁止使用命名色作为正式样式值。设计稿交付后还有一步容易被忽略在浏览器里做视觉还原走查。我会开着两个窗口一边是设计稿截图一边是页面用浏览器吸管分别取两个窗口里的同一块颜色对比色值差距。经验上设计师的显示器和我的显示器可能存在色彩差异只要色值本身一致渲染偏色就是设备问题不在代码层面纠结。3.3 品牌色管理的进阶做法把色值变成设计变量颜色代码最大的敌人是散落。一个按钮的蓝写在 5 个文件里改一次品牌色要全局搜索替换迟早会漏。成熟的方案是把颜色收敛成 CSS 变量也就是设计令牌。我一般在项目的 :root 里定义一套色板然后全项目统一引用变量:root { --brand-primary: #2D8CF0; --brand-primary-hover: #4BA3F5; --brand-primary-active: #1A6FD8; --text-main: #1F1F1F; --text-secondary: #595959; --bg-page: #FFFFFF; --bg-secondary: #F5F5F5; --border-base: #E5E5E5; --status-success: #52C41A; --status-warning: #FAAD14; --status-error: #F5222D; }这样做的直接好处是改品牌色只动一处全站生效。但更深的收益是色板约束——团队里每个人都从变量里选颜色而不是随手造新色值整个产品的色彩一致性会显著提升。我见过很多产品早期配色还挺整齐做着做着就乱成一锅粥就是因为没有用变量统一收口。用 HSL 配合变量还能玩出花样。比如定义主色的色相为一个变量然后通过 calc 和 hsl 动态生成同色系的 hover、active、disabled 色不需要逐个手动算色值:root { --brand-hue: 210; --brand-primary: hsl(var(--brand-hue) 85% 55%); --brand-primary-hover: hsl(var(--brand-hue) 85% 65%); --brand-primary-disabled: hsl(var(--brand-hue) 50% 85%); }这个技巧在需要扩展品牌色阶的项目里特别好用改一个色相值整套同色系颜色全部联动变化。前提是你对 HSL 有足够的掌控力这也再次说明理解颜色代码底层格式不是懂不懂理论的问题是会直接影响工程效率的实操技能。4. 常见问题与排查技巧实录颜色代码看着简单实际项目里出的幺蛾子一点不少。下面这几个问题是我这些年高频遇到的每一个都有明确的排查思路和解决方案建议直接存下来当速查表用。4.1 颜色对不上多半是色彩空间在捣乱最典型的现象是同一个 #336699在设计师的显示器上、你的电脑上、手机上各显各的色。这通常不是代码错了而是色彩空间不一致。当前主流的显示标准是 sRGB但越来越多的新设备开始支持 Display P3 这种更广的色彩空间色域更宽、色彩更鲜艳。如果你的页面里包含 P3 色域的颜色而渲染环境把它当作 sRGB 来处理颜色就会发灰或者发闷。排查思路是这样的先用浏览器吸管取实际渲染的颜色跟设计稿目标色对比。如果代码里的色值没错那问题就出在设备或色彩配置文件上。解决办法是给颜色明确标注色彩空间CSS 里可以用 color(display-p3 1 0 0) 这类函数显式声明 P3 颜色或者干脆统一用 sRGB 交付保证跨设备一致性。另外要注意 macOS 的彩色 LCD和P3两种显示模式会直接影响你看到的颜色所以对颜色要求高的项目建议团队统一校对显示器配置文件。4.2 RGBA 透明叠加之后颜色发灰怎么办这是前端开发里特别经典的一个坑。你明明给按钮加了个 rgba(0, 0, 0, 0.3) 的遮罩心想应该是压暗一层结果按钮看起来灰蒙蒙的字都快看不清了。原因是透明度的混合公式是线性叠加最终颜色 前景色 × alpha 背景色 × (1 - alpha)。黑色 semi-transparent 叠在浅色背景上得到的确实是深灰而不是变暗的同时保持饱和度。如果你想要更暗但不发灰的效果不要用半透明黑色遮罩而是直接用深色带透明度的 HSL 调整饱和度。比如想让一个蓝色按钮 hover 时变暗与其用 rgba(0,0,0,0.1)不如直接用 hsl(210, 85%, 45%) 这种明度更低的实色。这也是为什么我前面强调 HSL 在交互状态设计上更好用——它把亮度和饱和度分开控制能精确表达只是变暗一点还是变灰一点。这个坑在移动端尤其常见因为很多动效和遮罩层都用 rgba 实现。我的建议是遮罩层用 rgba 没问题但按钮、图标的 hover 和 active 状态优先用色阶明确的实色变量避免半透明叠加导致颜色不可控。4.3 对比度不够好看的颜色不一定能用最后一个问题关乎可用性却最容易被忽略。我曾见过一个深灰按钮配浅灰文字的设计设计师觉得高级但用户根本看不清上面的字。颜色代码的价值最终要体现在可读性上这里有个硬指标叫对比度。WCAG 无障碍规范要求普通文字的对比度不低于 4.5:1大字和图标可以放宽到 3:1计算公式涉及前景色和背景色的相对亮度差。实际项目里不需要手算有几个快捷办法Chrome 开发者工具的颜色选择器里自带对比度检查选中颜色就能看到它跟背景色之间的比值不达标会直接提示在线工具可以用 WebAIM 的 Contrast Checker输入两个色值立即出结果。我的习惯是所有文字色和背景色的组合都必须过 4.5:1 这道线宁可稍微牺牲一点美观度也要保证用户不费眼。还有一个容易被忽略的盲区是色弱用户。世界上有相当一部分人对红绿色分辨困难如果你的业务逻辑里成功用绿色、失败用红色只靠颜色区分这部分用户就完全无法识别。正确做法是颜色之外再叠加图标、文字或形状信息比如成功提示除了绿色外前面加一个对勾图标。我在做后台系统时都会在规范里补上这一条确保功能状态不只依赖颜色传达。说回颜色代码本身。从最基础的 HEX 到 HSL 动态配色从取色工具的选用到品牌色变量的落地这套东西我用了快十年最大的体会是颜色代码不是一个需要死记硬背的字典而是一套可以理解、可以推导、可以自动化的语言。你把它的底层逻辑掌握了不管未来浏览器、设计工具怎么变化核心那层颜色是怎么被数字描述的知识永远不过时。最后再分享一个小技巧把上面那份高频色值表加上你自己的品牌色整理成一个 project-palette.css 文件放在项目的全局样式里同时贴一份在团队文档中。这样下次任何人问我们主色是什么来着直接丢一个链接过去就行省得反复截图、反复解释这也是我把这套颜色代码知识落地到团队协作里的最后一步。