颜色 转换器

如何使用这个颜色转换器

第一步：在任一支持的格式中输入颜色值——在相应的输入框中输入 HEX 代码（如 #FF6B6B）、RGB 值（如 255, 107, 107）或 HSL 值（如 0, 100%, 71%）。

第二步：工具会立即将您的颜色转换为所有其他格式。当您输入 HEX 代码时，会立即看到 RGB、HSL、HSB 和 CMYK 的等效值。

第三步：使用颜色选择器（点击颜色色块）可视化选择任何颜色。您的浏览器原生颜色选择器将打开，所有值会实时更新。

第四步：复制 CSS 代码片段或任何颜色值，用于您的样式表、设计工具或代码。浏览转换器下方的色调部分，查找所选颜色的浅色和深色变体。

为无障碍设计选择颜色

在进行网页设计时，始终检查文字和背景组合是否符合 WCAG 对比度标准。正常文本的最低对比度为 4.5:1，大号文本（18px 加粗或25px 常规）为 3:1。使用我们的对比度检查器工具验证您的颜色选择。

实用工作流程：以 HSL 格式的品牌色开始，然后调整亮度值来创建无障碍变体。例如，品牌蓝色为 hsl(220, 80%, 50%)，您可以创建深色文本版 hsl(220, 80%, 25%) 和浅色背景色 hsl(220, 80%, 95%)。

HEX、RGB 与 HSL 详解

HEX 是颜色的 6 位十六进制表示，以 # 前缀。每对字符代表红、绿、蓝通道（00–FF）。它是网页开发和 CSS 中最常用的格式。

RGB（红、绿、蓝）通过混合三个光通道来定义颜色，每个范围从 0 到 255。rgb(255, 0, 0) 是纯红色。RGB 对于理解颜色混合很直观，但对于调整亮度或饱和度不太直观。

HSL（色相、饱和度、亮度）是最友好的格式。色相是色轮上的角度（0°=红色，120°=绿色，240°=蓝色）。饱和度控制鲜艳程度（0%=灰色，100%=全彩）。亮度控制明亮程度（0%=黑色，100%=白色）。HSL 可以通过简单调整亮度来轻松创建颜色变体。

何时使用各种格式

HEX：CSS 样式表、设计工具、品牌指南。最紧凑且使用最广泛的格式。
RGB：JavaScript 颜色操作、画布绘制、需要以编程方式混合通道时。
HSL：创建调色板、调整亮度/饱和度、生成无障碍配色方案。最适合设计工作。

CSS 颜色使用技巧

现代 CSS 支持所有三种格式。当您需要创建悬停状态（只需改变亮度）、深色模式变体或一致的调色板时，使用 hsl()。对于常见颜色（如 #fff 和 #000），使用简写 HEX（#RGB）。

常见问题

如何将 HEX 转换为 RGB？

将 HEX 代码分成 3 对（RR、GG、BB），将每对从十六进制转换为十进制。#FF6B6B = R:255、G:107、B:107。本工具自动完成转换。

RGB 和 HSL 有什么区别？

RGB 混合红、绿、蓝光（0–255）。HSL 使用色相（颜色）、饱和度（鲜艳度）和亮度（明亮度）。HSL 对于创建颜色变体更直观。

如何将颜色转换为 HEX？

将每个 RGB 值（0–255）转换为 2 位十六进制数，然后加上 # 前缀。RGB(255, 107, 107) → #FF6B6B。

什么是 HSL 颜色？

色相（0–360°）、饱和度（0–100%）、亮度（0–100%）。色相选择颜色，饱和度控制鲜艳度，亮度控制明亮程度。

如何查找颜色的 RGB 值？

点击上方的颜色色块打开颜色选择器。选择任何颜色，RGB、HEX 和 HSL 值会立即显示。