MyDevTools
ZH

颜色转换器

在 HEX、RGB、HSL 和 CMYK 之间转换颜色，生成 9 级色阶，并在浏览器中检查两种颜色的 WCAG 对比度。

输入内容和文件始终留在浏览器中

颜色

示例：#3b82f6, rgb(59, 130, 246), hsl(217, 91%, 60%), cmyk(76%, 47%, 0%, 4%)

转换后的格式

对比度检查器

示例文本16 px

示例文本24 px

大号文本指至少 24 px 常规字重，或约 18.67 px 粗体。

对比度比率—

    浅色与深色

    在线性光 sRGB 中与黑色（深色）和白色（浅色）混合。点击色块即可复制其 HEX。

    本页内容

    粘贴任意常见写法的 CSS 颜色，即可得到同一颜色的 HEX、RGB、HSL 和 CMYK 值，并可一键复制。页面还会生成由浅到深的色阶，并按 WCAG 检查文字与背景的对比度。

    详细功能

    格式会自动识别：#3b82f6、简写 #38f（# 可省略）、通道为 0–255 或百分比的 rgb(59, 130, 246) / rgba(…)、可带 deg 的 hsl(217, 91%, 60%)，以及 cmyk(76%, 47%, 0%, 4%)。也支持空格分隔的 CSS 写法，如 rgb(59 130 246 / 50%)；透明度会被接受但忽略，因为输出不含透明度。无效或超出范围的值会提示错误，而不是自行猜测。也可以用系统取色器选择颜色。

    调色板在线性光 sRGB 中把当前颜色按 20%、40%、60%、80% 与黑色（深色）和白色（浅色）混合——共九个色块，原色居中；点击色块即可复制其 HEX 代码。对比度检查器接收文字色和背景色，给出对比度以及 WCAG 2.x 的四个阈值：普通文本 AA 4.5:1、AAA 7:1，大号文本 AA 3:1、AAA 4.5:1。

    所有转换都是在页面上运行的 JavaScript 公式，不会上传任何内容。CMYK 使用不带 ICC 配置文件的简单公式，只适合作参考，不适合印前打样。HSL 和 CMYK 会取整，因此反向转换可能与原值相差 1。

    实用示例

    HEX 转全部格式：#3b82f6 得到 rgb(59, 130, 246)、hsl(217, 91%, 60%) 和 cmyk(76%, 47%, 0%, 4%)。

    HSL 转 HEX：hsl(0, 100%, 50%) 转换为 #FF0000，cmyk(0%, 100%, 100%, 0%) 也一样。

    对比度检查：白色背景 #ffffff 上的灰色文字 #777777 对比度为 4.48:1——满足大号文本 AA（3:1），但不满足普通文本 AA（4.5:1）。

    默认配色：预设的 #1e3a8a 配 #ffffff 达到 10.36:1，通过全部四个 WCAG 等级。

    如何使用此工具

    1. 输入颜色

      在“手动输入”中输入或粘贴颜色值（HEX、rgb()、hsl() 或 cmyk()），点击“转换”或按 Enter；也可以用“颜色选择器”选色。

    2. 复制需要的格式

      在“转换后的格式”中点击 HEX、RGB、HSL 或 CMYK 旁的复制按钮。

    3. 复制浅色或深色

      在“浅色与深色”中点击色块即可复制其 HEX 代码。

    4. 检查对比度

      在“对比度检查器”中设置“前景色”和“背景色”，查看对比度和 AA/AAA 结果。

    提示和最佳实践

    • # 可以省略，三位简写也可用：38f 会被识别为 #3388FF。
    • 色相可写可不写 deg；饱和度和亮度取值 0–100。
    • 超出范围的值（如 rgb(300, 0, 0)）会被拒绝，而不是悄悄截断。
    • 正文文字建议对比度至少 4.5:1；3:1 只适用于大号文本（24 px，或 18.66 px 粗体）。
    • 不要把这里的 CMYK 用于正式印刷，请向印刷厂索取基于其 ICC 配置文件的数值。