ToolDeck 的颜色工具让你直接在浏览器中完成颜色格式转换、无障碍对比度检测、调色板生成、CSS 渐变构建，以及颜色名称或 Tailwind 类名查询。颜色转换器支持 HEX、RGB、HSL 和 HSV 之间的双向转换。对比度检测器验证 WCAG 2.1 AA 和 AAA 合规性。调色板生成器可从任意基础颜色生成互补色、类似色、三角配色和四角配色方案。CSS 渐变生成器输出可直接复制的线性和径向渐变代码。颜色名称查找器将任意值匹配到最近的 CSS 命名颜色，Tailwind 颜色查找器将任意颜色映射到 Tailwind 工具类。所有工具均在客户端运行，不向任何服务器发送数据。
什么是颜色工具？
颜色工具是帮助开发者和设计师处理数字颜色值的实用程序。屏幕上的每种颜色都以数字形式存储：RGB（红、绿、蓝）三个通道、用于 CSS 简写的十六进制三元组，或者 HSL 中的色相角度加饱和度和亮度。手动在这些表示形式之间转换既慢又容易出错，尤其是当你还需要考虑 alpha 透明度或 OKLCH 等较新模型时。
除格式转换外，颜色工作还涉及无障碍测试、调色板创建和渐变编写。WCAG 2.1 规定了最低对比度（AA 级普通文字 4.5:1，AAA 级 7:1），仅凭肉眼很难验证。生成和谐的配色方案需要在 HSL 色轮上进行精确的角度计算。CSS 渐变需要正确的方向、色标和回退值语法。在拥有数十个设计令牌的设计系统中手动完成这些操作会迅速变得繁琐。
颜色工具将这些任务自动化。它们接受某种格式的颜色，完成数学计算，并返回你需要的结果——无论是转换后的值、无障碍通过/失败判定、一组和谐色板，还是 CSS 代码片段。当工具在浏览器中运行时，你还能避免将敏感的设计令牌上传到第三方服务。
为什么在 ToolDeck 上使用颜色工具？
ToolDeck 的颜色工具完全在你的浏览器中运行。颜色值不会离开你的设备，无需账户，每个工具无需安装扩展或桌面软件即可即时加载。
🎨一步完成格式转换
粘贴一个 HEX 代码，即可同时获得 RGB、HSL 和 HSV 值。无需串联多个转换器，也无需记忆转换公式。
🔒保护设计令牌私密性
所有处理均在客户端进行。你的品牌颜色、未发布的调色板决策以及内部设计系统值始终保留在你的设备上。
♿即时测试无障碍性
针对 WCAG 2.1 AA 和 AAA 阈值检查任意前景/背景颜色组合，涵盖普通文字和大号文字。获取精确的对比度数值，而不仅仅是通过/失败的标签。
⚡复制可直接用于生产的输出
每个工具输出的值可直接粘贴到 CSS、Tailwind 配置或设计工具的输入字段中，无需重新格式化。
颜色工具使用场景
以下是 ToolDeck 颜色工具节省时间的六个常见场景。
设计系统维护
在更新设计系统时，你通常从设计师那里获得 HEX 格式的颜色，但需要 HSL 格式用于 CSS 自定义属性。
颜色转换器可在格式之间转换，让你无需手动计算即可填充令牌文件。
无障碍审计
在进行 WCAG 合规审计时，每个文字/背景颜色组合都必须满足最低对比度要求。
颜色对比度检测器显示精确的对比度数值以及普通和大号文字的 AA/AAA 通过状态。
品牌调色板探索
从单一品牌颜色出发，你需要强调色和中性色变体。
配色方案生成器计算互补色、类似色、三角配色和四角配色方案，让你在确定调色板之前评估各种选项。
CSS 背景样式
为主视觉区域或卡片背景构建渐变需要正确的 CSS 语法来处理角度、色标和浏览器前缀。
CSS 渐变生成器让你以可视化方式构建渐变并复制代码。
Tailwind 迁移
将项目迁移到 Tailwind CSS 时，你需要将现有的 HEX 或 RGB 值映射到最近的 Tailwind 工具类。
Tailwind 颜色查找器找出最接近的匹配并显示色差，让你判断近似程度是否可接受。
代码审查与文档
在代码审查时，像 #708090 这样的原始 HEX 值乍一看毫无意义。
颜色名称查找器将其识别为 SlateGray，使审查和文档更具可读性。
CSS 颜色模型参考
CSS 支持多种颜色模型。下表总结了六种最常见格式的语法和典型用途。ToolDeck 的颜色转换器支持所有这些格式。
| 模型 | CSS 语法 | 通道 | 取值范围 | 典型用途 |
|---|
| HEX | #rrggbb | 红、绿、蓝 | 每通道 00–ff | CSS 中最常见，设计交付，品牌规范 |
| RGB | rgb(r, g, b) | 红、绿、蓝 | 每通道 0–255 | JavaScript canvas API、计算样式、图像处理 |
| HSL | hsl(h, s%, l%) | 色相、饱和度、亮度 | 0–360 / 0–100% / 0–100% | 设计令牌、主题生成、程序化色调变体 |
| HSV | N/A（非 CSS 原生） | 色相、饱和度、明度 | 0–360 / 0–100% / 0–100% | 拾色器（Photoshop、Figma）、硬件色彩校准 |
| OKLCH | oklch(L C H) | 亮度、色度、色相 | 0–1 / 0–0.4 / 0–360 | 感知均匀调色板（CSS Color Level 4 规范） |
| Named | 例如 slategray | 内部映射到 RGB | 148 个预定义名称 | 原型设计、可读代码、快速演示 |
CSS Color Level 4（W3C）还定义了 lab()、lch() 和 color() 函数。HEX 和 RGB 在浏览器和设计工具中的兼容性依然最广。
如何选择合适的颜色工具
每个颜色工具解决不同的问题。参考下面的指南为你的任务找到合适的工具。
- 1
如果你需要 在 HEX、RGB、HSL 或 HSV 格式之间转换颜色 → 颜色转换器 - 2
如果你需要 验证文字/背景颜色组合是否符合 WCAG 无障碍标准 → 颜色对比度检测器 - 3
如果你需要 从单一基础颜色生成一组和谐颜色 → 配色方案生成器 - 4
如果你需要 构建线性或径向 CSS 渐变并获取代码 → CSS渐变生成器 - 5
如果你需要 找到与给定颜色值最接近的 CSS 可读名称 → CSS颜色名称查找器 - 6
如果你需要 将任意颜色映射到最近的 Tailwind CSS 工具类 → Tailwind颜色查找器
所有六个工具均支持多种格式的输入。如果不确定你的颜色是哪种格式，请从颜色转换器开始——它可自动识别 HEX、RGB、HSL 和 HSV 表示法。
常见问题
HEX 和 RGB 颜色格式有什么区别？
HEX 和 RGB 表示相同的颜色空间。像 #ff6600 这样的 HEX 代码是三个 RGB 通道的十六进制编码：ff = 255（红）、66 = 102（绿）、00 = 0（蓝）。两者的唯一区别是表示方式。HEX 在 CSS 样式表中更简洁，而 RGB 更易于编程操作，因为每个通道已经是十进制整数。
什么时候应该使用 HSL 而不是 HEX 或 RGB？
HSL 将色相（颜色本身）与饱和度和亮度分离。这使得创建色调变体更加容易：保持色相不变，降低亮度得到更深的色调，提高亮度得到更浅的色调。从单一基础颜色生成明/暗主题的设计系统通常出于此原因将令牌存储为 HSL。CSS 自定义属性与 HSL 也很好地结合，因为你可以单独覆盖各个通道。
WCAG 2.1 对文字对比度有什么要求？
WCAG 2.1 AA 级要求普通文字（低于 18pt 或 14pt 粗体）的最低对比度为 4.5:1，大号文字（18pt 以上或 14pt 粗体以上）为 3:1。AAA 级将这些阈值分别提高到 7:1 和 4.5:1。这些比值使用 WCAG 2.1 成功标准 1.4.3 中定义的公式，根据前景色和背景色的相对亮度计算得出。
CSS 支持多少个命名颜色？
CSS 定义了 148 个命名颜色，继承自 SVG 1.1 和 CSS3 颜色规范。这些颜色涵盖从 red、blue、white 等常见名称到 MediumSlateBlue、PapayaWhip、LavenderBlush 等具体名称。命名颜色映射到固定的 RGB 值。CSS Color Level 4 规范保留相同的 148 个名称，不再新增。浏览器还识别关键字 transparent（等同于 rgba(0,0,0,0)）。
现在可以在 CSS 中使用 OKLCH 颜色吗？
可以。oklch() 函数在 Chrome 111+、Firefox 113+ 和 Safari 15.4+ 中均受支持。OKLCH 是 W3C 发布的 CSS Color Level 4 规范的一部分。与 HSL 相比，其主要优势是感知均匀性：在 OKLCH 中具有相同亮度值的两种颜色，人眼看起来确实一样亮——HSL 并不具备这一特性。这使得 OKLCH 更适合生成具有一致感知亮度的无障碍调色板。
HSL 和 HSV 有什么区别？
HSL 和 HSV 都使用以色相为角度的圆柱表示法，但它们对亮度的定义不同。在 HSL 中，亮度 50% 是纯色；0% 是黑色，100% 是白色。在 HSV 中，明度 100% 是纯色；0% 是黑色。HSV 没有内置的方式在不降低饱和度的情况下达到白色。设计师和拾色器（Photoshop、Figma）通常使用 HSV，而 CSS 原生使用 HSL。
如何为任意 HEX 颜色找到对应的 Tailwind 类？
Tailwind CSS 内置约 220 个颜色类（22 种色相各 10 个色调，加上 black、white 和 transparent）。要为给定的 HEX 值找到最近的类，需要在感知颜色空间（如 CIELAB 或 OKLCH）中计算你的颜色与每个 Tailwind 色板之间的欧几里得距离。ToolDeck 的 Tailwind 颜色查找器自动完成此操作，显示最接近的匹配及色差，让你判断近似程度是否足够好。
将机密品牌颜色粘贴到在线工具中安全吗？
这取决于具体工具。任何将输入发送到服务器的工具都会在网络流量和服务器日志中暴露这些值。ToolDeck 的颜色工具完全使用客户端 JavaScript 在你的浏览器中运行，没有任何 HTTP 请求将你的颜色数据发送到后端。你可以在使用工具时打开浏览器的网络面板进行验证。如需最大程度的谨慎，还可以在首次页面加载后离线使用这些工具。