十六进制与RGB颜色转换：原理、工具与设计工作流实战

1. 颜色转换不只是“复制粘贴”设计师为什么要搞懂十六进制和RGB1.1 别把十六进制颜色和十六进制文件混为一谈做设计这些年我见过不少同事在取色的时候对着一串“#F3A62B”犯嘀咕这玩意儿到底等于RGB多少也见过一些刚入行的设计同学一听到“十六进制、颜色转换”就以为是敲代码心里先怯了几分。其实十六进制在我们设计日常里出现频率极高前端开发给的标注、网页样式、甚至企业VI规范里的色值最常见的就是这种“#号开头的字符串”。很多人第一次接触“十六进制”这个词会联想到黑客、二进制、内存地址这些玩意儿觉得它跟设计八竿子打不着。实际上十六进制颜色只是一种更紧凑的记法把红、绿、蓝三个通道的数值用十六进制数字写在一起方便在代码和文档里传递。它跟我们常说的“十六进制文件编辑器”完全是两码事——前者是颜色值后者是文件字节的查看方式千万别被名字吓住。真正让我意识到设计师必须搞清楚这套转换逻辑的是一次项目对接。当时我按开发那边的标注做视觉稿随手把HEX值复制进PS里的拾色器结果色板上的颜色跟网页上差了不少。后来排查了半天发现是开发给我的十六进制值里混了带Alpha通道的八位写法我直接当成六位用了导致透明度被错误解析。从那次之后我就花时间把RGB和十六进制之间的来龙去脉彻底捋了一遍再用起来顺手多了。1.2 懂转换到底能解决什么问题说几个最实在的场景第一你在PS或Figma里取了一个颜色需要同步给前端前端可能问你要“#RRGGBB”的HEX值也可能问你要“rgb(255, 102, 153)”的RGB值两套写法都必须能快速切换。第二你在网上或者设计灵感图里看到一种喜欢的颜色用浏览器插件或者取色器拿到了十六进制想把它填入Illustrator的色板这时候就得转成RGB数值手动输入。第三你自己写个人网站、做PPT、设计落地页想用CSS或内联样式颜色代码里默认吃十六进制设计软件里默认吃RGB中间那道转换如果靠“跑一个在线网页”倒是能解决但要是不小心转换错了视觉上就是几十个色号的偏差。还有一类问题不那么显性但更磨人同一个颜色在不同软件里看会有细微差别有时候不是转换的锅而是色域和色彩模式在作怪。如果你不理解原理只会在工具里点来点去遇到色差就会抓瞎。所以这篇文章我打算从最底层的“进制”讲起配合手算、在线工具、工作流技巧和踩坑记录尽量一次性把十六进制与RGB颜色转换这件事儿说透。1.3 核心概念RGB和十六进制的对应关系我们常说的RGB是目前主流屏幕显示颜色的基础模型每个像素通过红、绿、蓝三个发光通道以不同强度混合成各种颜色。在数字设备的约定里每个通道的取值范围是0到2550表示完全不发光255表示该通道最亮三个通道叠加组合成大约1677万种颜色。十六进制则是把“0到255”这256个档位用00到FF来表示。为什么不是00到99因为二进制里4位刚好能表示0到15两个4位拼起来就是0到255而十六进制一位正好对应4位二进制写起来最简洁所以计算机底层的颜色表示普遍用它。听起来有点绕但你只要记住RGB的红色255对应十六进制FFRGB的绿色17对应十六进制11这两个数值是同一档亮度在不同的“计数系统”里的不同写法而已。打个比方RGB和十六进制就像摄氏度和华氏度同一个温度用两套刻度描述中间的数值可以互相推导但刻度起点和步长不同。理解这一点接下来所有转换方法都只是数学游戏。2. 十六进制和RGB的换算原理用小学数学就能算明白2.1 十六进制记数法到底是啥十六进制的“十六”就是基数意味着每一位数字最多只能到15超过15就要进位。它用的符号是0到9和A到F其中A代表10B代表11C代表12D代表13E代表14F代表15。我们平时最常见的十六进制颜色是六位比如#336699这个字符串拆开其实是三组两位数字33、66、99分别代表红、绿、蓝通道的亮度。在十六进制里一个两位数的计算规则是第一位高位乘以16第二位低位乘以1然后相加。看起来抽象实际操作很简单比如“33”先看第一位3它代表3个16也就是48再看第二位3代表3个1也就是3两者相加等于51。所以十六进制“33”在十进制里就是51。同理“FF”就是15×1615等于255。这个规则是后面所有手工转换的基础请你务必记住。为什么这里要乘以16而不是10因为这是十六进制而不是十进制。我们在十进制里看“33”高位3代表30低位3代表3其实也是“高位乘以基数10”只不过平时太熟练所以忽略了。换成十六进制只要把“10”换成“16”逻辑一模一样。2.2 从十六进制颜色到RGB手工拆解现在给你一个最常见的任务从设计稿或者网页上复制到一串“#336699”想知道它对应的RGB数值是多少。第一步去掉最前面的“#”号剩下六个字符336699。第二步六位数字从左往右两两分组33、66、99。第三步把每一组从十六进制转成十进制333×16351666×166102999×169153于是#336699对应的RGB就是51, 102, 153。如果你去PS或Figma里输入这个RGB数值得到的颜色和直接用#336699定义的颜色从算法上没有区别。这个结果可以被前端直接写成rgb(51, 102, 153)也可以保留原HEX格式。如果遇到带字母的值比如#A0B2C4同样拆开A0、B2、C4。A在十六进制里对应10所以A0表示10×160160B对应11B2表示11×162178C对应12C4表示12×164196。最终RGB就是160, 178, 196。这类计算只要多练几遍几秒钟就能完成。2.3 从RGB到十六进制除16取余法反过来设计软件里显示RGB数值开发要你用十六进制标注这时候要把每个通道的十进制数值转成两位十六进制。方法叫“除16取余”。以RGB51, 102, 153为例红色通道51用51除以16商是3余数是3所以结果是33。商作为第一位余数作为第二位。绿色通道102102÷166余6结果是66。蓝色通道153153÷169余9结果是99。三组拼接起来就是#336699。再举一个涉及到字母的例子RGB255, 178, 196。红色通道255255÷1615余1515在十六进制里是F所以是FF。绿色通道178178÷1611余211是B所以是B2。蓝色通道196196÷1612余412是C所以是C4。组合出来就是#FFB2C4。有一个容易踩的坑当商的数字是0到9时直接写字但当余数或商是10到15时必须用A到F表示不能把余数写成两位数。比如RGB255, 0, 0红色255÷1615余15写作FF绿色0÷160余0写作00蓝色也写作00结果是#FF0000。如果你把0误写成“0”这个字符没问题但如果你把15直接写成“15”两个字就会变成“F15”那就彻底错了。还有个补充规则如果某个通道的数值转出来只有一位比如RGB0, 0, 255里的0变成0可以写作0但颜色需要两位一组所以必须补成00否则整个字符串长度就不对。很多在线工具会忽略这种前导零但手写的时候一定要保留。2.4 心算技巧记住常用值实际工作里我们不太可能每次都用除法去算。我的做法是记一组关键数值每隔16的RGB亮度值对应进十六进制后都是“对称”的规律。十进制0对应0017对应1134对应2251对应3368对应4485对应55102对应66119对应77136对应88153对应99170对应AA187对应BB204对应CC221对应DD238对应EE255对应FF。为什么要记它因为日常看到的颜色值很多都落在这几个基准附近。比如看到#4488CC你立刻能估出RGB大约在68, 136, 204附近这比复制到工具里再换算要快得多。尤其是你在调节颜色明暗、做色阶过渡的时候用这个心算表可以边改边预测。十进制值十六进制值十进制值十六进制值000136881711153993422170AA5133187BB6844204CC8555221DD10266238EE11977255FF比如你看到#B0C0D0可以估算B0大约是176C0大约是192D0大约是208再看具体字母对应的数值B表示11C表示12D表示13低位0不变所以精确值是176, 192, 208。心算不仅让你对颜色更敏感也能减少对工具的依赖。3. 设计师的工作流几个取色换色场景的实操步骤3.1 从设计软件里直接取到十六进制Photoshop和Figma可能是设计师最常用的工具它们的取色流程其实已经非常顺手了。在Photoshop里选中吸管工具在画布上单击后右下角的“前景色”色块会变成你吸取的颜色双击这个色块就能打开拾色器。拾色器底部有一行“#”开头的输入框显示的就是十六进制色值比如#F3A62B。如果你需要的RGB数值拾色器左侧红绿蓝三个输入框也会同步显示对应的十进制值。我自己的习惯是需要给前端写标注的时候就直接在PS里看HEX值复制过去需要往矢量软件里输入颜色的时候就照着RGB的三个数字填。Figma更直白一些选中一个带颜色的图层右侧设计面板里会有“Fill”色块点击展开后能看到颜色编辑区域它同时显示HEX值和RGBA值。Figma里比较方便的一点是可以直接复制十六进制而且支持带透明度的写法比如“#FFB2C4”它会在显示区域直接给出。如果你从浏览器复制了一个十六进制颜色想粘到Figma里直接在Hex输入框粘贴就能生效它会自动解析。另一个容易被忽略的工具是系统自带的屏幕取色器。macOS用户按ShiftCommandControl4 然后按空格或者使用“数码测色计”应用Windows下也可以使用PowerToys的取色器。这类工具的好处是脱离设计软件也能取屏幕上的任意颜色比如你看网页上一个按钮颜色不错直接就能取到HEX值省去了截图再导入的步骤。3.2 浏览器开发者工具取色这个方法比截图软件还方便很多设计师不知道浏览器自带的开发者工具就是一个顶级取色器不需要安装任何插件。打开任意网页按F12或者右键选择“检查”进入开发者工具后点击左上角的方框加箭头图标光标取色模式然后移动鼠标到页面上任意元素上对应元素会被高亮点击它就能在“Elements”面板的计算样式里看到该元素的颜色。这里要留意样式里的颜色通常会显示成HEX也可能会被浏览器自动换算成rgb()或rgba()。比如你在某个div的background属性里看到#F3A62B下面一行可能还会显示rgb(243, 166, 43)。如果你点击属性左边的那个小色块会弹出颜色选择器里面有一个吸管工具可以在整个浏览器窗口内取色这比截图再导入PS要快得多。我在做前端协作时经常用这个方法验证“设计稿里的颜色到底和网页上渲染的颜色差多少”。把鼠标移到页面背景上看它解析出来的HEX值和我在Figma里定的HEX值是否一致。如果一致说明开发那边没有调色如果不一致基本是某个环节把色值写错了。这里提醒一句浏览器里显示的RGB值默认是CSS的写法“rgb(243, 166, 43)”和设计师常说的“RGB数值”是同一个东西只是格式上多了“rgb()”的函数壳。转换的时候把里面的三个数字取出来就行。3.3 从图片里提取RGB值从截图到代码的快捷方式有时候手头只有一张设计稿截图或者是从网上找的参考图你想取出其中某个像素的颜色。最简单的方法是用截屏工具截取那个区域然后在PS里打开用吸管工具取色。不过如果图片很多或者你正在写一些小工具那就需要更自动化的方式。一个我非常推荐的思路是用Python的PIL库几行代码搞定。假设你有一张图片“sample.png”想读取坐标为(x200, y150)处像素点的RGB值可以这样写from PIL import Image img Image.open(sample.png) rgb img.getpixel((200, 150)) print(rgb) # 输出例如 (243, 166, 43)如果你想把RGB转换成十六进制也很简单hex_value #{:02x}{:02x}{:02x}.format(rgb[0], rgb[1], rgb[2]) print(hex_value) # 输出例如 #f3a62b这里要注意PIL读取的坐标是以左上角为原点x是从左往右y是从上往下和Photoshop的坐标系一致。如果你面对的是几十张图片需要把每个画面里某个固定位置的颜色提取出来并归类这种脚本能比手动吸管节省非常多时间。当然如果只是临时取一张图打开“调色板”类的在线工具也能直接上传图片选择颜色。这类工具通常支持上传之后用鼠标点击图片任一位置自动显示该点RGB和HEX效率很高。不过涉及图片上传时要注意隐私如果是商业项目里的敏感视觉稿我建议用本地工具或Python脚本处理不要随便丢到第三方网站上。3.4 批量色板转换用表格和在线工具统一处理真正做品牌项目的时候一个色板里往往有十几种颜色每种颜色都需要同时提供HEX、RGB甚至CMYK。如果一个个用计算器转换容易出错也不够高效。我的做法是先用在线工具批量生成再把结果整理进一个共享表格里方便团队成员随时查看。Excel里其实也有进制转换函数。假如A1单元格里存的是“#336699”想分别拆出红、绿、蓝数值可以用MID把中间的两个字符取出来再用HEX2DEC函数转成十进制。比如红色可以写HEX2DEC(MID(A1,2,2))MID(A1,2,2)会从第2个字符开始取两位正好是“33”HEX2DEC会把“33”转成51。同理绿色是MID(A1,4,2)蓝色是MID(A1,6,2)。反过来如果B1、C1、D1分别是R、G、B的数值拼接HEX可以用#RIGHT(0DEC2HEX(B1),2)RIGHT(0DEC2HEX(C1),2)RIGHT(0DEC2HEX(D1),2)这个公式里RIGHT函数是为了确保数字小于16时前面补0比如R0时DEC2HEX(0)返回0RIGHT(00,2)就是“00”这样生成的十六进制始终是六位。批量下拉填充之后整张色板就转换完了而且公式是活的修改原始数值时HEX会自动更新。在线批量工具我也用过一阵但后来发现只要表格公式搞定了我根本不需要多开一个网页还能保证格式统一。如果你懒得搭表格也可以找支持“批量输入颜色列表输出两种格式”的在线工具一般丢进去一组#开头的字符串它能把对应的RGB以列表形式导出。不过这类工具的使用频率不算高我建议优先掌握Excel公式毕竟表格文档在团队协作里更容易保存和复盘。4. 在线工具推荐选对工具效率翻倍4.1 我常用的几款在线转换器设计师日常求快一些在线转换工具确实省事。我用过比较顺手的包括浏览器开发者工具自带的取色面板不用额外安装随时打开F12就能用支持HEX、RGB、HSL等格式切换还能直接微调颜色。网页版的颜色转换器你在搜索引擎里搜“color hex converter”或“十六进制 RGB 转换”能找到大量免费工具。它们通常有一个大色块预览左边输入HEX右边自动显示RGB支持反向输入有的还提供色轮和对比度计算。Adobe Color不但能生成色板还能把现有HEX转成RGB并且提供配色方案灵感。做品牌色板时我经常用它检查颜色之间的关系。Coolors它是配色方案生成工具也内置了颜色格式切换点一下就能看到HEX、RGB、HSL等多个版本。这些工具的核心逻辑都一样所以没有哪家是绝对最强的。我的建议是你固定用一款熟悉的把它的交互方式摸透比每次临时找新工具更高效。我自己用得最多的是浏览器内置的取色面板因为不需要切出设计软件按一下F12就能解决。4.2 怎么判断工具是否靠谱在浏览器的搜索结果里颜色转换器五花八门但并不是每个都靠谱。按我的踩坑经验至少要看这几点。第一必须支持双向转换。也就是既能输入HEX得到RGB也能输入RGB得到HEX。很多简单工具只支持单向临时要用反向还得再找别的网站效率反而降低。第二要有实时颜色预览。当你输入一个值旁边最好立刻就出现对应的色块如果连预览都没有你根本不知道转换结果对不对。第三要能处理#号、空格和大小写。正规工具应该兼容#336699和336699两种写法也应该接受rgb(51, 102, 153)和“51 102 153”这样的输入。第四最好支持缩写形式比如#FFF扩展成#FFFFFF这一点对设计师来说很实用。安全方面同样不能忽视。需要上传图片的取色工具要谨慎使用商业稿件和高保密性质的素材。我更推荐使用纯本地处理的软件或浏览器自带功能。另外有些网站会弹出大量广告稍不留神就点进去了尽量选择界面简洁、没有恶意弹窗的知名工具。如果某个网站让你觉得广告蔽屏且操作混乱果断换一个别在破体验上耗时间。4.3 工具之外的“配色思维”别让转换工具替你决定颜色工具能帮我们完成数值转换但有一件事它做不了告诉你这个颜色放在你的设计里到底合不合适。转换工具只是把颜色的“描述方式”从HEX换成RGB颜色本身的视觉感受不会变但它不会帮你判断这块颜色和旁边的按钮是否协调也不懂你的品牌调性。我在带团队的时候见过一种依赖工具过度的情况同事拿着随手在线工具生成的色板直接套进视觉稿理由是“这个工具里看挺好看的”。问题在于在线工具展示的背景色、周围环境色和你最终产品的真实界面差别很大同一个颜色在不同背景下看起来会有完全不同的感觉。所以在确认颜色的最终格式之前一定要回到你的设计文件里放到真实的界面组件中去观察。另外转换工具显示的颜色都是在你的显示器上渲染出来的不同显示器色准不一样。如果你要做印刷品最终的RGB和HEX定义还需要对齐色彩管理流程不是十六进制转换能解决的。说到底理解转换是为了更顺畅地协作而不是让工具代替你判断设计质量。5. 那些年我踩过的颜色坑常见问题与排查技巧5.1 #FFF和#FFFFFF是一回事吗很多新手第一次看到CSS文件里写#FFF以为是把#FFFFFF省写了三个字符实际上这里的省写规则并不是随便去掉几位而是“当每个通道的两位数字相同时可以各保留一位”。比如#FFFFFF变成#FFF是合法的因为FF、FF、FF每一组都是重复的字符。#336699就不能缩写成#369因为33和36并不相等缩写之后会造成颜色完全改变。这个规则在浏览器里已经默认支持所以前端在写代码时经常用简写形式。但你在设计软件里输入颜色时有些工具的输入框只认六位你输入三位它可能不识别或者会按另一个规则解析。为了避免沟通歧义我建议所有对外标注都统一用六位HEX即使前端喜欢简写他们自己会转换但标注里写清楚总不会错。还需要注意大小写十六进制颜色不区分大小写#a1b2c3和#A1B2C3是完全等价的。但为了团队协作一致最好固定用大写还是小写。我在公司规范里统一用小写因为大多数在线工具生成的都是小写而且视觉上更清爽。5.2 颜色偏色先检查色域和色彩模式有时候你明明在Figma里选了#336699导出PNG后放到浏览器里一看颜色变灰了或变艳了第一反应是不是转换出了问题其实大多数时候问题出在色彩模式上。RGB颜色并不是绝对统一的它依赖具体的色域sRGB是网页和普通显示器的主流标准Display P3是苹果设备的广色域Adobe RGB更常用于印刷校样。同一个十六进制值在不同色域下会被设备用不同的“伽马曲线”显示所以视觉上存在差别。解决办法是在设计软件里统一色彩配置。Figma默认是sRGB通常问题不大Photoshop里如果图片被标记成了Adobe RGB导出为网页用格式时又没做转换颜色就会发生变化。所以我的一般流程是设计稿、导出、前端页面三者的色彩空间都设置为sRGB这样HEX和RGB都能一一对应。如果确实需要广色域工作流就要明确告知团队所有颜色以数字值为准不要用眼睛在不同设备上对比。另外CMYK到RGB的转换是另一个大坑。平面设计要求印刷品时通常用CMYK而十六进制和RGB都是基于屏幕发光的两者本质不同。从CMYK转到RGB再取HEX会丢失一部分色域颜色看起来更亮或者更艳。这种转换是“近似”而不是“等价”需要心理准备不要以为用工具转出来的十六进制就能完全复现印刷效果。5.3 透明度怎么表示十六进制颜色最常见的扩展是加上透明度通道写成#RRGGBBAA最后两位是Alpha值。例如不透明的#336699等价于#336699FF因为FF是不透明。如果要表示50%透明度就用128的十六进制128除以16等于8余0所以是80写成#33669980。这个方法在CSS里可以通用但很多设计软件的拾色器并不直接支持八位HEX于是需要转换成rgba()。在CSS里rgba(51, 102, 153, 0.5)就相当于#33669980其中Alpha范围是0到10.5代表50%。如果设计师给前端的标注是“颜色#336699透明度50%”前端通常会自己换算成rgba(51, 102, 153, 0.5)。如果你能直接写出#33669980对前端来说会更省事但这需要你理解八位HEX的规则。我在实际工作中遇到过把透明度误当成颜色的情况同事把#33669980整个复制到设计软件里结果拾色器把前六位解析成了#336699忽略了后面两位导致颜色不透明。这个问题的根源在于设计软件对颜色字符串的解析能力参差不齐。安全做法是在设计规范里明确写清楚透明度和HEX分开传例如“#336699 / 50%”避免歧义。5.4 验证转换结果是否准确如果担心哪里转换出错有一个非常直观的验证方法在同一个网页或设计文件里用两种格式分别定义同一个颜色并排放在一起对比。比如在HTML里写两个相邻的div一个背景色是#336699另一个是rgb(51, 102, 153)然后用截图工具对比两个区域。如果完全相同说明转换无误如果肉眼能看出分界线说明某个环节有问题。我自己的加速验证方法是用浏览器的控制台快速渲染。打开一个空白HTML文件直接写入CSS代码用浏览器打开就能同时看两个色块。这样比在设计软件里反复检查更快尤其是需要验证透明度时更明显。还可以用取色器分别取两个色块对比它们解析出的HEX是否一致如果一致基本可以放心了。另外要提一句验证时不要把眼睛完全相信显示器。如果你发现色块在两个格式下看起来一致但和设计稿里的原始色块又有差异那基本是色域问题而不是转换问题。这时候可以截图并读取屏幕上的RGB值再做一次交叉验证判断到底是哪个环境在影响显示。6. 最后再分享一个我自己的小习惯关于十六进制与RGB颜色转换其实说到底不是一门复杂的学问但它贯穿在日常设计协作的每一个角落。我个人的经验是不要依赖某一个在线工具尽量在自己的工作流里建立一套固定的转换方案。我把常用的HEX与RGB对照表放在一个共享的Excel文档里里面既有公式也有历史项目沉淀下来的色板每次做新项目直接复制下载下来改色值就行。这样统一了团队的标注口径再也没有一个人给HEX、一个人给RGB的混乱。还有一个习惯很值得推荐在给前端交付设计稿时我会专门在标注文档里加上一行“颜色值规范”统一用“#RRGGBB”格式并同时附上RGB数值的写法例如“#336699 / rgb(51, 102, 153)”。虽然看起来有点重复但这个小小的动作能帮团队省掉非常多的来回确认。最后再分享一个小技巧如果你经常需要在十六进制和RGB之间手动换算试着把前面那张0到255的十六进制对照表打印出来贴在工位边上。你在电脑上熟练操作工具之外心算能力也能跟着提升偶尔遇到网络不通或者临时没工具的情况自己也能应付几笔。颜色转换不是难点但提前把它弄得明明白白确实能让你的设计工作顺畅不少。