设计稿上标着 rgb(64, 158, 255),CSS 里要填 #409EFF,手边没有取色器,只能掰着手指算。rgb转16进制 的规则就一句话:三个通道各转两位十六进制,拼起来加 #。
255 为什么是 FF
十六进制一位表示 0 到 15,两位正好覆盖 0 到 255。255 除以 16 得 15 余 15,也就是 FF;64 除以 16 得 4 余 0,写作 40;158 除以 16 得 9 余 14,写作 9E。合起来就是 #409EFF。余数小于 10 直接写数字,10 到 15 用 A 到 F。
缺位要补零。10 除以 16 得 0 余 10,结果是 0A,前面的 0 不能省。CSS 里 #0A0A0A 和 #AAA 不是一回事,#AAA 会展开成 #AAAAAA。三位简写只在每组两位相同时才能用,#FFCC00 可以写成 #FC0,#409EFF 不行。
代码里怎么批量转
Python 一行:'#{:02X}{:02X}{:02X}'.format(r, g, b)。JavaScript 可以 (r << 16 | g << 8 | b).toString(16).padStart(6, '0'),前面再补 #。padStart 必须补到 6 位,否则 0,0,255 会变成 ff,颜色就错了。
反方向把 #409EFF 拆成 40、9E、FF,分别 parseInt(x, 16),得到 64、158、255。带透明度的八位写法 #RRGGBBAA 多两位,Alpha 取值 0 到 255;rgba() 里第四个参数是 0 到 1 的小数,两套体系别搞混。
几个能背下来的色值
白 255,255,255 是 #FFFFFF,黑 0,0,0 是 #000000,纯红 #FF0000,纯绿 #00FF00,纯蓝 #0000FF。灰色三通道相等,128 左右是 #808080。设计师给百分比时先乘 2.55 再取整,rgb(100%, 0%, 0%) 才是纯红。
不想手算就打开浏览器开发者工具,点颜色块弹出取色器,HEX 和 RGB 能互相切换,Photoshop、Figma 的色板也一样。rgb转16进制 最容易错的是漏补零和把百分比当 0 到 255 用,对着这两个地方检查,基本一次就对。