使用步骤
- 点击取色器，在系统颜色面板中挑选颜色；或直接在 HEX 文本框输入颜色值（支持 #3a7bd5 和 #fff 简写）。
- 取色器与文本框双向联动：任意一边改动，另一边与下方数值、色块预览同步更新。
- 在结果区查看 HEX、RGB、HSL 三种格式的数值，点击每行右侧的「复制」按钮复制该格式。
- 把复制的颜色值直接粘贴到 CSS、设计稿或代码中使用。
HEX、RGB、HSL 分别适合什么场景？
HEX（如 #3a7bd5）是前端最常用的写法，紧凑、好复制，适合直接写进 CSS；RGB（如 rgb(58, 123, 213)）把红绿蓝三通道分开表示，调通道、做透明度（rgba）时更直观；HSL（如 hsl(210, 50%, 40%)）用色相、饱和度、明度描述颜色，最符合人的直觉——想调「更亮一点」「更灰一点」，直接改明度和饱和度就行，做主题色阶、生成渐变色时特别好用。
本工具的换算全部由手写纯函数完成，不依赖任何第三方库：hexToRgb 解析 3 位/6 位 HEX，rgbToHsl 与 hslToRgb 实现标准的色彩空间互转公式。换算在本地瞬间完成，取色器拖动时数值实时跟随，所见即所得。配色时的小技巧：先定一个品牌主色的 HSL，再微调明度 ±10% 就能得到一套和谐的深浅配色。
常见问题
HEX 输入支持哪些格式？
支持 6 位标准格式（如 #3a7bd5）和 3 位简写（如 #fff，会自动展开为 #ffffff），# 可省略，大小写均可。输入无法解析时会给出中文提示，不会吞掉你的输入。
取色器和文本框是怎么联动的？
双向联动：在系统取色器里选色，HEX 文本框和下方数值同步更新；在文本框输入合法的 HEX，取色器色块和预览也会同步跟随。任何时候两边显示的都是同一个颜色。
HSL 里的三个数字是什么意思？
hsl(210, 50%, 40%) 中：210 是色相（0~360 色环角度，210 附近是蓝色），50% 是饱和度（越高颜色越鲜艳），40% 是明度（0% 纯黑、100% 纯白）。调明度做深浅变化、调饱和度做鲜艳/灰调变化，是配色的常用手法。
转换精度有损失吗？
HEX 与 RGB 之间是精确互转；涉及 HSL 时，色相取整到度、饱和度与明度取整到百分比，RGB 往返换算会有个位数的舍入误差（约 2% 以内），肉眼无法分辨，日常开发和设计完全够用。