实时互转
输入 HEX、RGB 或 HSL 后立即同步到其他格式，适合前端配色和设计交接。
单色预览
同时给出颜色块预览，便于直观看出当前色值效果。
本地计算
在浏览器本地完成 HEX、RGB、HSL 的互转和单色预览，适合前端配色、设计交接和品牌色整理。
浏览器本地处理
HEX、RGB、HSL 实时互转
适合前端配色、设计交接、主题变量整理和品牌色录入。颜色转换在浏览器本地完成，不上传服务器。
#3B82F6
直接选色后会同步更新全部格式
HEX
#3B82F6
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)
已填入示例颜色，可以直接查看 HEX、RGB、HSL 格式。
工具使用说明
怎么用 色值转换器
输入颜色
直接输入 HEX、rgb(...) 或 hsl(...)。
调整通道或选色器
也可以直接拖动 RGB 或打开颜色选择器微调。
复制结果继续用
把转换后的颜色值复制到样式表、设计稿或文档里。
功能说明
这个工具解决什么问题
色值转换器 适合什么场景
在浏览器本地完成 HEX、RGB、HSL 的互转和单色预览，适合前端配色、设计交接和品牌色整理。
计算型工具的价值，不只是给一个数字，而是把重复测算和人工复核的时间先省下来。
为什么要把三种格式一起展示
前端和设计交接时经常要在 HEX、RGB、HSL 之间来回切换，集中展示可以减少误差。
页面还保留了一个颜色块预览，方便一眼核对视觉效果。
常见问题
关于 色值转换器，用户常问这些
色值转换器 会上传颜色值吗？
不会。HEX、RGB、HSL 的解析和转换都在浏览器本地完成。
支持哪些输入格式？
支持 HEX、rgb(...) 和 hsl(...)，也可以直接用颜色选择器。
结果可以直接复制吗？
可以，HEX、RGB、HSL 三种格式都能直接复制。
三位 HEX 可以识别吗？
可以，页面会把 #abc 这类简写扩展后继续转换。