颜色转换拾取器 - 在线工具

HEX / RGB / HSL / HSV / CMYK 五种格式互转,附可视化取色器、WCAG 对比度检查与调色板生成(含 CSS 具名近似色)

使用说明

颜色转换拾取器:在 **HEX、RGB、HSL、HSV、CMYK** 五种颜色格式之间互转,输入任意一种格式即可得到其余格式的等价值,并给出最接近的 CSS 具名颜色(如 #FF6347 ≈ tomato)与可直接粘贴的 CSS 变量。可视化取色器支持拖动色相条与饱和度/明度区取色,也可以直接粘贴色值。

内置 **WCAG 对比度检查器**:把前景色与背景色放在一起算出对比度比值,并按 WCAG 2.1 给出四个等级的判定 —— AA 正常文字需 4.5:1、AA 大号文字 3:1、AAA 正常文字 7:1、AAA 大号文字 4.5:1(大号文字指 18pt 或 14pt 粗体及以上)。前景色与背景色可一键互换,并支持实际文字预览。

**调色板生成器**提供六种规则:明暗色调(11 级由浅到深)、互补色、类似色、三色组、四色组、分裂互补色。点击任一色块即可把它设为基准色继续探索。

关于 CMYK 的说明:网页端的 RGB→CMYK 是不带色彩配置的数学反推(假设理想油墨),与印刷厂按 ICC 配置换算出的数值会有差异,请勿直接作为印前数值使用。

常见问题

支持哪些颜色格式互转?

HEX(#FF5733、#F53、含 8 位带透明度写法)、RGB / RGBA、HSL、HSV、CMYK 五种格式都支持,输入其中任意一种即可得到其余格式;此外还支持 CSS 具名颜色(tomato、steelblue 等 148 个)。输出会同时给出最接近的 CSS 具名颜色与相对亮度。

WCAG 对比度的四个等级阈值是多少?

正常文字:AA 需 4.5:1、AAA 需 7:1;大号文字(18pt 或 14pt 粗体及以上):AA 需 3:1、AAA 需 4.5:1。对比度计算采用 WCAG 2.1 的相对亮度公式(先按 sRGB 传递函数线性化,再按 0.2126 / 0.7152 / 0.0722 加权,最后取 (较亮+0.05)/(较暗+0.05)),取值范围 1:1 到 21:1。

RGB 转 CMYK 为什么和印刷厂给的值不一样?

因为屏幕用 RGB(加色)、印刷用 CMYK(减色),两者没有唯一对应关系,必须依赖 ICC 色彩配置才能在设备间准确转换。本工具给出的是不依赖配置的数学反推结果(假设理想油墨),适合快速估算,不能作为印前数值。正式印刷请用带色彩配置的专业软件。

调色板有哪几种配色规则?

明暗色调(保持色相与饱和度,给出由浅到深的 11 级梯度)、互补色(色相 +180°)、类似色(±40° 内取 5 色)、三色组(每 120° 取一色)、四色组(每 90° 取一色)、分裂互补色(基准色与互补色两侧各 30° 的两色)。除明暗色调外都保持饱和度与明度不变,只旋转色相,因此配色风格统一。

取色器怎么用?

在饱和度/明度区拖动可取到该色相下任意深浅的颜色,拖动下方色相条切换色相;也可以直接在输入框粘贴 #FF5733、rgb(255,87,51) 或 tomato 等色值。选中后五种格式、对比度检查与调色板都会实时更新,点击任一格式旁的复制按钮即可取走色值。

同类工具