颜色转换

这个工具把一个 6 位十六进制颜色值(HEX,例如 #2F5D50)换算成 RGB 和 HSL 两种常用写法,并且根据当前颜色给出五个配色建议。你可以直接输入 HEX,也可以用旁边的系统取色器选色。需要事先说明它的边界:输入只接受 HEX 一种格式,不能反过来输入 RGB 或 HSL 数值再转成 HEX;不支持透明度(8 位 HEX 或 rgba);也不支持 3 位简写(如 #fff)。它只是一个小型换算器,不是完整的调色板或对比度检查工具。

操作步骤

1. 在「HEX 颜色值」输入框里输入颜色,默认值是 #2F5D50。前面的 # 可以省略,但必须是完整的 6 位十六进制字符(0-9 和 a-f,不区分大小写)。
2. 也可以点击输入框左边的色块,弹出浏览器自带的取色器,选好颜色后 HEX 框会自动更新。
3. 输入有效后,下方依次显示三行结果:HEX、RGB(格式 rgb(r, g, b))和 HSL(格式 hsl(h, s%, l%))。每一行右边都有复制按钮,点一下就能把那一行的值复制走。
4. 「配色建议(点击切换)」下面有五个色块:互补色、邻近色 1、邻近色 2、浅一点、深一点。鼠标悬停会显示它的 HEX 值,点击色块就会把它设为当前颜色,并重新计算上面的转换结果。
5. 输入无效时(位数不对或有非法字符),结果区会改成红色提示「请输入有效的 HEX 颜色,例如 #2F5D50」。

一个实际例子

以默认的 #2F5D50(一种深青绿色)为例,工具实际算出:RGB 为 rgb(47, 93, 80),HSL 为 hsl(163, 33%, 27%)。五个配色建议依次是:互补色 #5C2E3B(色相加 180 度),邻近色 1 #2E525C(色相加 30 度),邻近色 2 #2E5C38(色相减 30 度),浅一点 #509F89(亮度加 20 个百分点),深一点 #11221D(亮度减 20 个百分点,但最低保留 10%)。可以看到邻近色和互补色保持原来的饱和度与亮度,只转动色相;浅一点和深一点则保持色相与饱和度,只改变亮度。以上数值都是用工具里同样的换算公式实际运行得到的。

支持范围与已知限制

• 只接受 6 位 HEX。#fff 这样的 3 位简写会被判定为无效并显示错误提示,需要自己写成 #ffffff。
• 不支持带透明度的 8 位 HEX,也不支持颜色名称(如 red)、rgb() 或 hsl() 作为输入。
• 输入框不会自动去掉首尾空格,粘贴时多带了空格会被判定为无效。
• HEX 结果行显示的是你输入内容的大写形式。如果你省略了 #,这一行也不会补上 #,复制前请留意。另外取色器遇到没有 # 的值会退回显示黑色,这只影响取色器的显示,不影响下面的换算。
• HSL 的三个数值都四舍五入成整数,所以 HSL 转回 HEX 时会有细微误差。配色建议就是这样得到的,它们的 HEX 与你手工调出来的颜色可能差一两个色阶。
• 配色建议是简单的色相或亮度偏移,不是专业的配色方案:互补色用的是 HSL 色相环上相差 180 度,而不是 RGB 数值取反;浅一点和深一点的亮度被限制在 10% 到 90% 之间,所以对已经很深或很浅的颜色,变化会比 20 个百分点小。
• 灰色(R、G、B 相等)没有色相,工具把色相和饱和度都记为 0,因此它们的邻近色和互补色仍是灰色。
• 不检查可读性或无障碍对比度,不提供 CMYK、HSV 或 Lab 等其他色彩空间。

常见问题:HEX、RGB 和 HSL 各适合什么场合?

HEX 是网页和设计稿里最常见的写法,紧凑,便于复制。RGB 用红绿蓝三个 0 到 255 的数表示,和屏幕发光方式一致,也是很多图像库的输入。HSL 用色相、饱和度、亮度描述,更接近人对颜色的想法:想让颜色「更浅一点」,只要调大 l,而在 HEX 里就很难直接改。CSS 里三种写法都能直接使用。

常见问题:为什么我输入的 3 位 HEX 提示无效?

因为工具的解析规则要求恰好 6 位字符(每个通道两位)。3 位简写其实是每位重复一次,例如 #3a9 等价于 #33aa99,把它展开后再输入即可。

常见问题:色相、饱和度、亮度的范围是多少?

色相 h 是 0 到 360 的角度,0 是红,约 120 是绿,约 240 是蓝。饱和度 s 和亮度 l 都是 0% 到 100%。亮度 0% 是纯黑,100% 是纯白,饱和度 0% 就是灰色。示例里的 163 度落在绿色与青色之间,所以是青绿色。

常见问题:复制出去的值可以直接用在 CSS 里吗?

可以。RGB 一行的格式是 rgb(47, 93, 80) 这样的 CSS 写法,HSL 一行是 hsl(163, 33%, 27%),都可直接粘贴到样式表中。HEX 一行只有在输入时带了 # 的情况下才带 #,请检查一下。

隐私与处理方式

所有换算都是在你的浏览器里用本页的代码计算的,没有把你输入或选择的颜色发送到服务器,也没有保存记录。取色器是浏览器或操作系统自带的控件,它的外观因系统而不同,但同样不会把选色结果发给本站。