在线颜色选择器 / HEX·RGB·HSL 转换
在取色面板中选择颜色，自动给出 HEX、RGB、HSL 三种表示并支持一键复制，方便网页设计与前端开发配色。
颜色选择与转换
点击左侧色块打开取色面板选色，或直接输入 HEX 值（如 #FF6600），右侧自动换算 RGB 与 HSL。
| 格式 | 颜色值 | 复制 |
|---|---|---|
| HEX | #33CABB | |
| RGB | rgb(51, 202, 187) | |
| HSL | hsl(169, 59%, 50%) |
颜色表示方式
HEX（十六进制，如 #33CABB）是网页中最常用的颜色写法；RGB 通过红、绿、蓝三个 0-255 的分量描述颜色；HSL 从色相、饱和度、明度三个维度描述，更适合调色。
三种颜色表示法为什么需要转换
同一种颜色在不同场景下要用不同格式描述。HEX（如 #FF6600）书写紧凑，是 CSS、设计标注、切图交付中最常用的格式；RGB（如 rgb(255, 102, 0)）直观对应屏幕发光的强弱，便于按通道做微调；HSL（如 hsl(24, 100%, 50%)）用色相、饱和度、亮度描述，调整明暗或做配色方案时比 RGB 更符合人的直觉。设计稿给的是 HEX，代码里可能要用 HSL 做主题变量，来回换算就成了高频需求。
HEX 的简写与透明度
当三组通道值各自的两字符相同时，HEX 可以简写，例如 #FF6600 可写作 #F60。八位的 HEX（如 #FF660080）在后两位承载透明度，00 表示完全透明、FF 表示完全不透明，对应 RGBA 中的 alpha 通道。使用简写时请注意仅当三个通道都能简写时才成立，不能只简写其中一部分。
适用场景
- 前端还原设计稿：拿到 hex 后转成代码中使用的 rgb 或 hsl 变量。
- 配色微调：在 HSL 下调整亮度做悬停态，色彩关系比直接在 RGB 上改数字更自然。
- 无障碍对比度检查：先得到准确的 RGB 值，再据此计算与背景的对比度，判断文字是否满足可读性要求。
使用步骤
- 用原生取色器点选颜色，或在输入框直接粘贴 HEX / RGB 色值。
- 页面实时显示对应的 RGB 与 HSL 结果，并给出色块预览。
- 点击各结果旁的复制按钮，一键复制到剪贴板。
注意事项
- 本工具输出的是 sRGB 色值，与屏幕实际显示可能因显示器色域、亮度设置而略有差异，用于打印前请以印刷色卡为准。
- 输入 HEX 时前缀 # 可以省略，三位简写会被自动展开为六位。
- 非法输入（如位数不足、包含非法字符）会给出明确提示，不会静默出错。
常见问题 FAQ
为什么取色得到的结果和我输入的十六进制略有不同？
浏览器的取色控件工作在与屏幕相同的色彩空间，且部分系统会对颜色做显示配置校正，往返一次可能出现 ±1 的通道误差。用于设计交付时建议以设计稿给定的数值为准。
RGB 与 HSL 能精确互转吗？
可以。HSL 只是 RGB 的另一种表达方式，二者描述的是同一组颜色，互相转换不损失精度（仅在四舍五入到整数时可能出现极小偏差）。
支持 HSV / HSB 吗？
HSV 与 HSL 的色相定义一致，区别在饱和度与亮度的计算方式，设计软件常用 HSV。若需 HSV 数值，可在设计工具中查看，本工具提供的是 CSS 可直接使用的 HSL。
会上传我选的颜色吗？
不会，所有换算在浏览器本地完成。