🎨颜色转换 - HEX/RGB/HSL 在线互转与取色

如何使用颜色转换

1. 1输入或粘贴任意一种 CSS 颜色写法，也可以点右边的色块用系统取色器选色
2. 2看预览色块确认颜色，半透明的颜色会透出下面的棋盘格
3. 3点需要的那一行「复制」：HEX、RGB、HSL，带透明度时是 8 位 HEX、RGBA、HSLA

常见问题

8 位 HEX 后两位是什么？透明度怎么换算？

#RRGGBBAA 的最后两位是不透明度，00 完全透明，FF 完全不透明，换算方法是「百分比 × 255 再转十六进制」。常用对照：10% = 1A，20% = 33，50% = 80，80% = CC，90% = E6。比如 #2563eb80 就是 rgba(37, 99, 235, 0.5)，#0000001a 是 10% 的黑色，常用来做阴影。4 位写法 #f00a 等于 #ff0000aa，透明度约 0.667。旧版 IE 不认 8 位 HEX，要兼容时用 rgba。

HSL 为什么有小数？不能取整吗？

取整会让颜色变掉。#2563eb 的精确 HSL 约是 (221.21, 83.19%, 53.33%)，如果写成 hsl(221, 83%, 53%)，填回去得到的是 #2463eb，差了一点。本工具会挑尽量少的小数位，同时保证转回去还是原来的颜色：#2563eb 输出 hsl(221.2, 83.2%, 53.3%)，红色 #ff0000 仍是整数 hsl(0, 100%, 50%)。实测 300 个随机颜色转 HSL 再转回来，全部一致。

支持哪些写法？颜色名有多少个？

浏览器能画出来的颜色写法都认：十六进制（3、4、6、8 位，可省略 #）、rgb() 和 rgba()（逗号或空格分隔、数字或百分比、可带小数）、hsl() 和 hsla()（角度可以写 deg、turn，也可以是负数，比如 hsl(-30, 100%, 50%) 等于 #ff0080）、CSS 标准的 148 个颜色名（tomato 是 #ff6347，rebeccapurple 是 #663399），以及 oklch()、lab()、color(display-p3 …)。currentcolor、inherit 这类要看上下文的关键字没法换算，会提示无法识别。

rgb(300, 0, 0) 这种超出范围的值会怎样？

按 CSS 的规则截断到 0～255，rgb(300, 0, 0) 就是 #ff0000，和浏览器实际显示的颜色一致。百分比同理，rgb(100%, 0%, 0%) 也是 #ff0000。所以输出的 HEX 一定是合法的 6 位或 8 位。

oklch、display-p3 这类颜色转出来为什么变了？

HEX、RGB、HSL 只能表示 sRGB 色域，oklch 和 display-p3 能表示更鲜艳的颜色。色域内的颜色会准确换算，比如 oklch(0.6 0.2 260) 是 #2e79f5；超出 sRGB 的颜色只能映射到最接近的颜色，实测在 Chrome 里 oklch(0.7 0.4 150) 变成 #00d600，color(display-p3 1 0 0)（P3 屏幕上的纯红）变成 #ff0000。在支持广色域的屏幕上，原写法会比转换后的 HEX 更鲜艳。

HSL 和设计软件里的 HSB/HSV 一样吗？

不一样，这是最常见的混淆。CSS 的 HSL 里 L 是亮度，纯色在 L = 50% 时最鲜艳，100% 是白色；Photoshop、Figma 拾色器里的 HSB（也叫 HSV）里 B 是明度，纯色在 B = 100%。同一个纯红，HSL 是 (0, 100%, 50%)，HSB 是 (0, 100%, 100%)。色相 H 两者相同，饱和度和亮度不能直接照抄。

取色器能吸屏幕上的颜色吗？

右边的色块是系统自带的颜色选择器，样式取决于操作系统：macOS 的颜色面板里有放大镜，可以吸取屏幕上任意位置的颜色；Windows 和手机上一般只能在色盘里选。选好的颜色会直接填进输入框。系统取色器不支持透明度，选出来的都是不透明的颜色。

文件会上传服务器吗？

不会。所有处理都在你的浏览器本地完成，没有任何网络上传，关闭页面即清除。

需要注册或付费吗？

不需要。本站完全免费，无需注册登录，没有次数限制。