HEX 转 RGB · 颜色格式转换
输入 HEX / RGB / HSL 任意一种格式，自动转换为其他两种。支持颜色关键字。
三步上手
- 1输入：粘贴 HEX / RGB / HSL 任意一种（也支持 red、navy 等关键字）。
- 2自动转换：其余两种格式即时算出，无需手动切换。
- 3复制：点结果一键复制你要的写法粘进 CSS。
颜色格式转换
输入任意颜色值，实时得到 HEX、RGB、HSL 三种格式。
#2457D6rgb(36, 87, 214)hsl(223, 72%, 49%)支持 #RGB、#RRGGBB、rgb()、rgba()、hsl()、hsla() 及颜色关键字（如 red）。
HEX 如何转为 RGB？
HEX 颜色值形如 #RRGGBB，将 RR、GG、BB 三组两位十六进制数分别转换为十进制，即可得到 RGB 的红、绿、蓝三个分量（0-255）。例如 #FF6633 → FF=255、66=102、33=51，即 rgb(255,102,51)。
HEX、RGB、HSL 三种格式如何选择？
HEX 书写简洁，适合直接写在 CSS 中；RGB 便于按通道调整；HSL 按色相/饱和度/明度描述，更符合人对颜色的直觉，调整配色时更方便。
支持简写 HEX 吗？
支持。#RGB 形式（如 #f63）会自动展开为 #RRGGBB（#ff6633）。
颜色格式转换：原理、写法与常见坑
HEX 用十六进制写 RGB 三个通道：#RRGGBB 里 RR、GG、BB 各占两位，取值范围 00–FF（0–255）。
把每组两位转成十进制就得到 RGB 分量，例如 #FF6633 → FF=255、66=102、33=51，即 rgb(255,102,51)。
当每组的两个字符相同时可简写成三位（#f63 = #ff6633），浏览器会自动展开。
RGB 是同一份信息的十进制写法，做计算最方便：混色、透明度运算、Canvas 绘制都在 RGB 空间完成。
现代 CSS 支持空格写法与透明度通道，如 rgb(255 102 51 / 0.6)，
不必再单独维护一份 rgba 记法。
HSL 用色相（0–360）、饱和度、亮度三个维度描述颜色，是最适合手工调整的表示法： 亮度是一条独立轴，把按钮的 hover 态改暗只需调低 L，色相不会跑偏。 这也是设计稿里微调配色时优先用 HSL 的原因。
需要留意的是颜色关键字。red、teal、rebeccapurple 这类关键字由 CSS 规范定义，
数量有限且有些名字与直觉不符（例如 darkgray 实际比 gray 深，但 lightgray 与 gray 的差距并不直观），
正式项目里建议统一用数值写法，便于比对与复用。
另外两个常见误区。其一，HEX 与 RGB 的转换是无损的，但转成 CMYK（印刷四色）会掉色：
屏幕是发光、纸张是反光，可印刷色域比 sRGB 窄，鲜艳的电光蓝和亮橙印出来往往发闷。
其二，不同色彩空间数值含义不同：rgb() 默认在 sRGB 空间，
而 color(display-p3 …) 这类广色域写法在支持 P3 的屏幕上能显示更饱和的颜色，
把同一组数值直接搬到另一个空间会偏色。
本工具的所有转换都在浏览器本地完成，输入的颜色值不会上传； 转换结果可直接点击复制，粘贴到 CSS、设计标注或代码里使用。
落地建议：一个项目里统一一种书写形式（推荐 HEX 或 rgb() 的空格写法），
并把主色、辅色、语义色写成 CSS 自定义属性，避免同一个颜色在不同文件里有三种写法、
后期无法全局替换。交接或走查时，用本工具把设计稿标注值与线上实测值各算一遍，
两边一致才算还原正确。