如何在 HEX、RGB 与 HSL 之间转换颜色
快速解答
要转换颜色：打开颜色转换器，输入任意格式的颜色（HEX、RGB、HSL），该工具会立即显示所有其他格式的等效颜色。所有转换都在您的浏览器本地进行——不上传任何数据。
介绍
颜色可以用多种格式表示：HEX (#ff6600)、RGB (rgb(255, 102, 0))、HSL (hsl(24, 100%, 50%)) 等。不同的工具和上下文使用不同的格式 - CSS 通常使用 HEX 或 RGB，设计工具可能使用 HSL，而 APIs 可能使用任何格式。通过格式之间的转换，您可以在需要另一种系统的上下文中使用在一个系统中定义的颜色。本指南向您展示如何在浏览器中转换颜色。
步步
-
打开颜色转换器工具
转到颜色转换器工具页面。该工具支持 HEX、RGB、HSL、HSV 和 CMYK 格式。
-
输入您的颜色
以任何支持的格式键入或粘贴颜色值。示例：“#ff6600”、“rgb(255, 102, 0)”、“hsl(24, 100%, 50%)”。该工具自动检测输入格式。
-
查看所有等效格式
该工具同时显示所有格式的颜色：HEX、RGB、HSL、HSV 和 CMYK。它还显示颜色预览样本，以便您可以验证转换是否正确。
-
复制你需要的格式
单击任何格式旁边的复制按钮，将该值复制到剪贴板。在您的 CSS、设计工具或应用程序中使用它。
-
调整颜色（可选）
有些工具允许您使用滑块调整颜色（对于 HSL：色调、饱和度、亮度）并查看所有格式实时更新。这对于查找相关颜色或色调很有用。
示例
HEX 至 RGB 和 HSL
输入: #ff6600
输出: RGB: rgb(255, 102, 0)
HSL: hsl(24, 100%, 50%)
RGB 至 HEX
输入: RGB(0, 128, 255)
输出: HEX：#0080ff
HSL: hsl(210, 100%, 50%)
HSL 至 HEX
输入: HSL(120, 100%, 50%)
输出: HEX：#00ff00
RGB: rgb(0, 255, 0)
常见问题
- HEX 带 # 与不带 # — 有些工具需要 # 前缀，有些则不需要。我们的转换器接受两者。
- 3 位数字与 6 位数字 HEX —#f60 是 #ff6600 的简写。两者均有效；转换器标准化为 6 位数字。
- HSL 色调范围 — 色调为 0-360 度（一个圆）。 0和360都是红色。高于 360 的值会环绕。
- 色彩空间差异 —HEX、RGB 和 HSL 均为 sRGB。 CMYK 是一种不同的色彩空间（印刷），转换是近似的。
提示
- 使用 HSL 创建颜色变化 - 调整色调、饱和度或亮度比 RGB 更直观。
- 使用 HEX 代替 CSS — 它是样式表中最紧凑且受广泛支持的格式。
- 当您需要设置 alpha 透明度时，请使用 RGB —rgb(255, 102, 0, 0.5) 以获得 50% 的不透明度（或使用 8 位 HEX: #ff660080）。
- 使用我们的颜色转换器在所有颜色格式之间进行即时、私密的转换。