互转只需在任意一格输入颜色值：填 HEX、RGB 或 HSL 中任何一种写法，预览条、取色器与另外两种格式立刻同步换算，全程实时、无需点击按钮。
三种写法分别用在哪
同一个赭红色可以写成 #9a3412、rgb(154, 52, 18) 或 hsl(14, 79%, 34%)。设计稿与 CSS 里最常见的是 HEX；程序里按通道做混合、计算亮度时 RGB 三元组直观；调色与找相近色相时 HSL 更符合眼睛的直觉——色相、饱和度、明度各自独立，改一个数不牵动另外两个。这款颜色工具把三种写法并排放好，输入即换算。
两个取色入口
一是点「取色」行的色块，会调出系统选色面板，桌面端还能用其中的吸管从屏幕任意位置直接取色；二是把别处抄来的色值粘进 HEX 框，工具接受三位缩写与六位全称，少打几个零也能识别。RGB 与 HSL 框同样宽松，认出其中的三个数字即完成换算，写法稍有出入不影响解析。
调色板：同色系的深浅梯队
页面下方的调色板围绕当前主色自动生成八块由深到浅的梯度色，方向是逐步向白色混合。点任一格，它的 HEX 会被复制到剪贴板并立刻成为新的主色；搭按钮常态与悬停态、描边、浅背景这类同族色阶时，比手调数值快得多。
微调深浅别动色相
想让一个颜色更亮或更沉，正确做法是改 HSL 的明度分量：往上变亮、往下变暗，色相不漂移；直接改 RGB 则三个通道容易失衡，颜色会「变味」。同理，降低饱和度得到的是莫兰迪式灰调版本，适合做大面积背景。
使用技巧
- 从设计稿或网页拿到 HEX 后，第一时间点调色板选一格浅色调背景，一套色板就齐了。
- 核对解析是否成功：看预览条与取色器色块是否同步变色，两边一致即写入有效。
- 需要一串中性灰时，先把主色饱和度降到个位数再取调色板，得到干净的冷灰系。
- 三位缩写如 #f60 与六位全称等价，交接规范时统一写成六位，减少沟通歧义。
常见问题
hex 和 rgb 怎么互相换算？
把六位 HEX 按两位一组拆成红、绿、蓝三个十六进制数，各转十进制即得 RGB；反向把三个十进制数各写成两位十六进制再拼接即可，页面已内置该换算。
带透明度的颜色能处理吗？
输入框识别的是不含透明通道的纯色写法，RGBA 值中的前三个数字仍会被读入换算，透明度需在设计稿或代码里另行标注。
手机上怎么取屏幕里的颜色？
系统吸管的屏幕取色一般只在桌面端可用；手机可先截图，用相册自带取色功能得到 HEX，再粘进工具补全 RGB 与 HSL。
小结
颜色写法之争没有输家，会互转才能在设计、开发、文档各环节无缝传递；取色、换算、生成色阶，一个页面全部完成。