写前端样式，颜色一会儿用井号加六位十六进制，一会儿用rgb括号三个数字，其实是同一个东西，但怎么互转很多人靠在线工具，根本没搞懂原理。其实HEX和RGB的换算就是十进制和十六进制的转换，懂了十六进制，闭着眼也能互转，不用每次开工具。
先搞懂十六进制
我们平时用的十进制逢十进一，数码零到九。十六进制逢十六进一，数码零到九加A到F，A代表十，B十一，一直到F代表十五。一个十六进制位能表示零到十五共十六个数，两个十六进制位能表示零到二百五十五，正好对应RGB一个通道零到二百五十五的范围。这就是为什么颜色用十六进制，两位一个通道刚好够。
十进制转十六进制的算法是除十六取余。比如二百五十五，二百五十五除以十六等于十五余十五，十五对应F，所以两位是FF。比如二百，二百除以十六等于十二余八，十二对应C，所以是C8。反过来十六进制转十进制是高位乘十六加低位。比如八十八，高位八乘十六加低位八等于一百三十六。FF就是十五乘十六加十五等于二百五十五。
HEX格式怎么读
HEX颜色写法是井号加六位十六进制，从左到右每两位一组，分别代表红绿蓝三个通道的强度，范围都是零零到FF对应零到二百五十五。比如FF0000是纯红，红通道FF即二百五十五最大，绿蓝都是零。00FF00纯绿，0000FF纯蓝。FFFFFF全亮是白色，000000全灭是黑色。FF8800就是红二百五十五绿一百三十六蓝零，一个橙色。
记住每组两位是一个通道，前两位红中两位绿后两位蓝，顺序千万别记反。很多人把顺序记成RGB对应位置没错，但读数时把高位低位搞混，比如把8F读成一百四十三，其实是八乘十六加十五等于一百四十三，没错，但把F8读成二百四十六，其实是十五乘十六加八等于二百四十八，高位低位颠倒就错一个十六的倍数。
RGB和HEX互转
从RGB转HEX，把每个通道的十进制数转成两位十六进制拼起来加井号。比如rgb(255,136,0)，二百五十五转FF，一百三十六转八十八，零转零零，拼起来FF8800加井号是井FF8800。从HEX转RGB反过来，把每两位十六进制转回十进制。井FF8800，FF二百五十五，八十八一百三十六，零零零，得rgb(255,136,0)。
速算技巧：常见的几位记住。FF是二百五十五，CC是二百零四，九九是一百五十三，六六是一百零二，三三是五十一，零零是零。这些是网页设计里常用的等级色，记住了能快速估算。比如CCCCCC就是每个通道二百零四，浅灰。
3位简写和透明度
HEX还有一种三位简写形式，比如F00等价于FF0000。规则是每个字符重复一次，F变FF，零变零零，所以F00展开是FF0000。简写只能表示每通道高低位相同的颜色，也就是零三六九C和F这些值，比如3F6展开是33FF66。不是所有颜色都能简写，FF8800不能简写因为八十八高低位不同。
还有带透明度的八位HEX，井号后八位，前六位RGB后两位是透明度通道alpha，也是零零到FF对应零到一。比如FFFFFFFF就是不透明白色，FFFFFF80就是半透明白色，八十即一百二十八对应约零点五透明度。CSS里也能用rgba括号第四个参数表示透明度，零到一的小数。
常见问题
【为什么FF是255不是256？】因为从零开始数，零零到FF共二百五十六个数，最大值是二百五十五。跟数组下标一个道理。零到二百五十五共二百五十六个值，不是一到二百五十六。
【RGB和HEX哪个更准？】一样准，是同一个颜色的两种表示，没精度差别。选哪个看场景，CSS里都能用，设计软件常给HEX，JS算颜色时RGB数字好运算。
【HSL又是什么？】HSL是另一种颜色表示，用色相饱和度亮度，色相零到三百六十度对应色环位置。HSL调色更直观，想变亮调L变饱和调S，不像RGB要同时动三个通道。三者能互转，做配色时HSL更顺手。
【十六进制速算有口诀吗？】记住每通道十六的倍数：十六三十二四十八六十四八十九十六一百十二一百二十八一百四十四一百六一百七十六一百九十二二百零八二百二十四二百四十二百五十五，对应十六进制的10到FF。看到两位HEX，高位乘十六加低位就是十进制，反过来除十六取余。
