Color 选择器

在不同表示（十六进制、rgb、hsl 和 CSS 名称）之间轻松转换颜色

color picker:
#13423FF
name:
hex:
rgb:
hsl:
hwb:
lch:
cmyk:

什么是颜色转换？

颜色转换（Color Conversion）是将颜色从一种表示格式转换为另一种表示格式的过程。在网页设计、UI 开发、数字图像处理等领域，不同的工具和框架需要不同格式的颜色值。例如，CSS 样式表支持 十六进制颜色码（如 #FF5733）、RGB/RGBA 表示法（如 rgb(255,87,51)）以及 HSL 表示法（如 hsl(12,100%,60%)），而设计软件则可能使用 CMYK 或 LCH 等更专业的色彩空间。颜色转换工具正是为了在这些格式之间架起一座快速通行的桥梁。

常见颜色格式详解

1. 十六进制颜色码（HEX）

十六进制颜色码是 Web 开发中最常用的颜色表示方式。它以 # 开头，后跟六位（或三位简写）十六进制数字，每两位分别表示红色（R）、绿色（G）和蓝色（B）的亮度值，取值范围为 00 ~ FF（即十进制的 0~255）。

  • 示例：#FF5733 表示红色 255、绿色 87、蓝色 51。
  • 简写形式：#F53 等价于 #FF5533，浏览器会自动将其展开为六位。
  • 典型用途：CSS 颜色属性、HTML 标签属性、设计工具中的取色值。

2. RGB / RGBA 颜色模式

RGB（Red、Green、Blue）是计算机图形学中最基础的颜色模型，通过混合红、绿、蓝三种原色光来生成各种颜色。RGBA 在 RGB 的基础上增加了 Alpha（透明度） 通道，取值范围 0~1。

  • 示例：rgb(255, 128, 0) 或 rgba(255, 128, 0, 0.5)
  • 典型用途：CSS 中的颜色值、Canvas API、WebGL 着色器。

3. HSL 颜色模型

HSL（Hue 色相、Saturation 饱和度、Lightness 亮度）是一种更符合人类直觉的颜色描述方式。相比 RGB 需要通过数字组合推测颜色效果，HSL 让开发者可以直观地调整颜色的"鲜艳程度"和"明暗程度"。

  • H（色相）：0°~360°，对应色环上的角度，0°为红色、120°为绿色、240°为蓝色。
  • S（饱和度）：0%~100%，0% 为灰色，100% 为最鲜艳的颜色。
  • L（亮度）：0%~100%，0% 为纯黑，100% 为纯白，50% 为正常亮度。
  • 示例：hsl(12, 100%, 60%) 表示高饱和、中等亮度的偏红色调。

4. HWB 颜色模型

HWB（Hue 色相、Whiteness 白度、Blackness 黑度）是 CSS Color Level 4 规范中引入的颜色表示法。它通过指定色相以及混入白色和黑色的比例来定义颜色，比 HSL 更直观。

  • 示例：hwb(12 10% 20%) 表示色相 12°、混入 10% 白色和 20% 黑色。

5. LCH 色彩空间

LCH（Lightness 亮度、Chroma 色度、Hue 色相）是基于 CIE Lab 色彩空间的新一代颜色表示法。它最大的优势是 感知均匀性——即数值变化与人眼感知的颜色变化程度一致，解决了 RGB 和 HSL 在颜色过渡时不均匀的问题。

  • L（亮度）：0%~100%，描述颜色的明暗。
  • C（色度）：描述颜色的饱和度或鲜艳程度，0 为灰色。
  • H（色相）：0°~360°，与 HSL 中的色相含义相同。

6. CMYK 颜色模式

CMYK（Cyan 青、Magenta 品红、Yellow 黄、Key/Black 黑）是印刷行业的标准颜色模型。相比 RGB 的"加色法"（光叠加变亮），CMYK 使用"减色法"（颜料叠加吸收光线），是打印、出版等领域必须使用的色彩模式。

  • 示例：device-cmyk(0% 60% 80% 0%) 表示青色 0%、品红 60%、黄色 80%、黑色 0%。

7. CSS 命名颜色

CSS 规范定义了 148 种标准命名颜色（Named Colors），如 red、blue、darkgreen、tomato 等。这些颜色名称在浏览器中直接可用，具有良好的可读性，适合快速原型开发。

RGB 与 HEX 转换原理

RGB 与 HEX 之间的转换是非常直接的数学关系：

  • RGB → HEX：将 R、G、B 的十进制值分别转换为两位十六进制数并拼接。例如 RGB(255, 87, 51) → FF + 57 + 33 → #FF5733。
  • HEX → RGB：将六位十六进制数每两位一组转换为十进制。例如 #1A2B3C → 1A=26, 2B=43, 3C=60 → RGB(26, 43, 60)。

RGB 与 HSL 转换原理

RGB → HSL 的转换涉及标准化 RGB 值到 [0,1] 范围，找到最大最小值计算亮度（Lightness），再根据差值计算饱和度（Saturation），最后通过通道间相对关系确定色相（Hue）。HSL → RGB 则涉及根据色相所在扇区（六等分色环）分别计算，这是一个分段函数。

颜色转换工具的应用场景

场景说明
Web 前端开发CSS 支持多种颜色格式，开发者在设计稿（HEX）和代码实现（RGB/HSL）之间频繁切换。
UI/UX 设计设计师在 Figma、Sketch 中使用 HEX，前端开发者可能需要 RGB 或 HSL 来控制透明度或计算颜色变体。
印刷设计屏幕显示使用 RGB，印刷使用 CMYK，准确的色彩转换是保证印刷品颜色一致性的关键。
Canvas / WebGLCanvas API 和 WebGL 着色器通常需要标准化到 [0,1] 的浮点 RGB 值。
数据可视化在生成渐变色阶或热力图时，在 HSL 空间中操作比在 RGB 中更容易生成均匀过渡的颜色。
动态主题生成根据主色通过 HSL 调亮/调暗快速派生出一套完整的主题色系统。

为什么需要一个在线颜色转换工具？

在日常开发中，开发者经常需要快速查看一个颜色在不同格式下的表示——例如拿到设计稿中的 Hexadecimal 色值，需要以 RGB 形式写入 CSS 变量；或者拿到一个 RGB 颜色，想知道它最接近的 CSS 命名颜色是什么。每次手动计算或打开数个网页工具非常低效。我们的在线颜色转换工具提供了一站式解决方案：

  • 实时双向转换：在任意格式的输入框中输入或修改颜色值，其他格式会即时更新。支持从 HEX、RGB、HSL、HWB、CSS 名称等多种格式作为输入。
  • 内置拾色器：提供可视化颜色选择器，方便直观地选取颜色。
  • 一键复制：每种格式旁边都有复制按钮，单击即可复制到剪贴板。
  • 100% 本地运行：所有颜色计算都在浏览器中完成，无需安装任何软件，不向任何服务器发送数据，安全可靠。

无论你是前端工程师、UI 设计师还是全栈开发者，这都是你日常工作中不可或缺的工具。