做前端和UI设计的朋友，聊天记录里多半都有过这么一幕：设计师甩过来一张截图，说“这里想用这种高级一点的灰”，你盯着屏幕愣了三秒，然后默默打开取色器开始吸取像素。颜色代码表这东西，看着基础，却是每天都要用的硬通货。不管是写页面、调PPT、剪视频，还是给甲方出方案，拿不准颜色的时候，查表永远比肉眼硬猜靠谱。
这篇文章我会把颜色代码这件事彻底讲透：从HEX、RGB、HSL几种格式的原理和换算，到一份按场景分类的常用颜色代码速查表，再到开发、设计里的实际使用流程和踩坑经验。适合刚入门的前端新手、需要经常跟颜色打交道的设计师，以及那些只是偶尔做个物料但不想在色值上翻车的运营同学。读完你至少能做到一件事：拿到任何一张图或一个色值，都能快速搞清楚它是怎么组成的，并且知道自己下一步该怎么用。
1. 先搞懂颜色代码的几种格式与原理
1.1 三种主流格式：HEX、RGB、HSL各自的门道
颜色代码这件事，核心就一句话：计算机里的颜色，本质上都是数字。只是同一个颜色有好几种不同的“记法”，就像同一个日期可以写成“2025-05-18”，也可以写成“May 18, 2025”，含义一样，但适用场景不一样。
最常见的三种格式，我一个个说。
HEX（十六进制）：形如#FF5733，这是网页开发里出镜率最高的格式。六个十六进制字符分成三段，每段两个字符对应一个颜色通道，顺序是红、绿、蓝。#FF5733的意思就是红色拉满（FF）、绿色用了87、蓝色用了51。这种格式的好处是紧凑、能直接写进CSS，省字符；坏处是普通人看着一长串字母数字，完全想象不出对应什么颜色。
RGB（红绿蓝）：形如rgb(255, 87, 51)，本质和HEX一模一样，只是把十六进制换成了十进制。每个通道的取值从0到255，255代表这个通道的光开到最大，0代表完全关闭。RGB的好处是直观，数值越大颜色越亮，调起来心里更有数。
HSL（色相、饱和度、亮度）：形如hsl(12, 100%, 60%)，前三个字母分别是Hue（色相）、Saturation（饱和度）、Lightness（亮度）。色相用角度表示，0度是红色，120度是绿色，240度是蓝色，转一圈360度正好回到红色。这种格式最接近人类的感知方式——你不需要想红绿蓝各占多少，只需要说“这是什么颜色（色相）、够不够浓（饱和度）、亮不亮（亮度）”，所以做配色调整的时候，HSL往往是最好用的。
除此之外还有一个RGBA和HSLA，就是在末尾多了一个透明度参数A，取值范围0到1，0是全透明，1是不透明。这在做弹层、遮罩、阴影这类需要层次叠加的效果时特别常用。
1.2 十六进制到底是怎么算的：手把手教你换算
很多新手看到#FF5733就头大，其实换算逻辑特别简单。记住一个基础规则：十六进制就是满16进1，字母A到F分别代表10到15。
左右两段分开看。以57为例，左边这位的5代表5个16，右边这位的7代表7个1，所以57换算成十进制就是5 × 16 + 7 = 87。同理，FF就是15 × 16 + 15 = 255，33就是3 × 16 + 3 = 51。所以#FF5733换算成RGB就是rgb(255, 87, 51)，分毫不差。
反过来，如果要把一个十进制数转成十六进制，比如128，先看它里面有几个16（128 ÷ 16 = 8），余数是多少（128 - 8 × 16 = 0），所以128就是80。再比如200：200 ÷ 16 = 12，余8，12对应字母C，所以200就是C8。
实际开发里，你根本不需要经常手动做这个换算，因为浏览器开发者工具、取色器、设计软件全都内置了即时转换功能。但懂这个原理有一个好处：当你有“调深一点”“调浅一点”的需求时，你能预判数值大概怎么变。比如#333333这种非常深的灰，如果你想再浅一点，往大了调就行——#555555、#777777，每次调整都能估个大概。这种直觉在调色的时候比任何工具都值钱。
提示：日常用得最多的几个十六进制数和十进制的对应关系建议记一下：00对应0，33对应51，66对应102，99对应153，CC对应204，FF对应255。这些数字在颜色代码里出现频率极高，记住它们，换算速度能快一大截。
1.3 格式之间怎么快速转换，有必要背吗
这个问题我的答案是：不用背转换公式，但一定要会用工具。我见过太多人在群里问“这个#F5F5F5转成RGB是多少”，其实三秒钟就能解决。
最快的办法是打开浏览器调试工具（F12），在Styles面板里点任意颜色块，编辑器会实时展示HEX、RGB、HSL三种格式，还能直接改。其次是用取色工具，后面我会专门推荐几款。如果你想偷懒，直接在搜索引擎里输入颜色代码，绝大多数搜索引擎会直接显示预览色块和RGB/HSL值。
但有一个转换场景建议真正掌握——从HEX转RGBA。因为设计师给的颜色通常是#FF5733这种不透明的HEX，而你做页面时经常需要同色不同透明度的版本，比如 hover 效果、背景叠层、蒙版。手动把#FF5733转成rgba(255, 87, 51, 0.6)是前端开发的高频操作，这个流程后面在实操环节会展开讲。总之，格式之间的互相转换，思路比死记硬背重要：拿到一个颜色，先判断它是HEX还是RGB，再看有没有透明度，最后决定怎么用它。
2. 一份能直接抄作业的常用颜色代码表
2.1 基础色系：网页里出镜率最高的18个基础色
做前端和设计的人，桌面和收藏夹里几乎都有一份颜色速查表。但网上流传的大全表格往往列了几百个颜色，看着全，真要用的时候反而不知道选哪个。我这里给一份精简到18个的基础色表，全部是在实际项目中最常用、不容易出错的颜色。这些颜色同时标注了HEX和RGB，方便不同场景直接复制。
| 颜色名称 | HEX代码 | RGB值 | 使用场景建议 |
|---|---|---|---|
| 纯黑 | #000000 | rgb(0,0,0) | 正文文字、深色模式背景 |
| 深灰 | #333333 | rgb(51,51,51) | 次要文字、图标 |
| 中灰 | #666666 | rgb(102,102,102) | 辅助文字、禁用状态 |
| 浅灰 | #999999 | rgb(153,153,153) | 占位符、描边 |
| 更浅灰 | #CCCCCC | rgb(204,204,204) | 分割线、边框 |
| 背景灰 | #F5F5F5 | rgb(245,245,245) | 页面背景、卡片底色 |
| 纯白 | #FFFFFF | rgb(255,255,255) | 背景、反色文字 |
| 红色 | #FF0000 | rgb(255,0,0) | 错误提示、删除操作 |
| 酒红 | #800000 | rgb(128,0,0) | 强调色、活动色 |
| 橙色 | #FFA500 | rgb(255,165,0) | 警告、促销标识 |
| 黄色 | #FFFF00 | rgb(255,255,0) | 高亮、选中标记 |
| 绿色 | #008000 | rgb(0,128,0) | 成功、完成状态 |
- 注意：CSS里默认的
green其实是#008000这个偏暗的绿色，平时设计中更常用的鲜绿色是#00FF00，在CSS标准名里叫lime。有次接设计稿，设计师标注“绿色”没给色值，我用#008000配上去，对方一看就说“这绿得太沉闷了”，后来才发现他脑子里想的是#00FF00。这也是为什么颜色代码表一定要看HEX和RGB，不能光看名称。
| 蓝色 |#0000FF|rgb(0,0,255)| 链接、信息提示 | | 天蓝 |#87CEEB|rgb(135,206,235)| 插画、渐变辅助色 | | 紫色 |#800080|rgb(128,0,128)| 会员标、特殊标识 | | 粉色 |#FFC0CB|rgb(255,192,203)| 女性向活动、优惠标签 | | 棕色 |#A52A2A|rgb(165,42,42)| 复古风、木质纹理 | | 青色 |#00FFFF|rgb(0,255,255)| 科技感、渐变冷色 | | 深蓝 |#000080|rgb(0,0,128)| 背景、深色主题强调 |
2.2 风格色系：莫兰迪、马卡龙、赛博朋克怎么找代码
基础色只能保证“不出错”，但要让页面有调性，就得用风格色系。这几年设计圈流行那几类风格，其实都有对应的色值规律，掌握之后就不用每次去翻了。
莫兰迪色系：特点是饱和度低、有点灰蒙蒙的柔和感，看起来“高级”。典型配色有雾霾蓝#85A9BF、灰豆沙粉#C69C9C、豆沙绿#A7BEAE、灰紫#B8A9C9。这类颜色的规律是RGB三个通道的数值比较接近、相互之间差距不大，所以颜色看起来柔和灰暗。想自己调出莫兰迪感，有个土办法：把任意鲜艳颜色的HSL里饱和度砍掉一半左右，亮度往中间拉一点，基本就接近了。
马卡龙色系：特点是饱和度中等偏上、亮度很高，给人清甜明亮的感觉。常见的有浅粉#FFC8DD、薄荷绿#B8E0D2、浅黄#FFF3B0、浅蓝#A9D6E5。这类颜色的核心是“奶”，因为RGB数值往往偏高，比如#FFC8DD里红色255、绿色200、蓝色221，所有通道都在200以上，整体就会很轻盈。做女性向、儿童向或者零食电商的视觉，马卡龙色基本不会跑偏。
赛博朋克风格：特点是高饱和撞色加暗背景，常见霓虹青#00F0FF、荧光品红#FF00A8、电光紫#8B00FF、亮黄#FFE300。这类颜色用起来有个重要原则——大面积用暗色（比如深紫#1A0B33、黑青#0D1530）压底，亮色只做点缀和高光。新手容易犯的错是满屏高饱和荧光色，亮到直接劝退用户。
实操心得：配色风格不是玄学，是有规律的。把颜色代码存下来以后，多观察它们的HSL值，你会发现同一风格的颜色在饱和度、亮度区间上是高度一致的。下次打开酷站收藏夹，拿取色器吸一下你喜欢的设计稿背景色，对照它们的HSL规律，你就能自己反推出整套配色。
2.3 功能色系：后台系统里按钮、提示、状态的配色逻辑
如果你做过后台管理系统、数据看板、SaaS产品，一定会发现这些产品的颜色特别“规矩”：成功是绿的、警告是橙的、错误是红的、信息是蓝的。这不是设计师偷懒，而是功能色有一套约定俗成的语义逻辑，用户已经形成了条件反射。
常见的功能色参考如下（同时给出HEX和RGB）：
| 功能类型 | HEX代码 | RGB值 | 使用建议 |
|---|---|---|---|
| 主色/品牌色 | #1677FF | rgb(22,119,255) | 主按钮、选中态、链接（参考Ant Design主色演变） |
| 成功/完成 | #52C41A | rgb(82,196,26) | 成功提示、通过状态、增长数据 |
| 警告/待处理 | #FAAD14 | rgb(250,173,20) | 警告提示、待审核、居中值 |
| 错误/失败 | #FF4D4F | rgb(255,77,79) | 错误提示、删除操作、失败状态 |
| 信息/中性 | #1677FF | rgb(22,119,255) | 信息提示、引导性说明 |
| 链接色 | #1677FF | rgb(22,119,255) | 文字链接、可点击元素 |
功能色的核心讲究是区分度，也就是用户扫一眼就知道当前是正常、警告还是异常。所以功能色不要用模棱两可的颜色：不要用紫色做错误提示，不要用灰色做成功提示。同时，同页面里主色和功能色的使用频次要拉开，主色可以反复出现在按钮、链接、导航里，功能色只在对应状态出现，不然满屏都是彩色，重点就没了。
3. 颜色代码的真实应用场景与实操要点
3.1 开发时用HEX还是RGBA？按场景选格式
在实际写页面的时候，用哪种颜色格式不是凭喜好，而是看使用场景。我这里有几个选了无数遍之后总结出来的经验。
静态元素用HEX：比如标题、正文、背景、边框，这些颜色写一次就固定的，直接用HEX最简单，代码也最短。color: #333;比color: rgb(51,51,51);看着清爽多了。
需要透明度变化用RGBA：比如导航栏滚动后的半透明背景、弹窗里的黑色蒙层、hover时的浅色遮罩，这些场景用RGBA是最直观的。你只需要写background: rgba(0,0,0,0.5);就完事了，不用再去单独算颜色的半透明版本。
需要动态调色用HSL：如果你做的功能允许用户自己换主题色，或者需要根据某个数值生成不同深浅的颜色，HSL是唯一合适的格式。因为你只需要改变色相的值，比如用一个滑块让用户从0转到360，一整条彩虹就出来了。如果用RGB做这件事，你得同时控制三个通道，累到怀疑人生。
写代码时还有个小技巧：CSS变量和颜色搭配使用。在项目的根目录定义一套颜色变量，比如--primary-color: #1677FF;，后面所有引用主色的地方都写var(--primary-color)。这样以后改主题色，只需要改一行，全站跟着变。这套做法业界叫Design Token，大厂的设计系统基本都是这么玩的。
3.2 设计工具里的取色与配色流程
如果是设计师或经常做视觉的同学，取色效率直接决定工作节奏。我的日常流程是这么走的：拿到参考图之后，先用截图工具或者取色器把核心颜色吸出来，记下几个关键色值，然后进配色工具里生成色板和渐变方案，最后再把确定的色号输出给开发。这里推荐几个我用下来比较顺手的工具。
取色方面，macOS自带的“数字色度计”基础但够用，Windows上微软的PowerToys内置了Color Picker，快捷键就能唤起取色器，全局取色不用切换窗口。如果你经常做UI截图标注，Snipaste的取色功能也很方便，按一下就能吸色并自动复制到剪贴板。
配色方面，Coolors（coolors.co）是效率很高的一个，随机生成五色色板，按一下空格就能换一组方案。Adobe Color支持基于色轮创建配色方案，还能从图片中提取颜色主题。UI Gradients（uigradients.com）内置了大量优质渐变色值，做背景渐变直接复制CSS代码即可。Open Color（yeun.github.io/open-color）是开源颜色系统，已经按色系和明度整理好了色阶，直接引用即可。
操作提醒：取色的时候有几个细节容易翻车。一是注意取色器的采样区域，有些工具默认取鼠标指针所在单像素的颜色，如果图片有噪点或者细边，单像素取出来的颜色会失真；二是截图时注意分辨率的缩放，在高分屏上截图取色，建议先确认取色器是否按物理像素采样；三是当从微信或浏览器截图取色时，图片经过压缩会丢失部分色彩精度，重要颜色尽量从原始文件取。
3.3 从单色到色板：三步搭配出一套不翻车的配色方案
很多时候我们遇到的问题是“手头只有一个品牌色，整套界面怎么配”。这里分享一套我从实战中总结的三步法，效果比盲目试色稳定得多。
第一步，确定主色。主色就是品牌标准色，通常来自Logo。把Logo放进PS或专业取色器，提取最核心的那个颜色作为主色，记为C。
第二步，用同一色相生成色阶。保留主色的色相（H值）和饱和度（S值），只改变亮度（L值），分别调出深色版和浅色版。这样生成的色板天然协调，因为色相统一。比如主色#1677FF，它的HSL大约在hsl(214, 92%, 53%)左右，我把亮度降到40%得到深蓝，升到80%得到浅蓝，用于不同层级的背景和按钮状态。
第三步，找一组中性色做配角。中性色就是黑、白、灰，不参与色彩竞争。把正文用#333、辅助文字用#666、分割线用#E8E8E8，整套界面的“骨架”就很稳了。如果觉得单调，可以再引入一个低饱和的辅助色，用于标签或图标点缀，但辅助色面积一定不能超过主色。
这三步走完，一个页面其实只需要两三个彩色系加一组灰色阶，视觉上已经足够丰富。最怕的就是没有章法地把七八个高饱和颜色堆在同一个页面里，那才是灾难。
4. 最近常踩的坑：颜色代码相关的故障排查
4.1 同一份代码，为什么每个屏幕显示都不一样
这个坑几乎每个做视觉的人都会遇到：同一个#FF5733，在设计师的Mac上看起来偏红，在客户的Windows笔记本上偏橙，在手机上又是一种颜色。出现这个问题，先说结论：很大概率不是代码写错了，而是显示器色彩空间不一致。
目前市面上主流的屏幕色域有两种：sRGB和Display P3。sRGB是网页内容的标准色域，绝大多数Windows设备和旧款显示器都以此为准。Display P3是苹果推动的广色域标准，覆盖的颜色范围比sRGB大约25%，新款MacBook、iPad和iPhone都在用。当你在P3广色域屏幕上写了一个sRGB色值的颜色，系统会自动映射并可能让颜色看起来更鲜艳、更饱，而在sRGB屏幕上则还原成原始值，于是两边观感就有了偏差。
排查思路是这样的：先在浏览器开发者工具里确认CSS里的颜色代码本身没问题，然后在两台显示器上同时打开同一张参考图对比。如果参考图也有同样的偏色，说明是屏幕色域差异；如果只有网页偏色，再检查是否误用了P3色值——比如你在设计工具里直接截图的色值可能已经是P3值，需要转回sRGB再写进代码。还有一个小细节：CSS中可以用color-gamut媒体查询来适配不同色域，对要求高的项目可以分别提供sRGB和display-p3的两套色值。
除了色域，另一个常见原因是亮度调节。同一块屏幕，亮度不同时人眼感知到的颜色深浅也会不同，尤其是深色背景上的浅色文字。这不是颜色的锅，但做设计评审时容易被当成色差问题提出来。
4.2 设计师给的HEX，怎么安全转成带透明度的RGBA
这个场景太典型了：设计稿里按钮是#1677FF，但它要求“点击时颜色透明度60%”，怎么办？很多人的第一反应是打开转换工具查一下RGB值，然后拼rgba(22, 119, 255, 0.6)。这个思路对，但有个更稳的做法。
实际上，判断一个颜色在某个透明度下叠加在某个背景上的最终可见颜色，是一门专业的色彩叠加计算。如果只做CSS，直接用RGBA就行，浏览器会自动帮你完成叠加计算。但如果你在做图片导出、PPT配色，或者把半透明色叠加到照片上的场景，单纯“透明度60%”得到的视觉效果会和设计稿有差异。这时候需要的是颜色叠加公式：
最终颜色 = 前景色 × 透明度 + 背景色 × (1 - 透明度)
举个例子：一个不透明度40%的红色#FF0000叠加在白色背景上，最终颜色就是红=255×0.4+255×0.6=255，绿=0×0.4+255×0.6=153，蓝=0×0.4+255×0.6=153，得到rgb(255,153,153)，也就是浅粉色。如果你在Photoshop里直接把这个效果取色，取到的是#FF9999而不是#FF0000，就会怀疑是不是颜色翻车了。明白这个原理，你就知道做这类操作时应该直接请教设计师最终期望的视觉效果，而不是偷偷改色。
实操心得：跟设计师对齐透明度需求时，最好问清楚是“图层不透明度”还是“填充不透明度”，两者计算逻辑不同。还有一类写法是直接用HEX后加两位十六进制透明度，比如
#1677FF99，后两位99代表60%透明度（约合153/255），这在CSS里也是合法的8位十六进制颜色格式，很多设计工具导出的代码就是长这样。看到这种格式不用慌，前面6位是颜色，后两位是透明度。
4.3 对比度不够被用户喷，颜色选择也要过可访问性门槛
我说一个自己踩过的坑：给某个活动页配了一组浅灰背景加浅色文字，看着高级，结果上线后大量用户反馈看不清。原因就是前景色和背景色之间的对比度太低了。颜色搭配不仅关乎美观，还直接影响可用性，尤其是户外强光下用手机、视力不好的用户，以及色觉异常的人群。
业界有现成的衡量标准，就是WCAG（Web内容可访问性指南）里的对比度计算公式。简单的理解是：将两种颜色分别算出相对亮度，较亮的值加上0.05，再除以较暗的值加上0.05，结果就是对比度。WCAG建议正常文本的对比度不低于4.5:1，大号文本（18px以上加粗，或24px以上）不低于3:1。工具方面，很多配色软件内置了对比度检查功能，直接在line-height或字体排版的设置面板里能看到那个数字。快速实测的办法是把你的文字颜色和背景颜色贴进在线对比度检测器，看看是不是绿色通过。
反过来讲，颜色代码表里的同一个颜色在不同背景上的表现完全不同，这也是为什么选色时一定要把“文字+背景”当成整体来看，而不要孤立地评价一个颜色好不好看。如果对比度不达标但你又不想放弃这个颜色，可以做两件事：要么把文字改深，比如从浅灰#999改成#333；要么把文字加粗、加大，利用大文本标准降低对比度要求。
4.4 其他几个诡异的小问题
有一个常见的坑：颜色名称在浏览器里表现不一致。CSS标准里预定义了几百个颜色关键字，比如gray、grey、silver，这些在规范上都有统一值，但实际使用中不同浏览器对个别名称的解析可能有微差。有个更著名的例子是rebeccapurple，一个带有纪念意义的紫色，所有现代浏览器都支持，取值#663399。但性能优化角度讲，一个颜色名的解析路径比十六进制值更长，反正都要敲键盘，不如直接用HEX，避免歧义。
还有一个坑是透明背景叠加。如果你用截出的PNG去取色，发现“本来应该是白色背景，取出来却是灰色”，先把Photoshop里的背景图层检查一下，透明底在普通取色器里显示为灰白格子，取到的是棋盘格的灰色，而不是真正的白。这类问题不算代码故障，但很影响协作——前后端拿着完全不同的“白色”对来对去，最后发现谁都没错，错在取色方式。
5. 颜色代码工作流的高级玩法
5.1 从颜色代码到设计变量：搭一套自己常用的色板库
用久了会发现，大多数项目用到的颜色其实是高度重复的：背景灰、正文黑、主色蓝、成功绿、警告橙、错误红，加上几个深浅层级。所以建议每个人都维护一套自己的色板库，平时把所有用过的、验证过没问题的颜色按功能存起来，下次新项目直接用，省得每次重新配。
一套完整的项目色板一般包含四层：主色及深浅变体（通常5到10个色阶）、中性灰阶（从深到浅约10个）、功能色（成功、警告、错误、信息）、辅助色（根据品牌延展）。存的时候不要只存HEX，把对应的RGB、HSL、用途说明一并记录下来。我自己的习惯是把它放在一个全局的CSS文件或者设计稿的色板页里，标注好每个颜色的使用场景，新同事接手直接看色板就知道该用哪个。
5.2 最后的实用技巧：查表和记忆怎么结合起来
虽然有了全套色板，但有些高频颜色我建议直接背下来，能背多少背多少，背下来之后工作会顺畅很多。优先级最高的是黑色和各级灰阶：#000、#333、#666、#999、#CCC、#F5F5F5，这些在写文字层级时天天用。其次是品牌色，你自己的项目主色、公司Logo色，必须张嘴就来。再次是功能色的标准值，成功、警告、错误、信息四个颜色各记一个，一般就够用了。
背色块的小技巧是把颜色和它的十六进制规律联系起来。比如灰色系的规律就是RGB三个通道相等，而#333比#666深、#666比#999深，记数字顺序就行。很多浅色背景是#F开头的，因为FF、F5、FA这些通道值都很高，接近白色。这些规律不是死规则，但能帮你在没有工具的时候快速估算一个颜色的深浅走势。
我见过一个挺绝的做法，是把常用的几十个颜色代码做成本地网页，每格显示色块加HEX和RGB，放在本地服务器或收藏夹里，随时打开就能搜。这比每次临时百度又省事又准确，还能自己维护更新。如果你也想凑一套，建议直接从这篇文章的分类色表里挑，基础色加功能色加你自己的品牌色，基本就构成一个能长期用的色板库了。
