颜色转换器

Click to pick color
HEX
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)
CMYK
cmyk(76%, 47%, 0%, 4%)

关于颜色转换器

我们的颜色转换器是网页开发人员和设计师的多功能工具。它允许您在最常见的网页格式之间无缝转换颜色值:HEX、RGB、HSL 和 CMYK。

色彩空间详解

网页上的颜色定义在不同的数学模型中。HEX 和 RGB 基于色光(红、绿、蓝),而 CMYK 基于印刷中使用的油墨(青、洋红、黄、黑)。HSL(色相、饱和度、亮度)旨在更符合人类的直觉感知。

常见问题解答

CSS 最适合使用哪种格式?

现代 CSS 支持所有格式,但 HEX 最为常见。HSL 越来越受欢迎,因为只需更改“亮度”值即可轻松创建颜色的变体(如更深或更浅的色调)。

我可以将 HEX 用于印刷吗?

HEX 是一种数字格式。如果您是为印刷而设计,应使用 CMYK 值,以确保印刷结果尽可能与您的屏幕匹配。

它支持透明度吗?

目前我们的工具专注于纯色转换。对于透明度,通常将 RGB 扩展为 RGBA。

如何使用?

在任何输入框中输入颜色值,或使用可视化拾色器选择颜色。所有其他格式将立即更新。您可以一键复制任何格式。

01

在 4 种主要格式之间即时转换

02

交互式可视化拾色器

03

整洁、现代且注重隐私

色彩设计技巧

  • 🎨 配色方案构建:使用可视化拾色器找到基色,然后切换到 HSL 以轻松找到适合您 UI 的匹配色调。

  • 无障碍设计:确保您的文本颜色和背景颜色有足够的对比度。使用此工具获取精确值以进行对比度检查。

  • 📋 开发工作流:点击任何值即可快速将其复制到您的 CSS、Tailwind 或 Sass 变量中。

颜色转换器 百科

数字色彩模型

屏幕上的颜色是通过混合光线产生的(加色模型),而印刷中的颜色是通过混合油墨产生的(减色模型)。这种根本差异需要不同的坐标系来描述颜色。

RGB 与 CMYK

RGB(红、绿、蓝)具有更宽的色域,用于显示器。CMYK(青、洋红、黄、黑/关键色)用于打印机。将 RGB 转换为 CMYK 通常会导致颜色变暗,因为油墨无法重现背光屏幕的亮度。

Hex 代码

Hex 代码只是 RGB 的十六进制表示。`#FF5733` 意味着:红=FF (255),绿=57 (87),蓝=33 (51)。它是网页设计的标准。

面向人类的 HSL

HSL(色相、饱和度、亮度)专为人类感知颜色的方式而设计。通过选择色相(例如蓝色)并仅改变亮度来创建阴影和高光,可以轻松创建调色板。

无障碍 (a11y)

选择颜色时,对比度是关键。Web 内容无障碍指南 (WCAG) 建议普通文本的对比度至少为 4.5:1,以确保视力受损用户的可读性。