颜色转换工具 HEX / RGB / HSL + 取色器

这个工具能做什么

颜色转换工具在 HEX、RGB、HSL 三种表示法之间实时互转，输入任意一种即可同时得到其余格式，并提供 CSS 可直接取用的 rgba 与 hsla 写法。内置系统取色器与屏幕吸管，可实时预览白字与黑字在该底色上的显示效果，并按 WCAG 标准计算对比度。还提供变亮变暗变体和常用色卡，方便前端开发与设计取色。

怎么用

1. 输入颜色：在输入框粘贴 #2f6bff、rgb(47,107,255) 或 hsl(220,100%,59%) 中任意一种格式。
2. 用取色器：点左侧色块调用系统取色面板；支持的浏览器还可点「屏幕吸管取色」吸取屏幕上任意位置的颜色。
3. 微调分量：拖动 R/G/B 或 H/S/L 滑块，两种色彩空间的数值会同步更新。
4. 读取结果：下方列出 HEX、RGB、HSL、RGBA、HSLA 以及整数值，点「复制」即可粘贴进代码。
5. 查看对比度：结果区显示与白色、黑色文字的对比度及是否达到 WCAG AA 标准，帮你判断文字配色是否可读。

常见问题

支持哪些输入格式？

支持带井号或不带井号的十六进制（如 #2f6bff 或 2f6bff，也支持三位简写 #28f）、rgb() 与 rgba() 函数写法、hsl() 与 hsla() 函数写法，字母大小写均可。

屏幕吸管按钮为什么没出现？

该功能依赖浏览器的 EyeDropper 接口，目前 Chrome 95 与 Edge 等基于 Chromium 的新版浏览器支持，其余浏览器会自动隐藏该按钮，你可以改用系统取色器。

对比度多少才算合格？

按 WCAG 标准，正文文字与背景的对比度建议不低于 4.5:1，大号文字（18pt 以上或 14pt 加粗）不低于 3:1。工具会直接给出数值与是否达标的提示。

透明度会影响 HEX 吗？

不会。十六进制色值本身不含透明通道，A 滑块只作用于 rgba() 与 hsla() 的输出。若需要带透明度的 HEX，可使用 8 位 HEX 表示法自行补上。

变亮变暗是怎么算的？

在 HSL 色彩空间调整亮度分量 L，相比直接对 RGB 加减固定数值，视觉上过渡更自然，也更接近设计软件里的明暗变体。

相关工具