颜色转换
HEX、RGB、HSL 互转，自动给出明暗变体与配色
取色 / 输入
支持 HEX、RGB、HSL 三种写法，自动识别
转换结果
| 格式 | 值 |
|---|
配色派生基于当前颜色自动生成
关于颜色转换
设计稿给的是 #2F6DF6，代码里要写成 rgb(47,109,246)，做暗色主题时又要在 HSL 空间里调亮度 —— 几种颜色格式混着用很容易算错。本工具在 HEX、RGB、HSL、HSV 之间即时互转，输入任意一种格式，其余同步更新；还会基于当前颜色生成深浅变体和互补色，做悬停态、禁用态配色时直接取值就行。
主要功能
- HEX / RGB / HSL / HSV 实时互转
- 拖动滑块调色，所见即所得
- 自动生成明暗变体与互补色
- 一键复制 CSS 变量格式代码
- 显示颜色对比度，辅助判断可读性
使用方法
- 输入颜色值，或用取色器选取
- 其余格式自动同步显示
- 从变体区挑合适的深浅色
- 点复制得到可直接粘贴的 CSS 代码
常见问题
HSL 和 RGB 该用哪个？
需要程序化调色时用 HSL 更方便 —— 它的三个分量是色相、饱和度、亮度，调亮只改亮度分量。RGB 更接近显示器实际输出，做精确控制时用。
生成的明暗变体是怎么算的？
在 HSL 空间里固定色相和饱和度，只调整亮度分量得到。这样生成的深浅色色调一致，做悬停态和禁用态时视觉上不会跑偏。
转换会有色差吗？
换算是精确的，没有近似。但原始 HEX 本身精度有限，转到 HSL 后取整可能有极小误差，肉眼不可见。