颜色转换器
支持 HEX、RGB、HSL 三种颜色格式相互转换，实时预览颜色，方便前端设计与开发。
颜色转换器
#10B981
颜色转换器使用指南
📌 简介
颜色转换器是一款专为前端开发者、UI 设计师打造的在线工具，支持 HEX、RGB、HSL 三种主流颜色格式的相互转换，并提供实时颜色预览。在设计网页、移动端应用或进行品牌配色时，您经常需要在不同格式间切换。本工具无需安装，打开即用，帮助您快速完成颜色格式的转换和调整。
📖 三种颜色格式的区别
HEX（十六进制）： 常用于 CSS 和设计中，格式如 #10B981，前两位表示红色，中间两位绿色，最后两位蓝色。
RGB（红绿蓝）： 以 0-255 的整数表示三种原色的混合比例，如 rgb(16, 185, 129)。
HSL（色相饱和度亮度）： 更符合人类直觉的颜色表示方式。H 表示色相（0-360°），S 表示饱和度（0-100%），L 表示亮度（0-100%）。
💼 常见应用场景
- Web 开发： 将设计稿中的 HEX 色值转换为 CSS 中便于调节的 HSL 格式。
- 品牌配色： 通过调整 HSL 快速生成同色系的深浅配色方案。
- 设计还原： 从截图工具中获取 RGB 值，转换为 HEX 应用于代码。
- 无障碍设计： 通过调整亮度 L 值实现对比度达标。
⚙️ 使用步骤
- 在左侧输入框中选择要输入的颜色格式（HEX / RGB / HSL）。
- 输入数值后点击对应的“更新”按钮。
- 右侧预览区会立即显示颜色效果。
- 其他两种格式会自动同步更新，方便您复制使用。
- 也可以直接点击颜色选择器从调色板中选择颜色。
⚠️ 注意事项
- HEX 支持 3 位缩写（如 #FFF）和 6 位完整格式（如 #FFFFFF）。
- RGB 每个分量的取值范围是 0-255，超出会被限制到边界值。
- HSL 中的色相 H 是环形值，360° 与 0° 等价，都是红色。
❓ 常见问题 (FAQ)
Q: 为什么 HSL 更适合配色？
A: HSL 的三个维度相对独立，例如保持 S 和 L 不变，只调整 H 就可以得到一系列同明度的颜色，非常符合设计师的调色直觉。
Q: HEX 颜色能表示透明度吗？
A: 可以，8 位 HEX（如 #10B981FF）最后两位表示 Alpha 通道。本工具目前只支持 6 位不含透明度的转换。
Q: 颜色转换会失真吗？
A: 由于 RGB 和 HSL 都是基于整数的表示，转换过程中可能会有 1-2 的误差，但这在视觉上几乎无法察觉，不影响实际使用。