颜色转换

颜色格式换算原理

HEX 与 RGB 本质相同，只是进制表示不同：每两位十六进制对应一个 0–255 的通道值

HSL 用色相/饱和度/亮度描述，需经公式在 RGB 空间转换

这个工具能做什么

• 在 HEX、RGB、HSL 等格式间互转
• 复制任意格式用于 CSS / 设计稿
• 辅助配色与前端开发

怎么使用（输入说明）

1. 输入一种格式：如 #3366CC 或 rgb(51,102,204)。
2. 查看其他格式：工具实时给出等价表示，点击复制。

什么时候用 HSL

HSL 把颜色拆成「色相/饱和度/亮度」，调色更直观（例如只改亮度就能得到同色系深浅），在前端主题与渐变中很常用。

计算实例

例：#FF0000 → rgb(255, 0, 0) → hsl(0, 100%, 50%)。

常见问题 FAQ

Q：HEX 和 RGB 有什么区别？

A：两者表达的是同一个颜色，只是写法不同。HEX（如 #ff8c00）是十六进制简写，RGB（如 rgb(255,140,0)）是十进制分量。绝大多数设计软件和 CSS 都同时支持，按习惯或团队规范选用即可。

Q：什么时候用 HSL？

A：HSL（色相/饱和度/亮度）更贴近人眼对颜色的感知，调亮、调暗、换色相时比 RGB 直观得多。例如把亮度从 50% 调到 70% 就能快速得到同色系的浅色，适合做主题色衍生。