颜色转换器把同一个颜色的四种写法放在一起：HEX、RGB、HSL、HSV。你从设计稿抄来一串 #4F46E5，粘进 HEX 那一栏，RGB、HSL、HSV 会立刻跟着算出来；反过来，只知道 rgb(79, 70, 229) 也能倒推出其余几种。除了直接输入，还能用取色器挑色，或者拖动色相、饱和度、明度三条滑杆微调，调完每个格式都能单独复制。
几种写法的关系其实不复杂：HEX 就是把红、绿、蓝三个分量各写成两位十六进制，所以 #FF0000 的三段分别是 255、0、0，换成十进制就是 rgb(255, 0, 0)；HSL 和 HSV 则换了个角度描述同一个颜色，前者用色相、饱和度、明度，后者用色相、饱和度、明度（两者的明度含义不同）。下面把这几种写法的换算规则、缩写约定和边界一次讲清楚。
HEX 和 RGB：同一件事的两种写法
HEX 与 RGB 说的是同一个颜色，只是进制不同。#RRGGBB 里每两位是一段，按十六进制读出来就是红、绿、蓝三个分量的十进制值：FF=255、80=128、33=51。所以 #FF0000 对应 rgb(255, 0, 0)，#808080 对应 rgb(128, 128, 128)。反过来，把 RGB 的每个数字转成两位十六进制再拼起来，就是 HEX。记住 FF 是 255、00 是 0 这条基准，两个方向都能心算。
为什么 #FFF 能缩写、有些颜色不能
CSS 允许把六位的 #RRGGBB 缩写成三位的 #RGB，条件是红、绿、蓝每一段的两个字符完全相同。#FFFFFF 三段都是 FF，可以缩成 #FFF；#FFCC00 是 FF、CC、00，三段各自成对，也能缩成 #FC0。反过来，像 #FF8000 就不能缩：绿段是 80，两个字符不一样，硬缩成 #F80 会被浏览器读成 #FF8800，颜色就变了。判断能不能缩写只看一条：每一段是否两两相同；拿不准就老老实实写全六位。
HSL 和 HSV：换个角度描述同一个颜色
HSL 和 HSV 都从色相出发，但另外两个参数不同。色相 H 是 0~360 的度数，红在 0 度、绿在 120 度、蓝在 240 度，绕一圈回到红。HSL 的另两个参数是饱和度 S 和明度 L，都是 0~100%：L 是 0 时不管 S 多少都是黑，L 是 100% 时都是白，所以纯色都落在 L=50% 那一层。HSV 把明度换成 Value（明度/亮度），同样是 0~100%，但它描述的是颜色有多亮，纯色的 V 是 100%。同一个红色，在 HSL 里是 hsl(0, 100%, 50%)，在 HSV 里是 hsv(0, 100%, 100%)，数值不同，指向的却是同一个颜色。
取色器和明暗微调怎么用
改色有两种方式。一是取色器：点开色块，从系统调色盘里选一个颜色，HEX、RGB、HSL、HSV 会一起更新，适合手头有一张截图、想精确抄下某个点的颜色。二是滑杆微调：拖色相改变色系，拖饱和度让颜色更艳或更灰，拖明度让整体变亮或变暗——这一条在「主题色已经定了、只想再亮一点或暗一点」时特别顺手。微调之后，每个格式都能单独复制，粘进 CSS、设计软件或配置文件都行。
按 sRGB 换算：不做色彩管理与色域转换
边界讲清楚。第一，它按 sRGB 做近似换算，不做色彩管理，也不做色域转换；印刷用的 CMYK 和潘通（Pantone）色号它不换算——那是专业排版和印前软件的事。第二，它不推荐配色方案，也不生成调色板，只负责把单个颜色在几种写法之间来回转。第三，它不能直接从图片里取色，想从截图取色得借助系统的取色器或专门的工具。第四，它只处理颜色本身的换算，不判断你选的颜色搭不搭、对比度够不够。
什么时候别用它：它只是一个颜色写法翻译器
如果你要的是一整套协调的配色，它帮不上忙，那属于配色工具的范畴；如果你要把颜色送进印刷流程，CMYK 和专色它给不了，得用印前软件；如果你想一次批量处理一堆颜色，它一次只转一个，也不合适。反过来，日常写前端样式、改主题色、抄设计稿标注，它刚好够用。把它当成一个「颜色写法翻译器」，而不是设计工具，就不容易用错地方。
参考资料
常见问题
#FF0000 换成 RGB 是多少？
#FF0000 就是 rgb(255, 0, 0)。十六进制每两位一段：FF=255、00=0、00=0，分别对应红、绿、蓝三个分量。
为什么 #FFF 和 #FFFFFF 是同一个颜色？
三位写法是六位写法的缩写，规则是把每个字符重复一次：#FFF 展开就是 #FFFFFF。只有当红、绿、蓝每一段的两个字符都相同时才能这样缩写，比如 #FF8000 就不能缩。