做前端和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到255255代表这个通道的光开到最大0代表完全关闭。RGB的好处是直观数值越大颜色越亮调起来心里更有数。HSL色相、饱和度、亮度形如hsl(12, 100%, 60%)前三个字母分别是Hue色相、Saturation饱和度、Lightness亮度。色相用角度表示0度是红色120度是绿色240度是蓝色转一圈360度正好回到红色。这种格式最接近人类的感知方式——你不需要想红绿蓝各占多少只需要说“这是什么颜色色相、够不够浓饱和度、亮不亮亮度”所以做配色调整的时候HSL往往是最好用的。除此之外还有一个RGBA和HSLA就是在末尾多了一个透明度参数A取值范围0到10是全透明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 25533就是3 × 16 3 51。所以#FF5733换算成RGB就是rgb(255, 87, 51)分毫不差。反过来如果要把一个十进制数转成十六进制比如128先看它里面有几个16128 ÷ 16 8余数是多少128 - 8 × 16 0所以128就是80。再比如200200 ÷ 16 12余812对应字母C所以200就是C8。实际开发里你根本不需要经常手动做这个换算因为浏览器开发者工具、取色器、设计软件全都内置了即时转换功能。但懂这个原理有一个好处当你有“调深一点”“调浅一点”的需求时你能预判数值大概怎么变。比如#333333这种非常深的灰如果你想再浅一点往大了调就行——#555555、#777777每次调整都能估个大概。这种直觉在调色的时候比任何工具都值钱。提示日常用得最多的几个十六进制数和十进制的对应关系建议记一下00对应033对应5166对应10299对应153CC对应204FF对应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值使用场景建议纯黑#000000rgb(0,0,0)正文文字、深色模式背景深灰#333333rgb(51,51,51)次要文字、图标中灰#666666rgb(102,102,102)辅助文字、禁用状态浅灰#999999rgb(153,153,153)占位符、描边更浅灰#CCCCCCrgb(204,204,204)分割线、边框背景灰#F5F5F5rgb(245,245,245)页面背景、卡片底色纯白#FFFFFFrgb(255,255,255)背景、反色文字红色#FF0000rgb(255,0,0)错误提示、删除操作酒红#800000rgb(128,0,0)强调色、活动色橙色#FFA500rgb(255,165,0)警告、促销标识黄色#FFFF00rgb(255,255,0)高亮、选中标记绿色#008000rgb(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值使用建议主色/品牌色#1677FFrgb(22,119,255)主按钮、选中态、链接参考Ant Design主色演变成功/完成#52C41Argb(82,196,26)成功提示、通过状态、增长数据警告/待处理#FAAD14rgb(250,173,20)警告提示、待审核、居中值错误/失败#FF4D4Frgb(255,77,79)错误提示、删除操作、失败状态信息/中性#1677FFrgb(22,119,255)信息提示、引导性说明链接色#1677FFrgb(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的取色功能也很方便按一下就能吸色并自动复制到剪贴板。配色方面Coolorscoolors.co是效率很高的一个随机生成五色色板按一下空格就能换一组方案。Adobe Color支持基于色轮创建配色方案还能从图片中提取颜色主题。UI Gradientsuigradients.com内置了大量优质渐变色值做背景渐变直接复制CSS代码即可。Open Coloryeun.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.4255×0.6255绿0×0.4255×0.6153蓝0×0.4255×0.6153得到rgb(255,153,153)也就是浅粉色。如果你在Photoshop里直接把这个效果取色取到的是#FF9999而不是#FF0000就会怀疑是不是颜色翻车了。明白这个原理你就知道做这类操作时应该直接请教设计师最终期望的视觉效果而不是偷偷改色。实操心得跟设计师对齐透明度需求时最好问清楚是“图层不透明度”还是“填充不透明度”两者计算逻辑不同。还有一类写法是直接用HEX后加两位十六进制透明度比如#1677FF99后两位99代表60%透明度约合153/255这在CSS里也是合法的8位十六进制颜色格式很多设计工具导出的代码就是长这样。看到这种格式不用慌前面6位是颜色后两位是透明度。4.3 对比度不够被用户喷颜色选择也要过可访问性门槛我说一个自己踩过的坑给某个活动页配了一组浅灰背景加浅色文字看着高级结果上线后大量用户反馈看不清。原因就是前景色和背景色之间的对比度太低了。颜色搭配不仅关乎美观还直接影响可用性尤其是户外强光下用手机、视力不好的用户以及色觉异常的人群。业界有现成的衡量标准就是WCAGWeb内容可访问性指南里的对比度计算公式。简单的理解是将两种颜色分别算出相对亮度较亮的值加上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放在本地服务器或收藏夹里随时打开就能搜。这比每次临时百度又省事又准确还能自己维护更新。如果你也想凑一套建议直接从这篇文章的分类色表里挑基础色加功能色加你自己的品牌色基本就构成一个能长期用的色板库了。