# 配色工具箱使用教程：颜色转换、配色方案、渐变与对比度一站搞定

> 来源：工具派（https://gjupai.com） 原文页面：https://gjupai.com/tutorial/color-toolkit-guide

## 工具简介

**配色工具箱**是工具派为设计师和前端开发者打造的一站式颜色工具集合，打开一个页面就能完成日常几乎全部与颜色相关的工作。它把七大模块整合在一起：**颜色转换器**（HEX / RGB / HSL / CMYK / HSV 五种格式实时互转，支持颜色名称查询）、**对比度检查**（按 WCAG 标准判定 AA / AAA 是否达标）、**渐变生成器**（线性 / 径向渐变可视化调节并输出 CSS）、**图片取色器**（从上传图片中点击提取颜色）、**CSS 阴影生成器**（最多三层阴影叠加）、**色盲模拟器**（预览颜色在三种色盲视角下的呈现）和**配色方案**（六种经典配色关系自动生成，可一键导出代码）。

所有计算都在浏览器本地完成，无需安装软件，也不用把图片上传到服务器。页面默认主色为 `#3b82f6`，任何一个模块里改了颜色，相关模块都会实时联动。

## 功能亮点

- **五格式互转**：在 HEX、RGB、HSL、CMYK、HSV 任意一种输入框中修改数值，其余四种格式自动同步换算，每种格式都带「复制」按钮，粘贴进代码即用。
- **颜色名称查询**：输入英文颜色名（如 `red`、`skyblue`）直接定位颜色，下方还有按红、橙、黄、绿、青、蓝、紫、粉、棕、灰分组的常用色块，点一下就能套用。
- **六种配色方案**：基于当前主色自动计算互补色、类似色、三角色、分裂互补、四角色、单色六组配色，色块点击即复制，还能整体导出为 CSS / SCSS / JSON / Tailwind 代码。
- **WCAG 对比度检查**：设置背景色与文字色后实时显示对比度比值，并给出 AA、AAA、AA 大字、AAA 大字四项是否通过。
- **渐变与阴影可视化**：渐变支持线性（角度 0–360°）和径向（形状、大小、圆心位置可调），阴影支持三层叠加，预览与 CSS 代码实时同步。

## 使用步骤

1. **选定主色**：在「颜色转换器」卡片中，可以点击「随机生成」按钮随机取色、点击蓝色取色器打开系统调色板，也可以直接在 HEX / RGB / HSL / CMYK / HSV 任意输入框中键入数值——其余格式会自动同步。还可以在「颜色名称查询」框输入英文颜色名，或点击下方分组色块快速套用常用色。

![配色工具箱页面上半部分：左侧颜色转换器卡片包含随机生成按钮、取色器、HEX/RGB/HSL/CMYK/HSV 输入框、颜](article/202607/1783965765904_5979.png)

2. **检查对比度**：在右侧「对比度检查」卡片中分别设置背景色和文字色（取色器或直接输入 HEX），中间的示例文字会实时预览效果，下方显示对比度比值以及 AA / AAA / AA 大字 / AAA 大字四项判定，绿色「通过」即满足 WCAG 无障碍标准。

3. **生成渐变**：在「渐变生成器」卡片中设置起始色和结束色，选择「线性渐变」可拖动滑杆调整角度（0–360°），选择「径向渐变」可调整形状（circle / ellipse）、大小（closest-side 等四种）和圆心 X / Y 位置。预览条下方就是对应的 CSS 代码，点「复制」即可使用；懒得配色时可直接点击 12 个渐变预设之一。

4. **从图片取色**：在「图片取色器」卡片中点击或拖拽上传图片，鼠标在图片上移动时右上角会显示当前悬停位置的颜色，点击即可把该颜色提取到「已提取颜色」列表并同步为主色，点色块可再次套用，点「清空」重新开始。

5. **调节 CSS 阴影**：在「CSS 阴影生成器」卡片中用滑杆调整 X / Y 偏移、模糊半径、扩散半径、颜色和透明度，灰色区域的白色方块实时预览阴影效果，下方复制 `box-shadow` 代码。需要层次感时点「+ 添加阴影层」，最多叠加三层。

6. **色盲模拟检查**：「色盲模拟器」卡片会自动把当前主色按红色盲、绿色盲、蓝色盲三种视角换算并展示，同时给出模拟色与白色背景的 WCAG AA 判定，做无障碍设计时用它来验证配色是否对色觉障碍用户友好。

7. **生成配色方案并导出**：页面底部的「配色方案」卡片会基于当前主色自动生成六组配色，点击任意色块即可复制该颜色 HEX 值并把它设为主色。确定整套配色后点击「导出配色板」，在弹窗中选择 CSS、SCSS、JSON 或 Tailwind 格式，一键复制全部色值代码。

![配色工具箱页面下半部分：上方是 CSS 阴影生成器的白色方块阴影预览和 box-shadow 代码复制区，下方配色方案卡](article/202607/1783965766359_2070.png)

## 参数说明

| 模块 | 参数 | 说明 | 默认值 / 可选值 |
| --- | --- | --- | --- |
| 颜色转换器 | 随机生成 / 取色器 | 随机产生颜色或用系统调色板选色（随机生成消耗一次免费额度） | 默认主色 `#3b82f6` |
| 颜色转换器 | HEX / RGB / HSL / CMYK / HSV | 五种颜色格式输入框，改任意一个其余自动同步 | RGB 0–255；H 0–360；S/L/V 0–100；CMYK 0–100 |
| 颜色转换器 | 颜色名称查询 | 输入英文颜色名定位颜色，或点击分组色块套用 | 内置 50 个常用颜色名，按 10 个色相分组 |
| 对比度检查 | 背景色 / 文字色 | 参与对比度计算的两个颜色 | 默认 `#ffffff` / `#000000` |
| 对比度检查 | 判定标准 | WCAG 阈值：AA ≥ 4.5、AAA ≥ 7、AA 大字 ≥ 3、AAA 大字 ≥ 4.5 | 实时自动判定 |
| 渐变生成器 | 渐变类型 | 线性渐变或径向渐变 | 默认线性 |
| 渐变生成器 | 角度 / 形状 / 大小 / 圆心 | 线性调角度；径向调 circle/ellipse、四种尺寸关键字和圆心 X/Y | 默认 135°；ellipse；farthest-corner；50% 50% |
| 渐变生成器 | 渐变预设 | 一键套用精心搭配的渐变色组合 | 12 个预设 |
| 图片取色器 | 上传图片 | 点击或拖拽上传，悬停预览、点击取色（消耗一次免费额度） | 支持常见图片格式 |
| CSS 阴影生成器 | X/Y 偏移、模糊、扩散、颜色、透明度 | 每层阴影的六个参数 | X/Y −50~50；模糊 0~100；扩散 −50~50；透明度 0~100% |
| CSS 阴影生成器 | 阴影层数 | 多层阴影叠加出更自然的效果 | 默认 1 层，最多 3 层 |
| 色盲模拟器 | 模拟类型 | 红色盲 / 绿色盲 / 蓝色盲三种色觉模拟 | 基于当前主色自动换算 |
| 配色方案 | 方案类型 | 互补色（+180°）、类似色（±30°）、三角色（+120°/240°）、分裂互补（+150°/210°）、四角色（+90°/180°/270°）、单色（明度 ±10/±20） | 随主色实时生成 |
| 配色方案 | 导出格式 | 整套配色的代码导出格式 | CSS / SCSS / JSON / Tailwind |

## 使用技巧

- **改一处、全联动**：无论从哪个模块得到颜色（取色器、图片取色、配色色块），它都会成为新的主色，对比度、色盲模拟、配色方案全部实时更新，适合围绕一个品牌色做完整推演。
- **从图片快速建色板**：看到喜欢的海报或网页截图，直接拖进图片取色器，连续点击画面中的关键颜色，整套色板就收集好了，再配合「导出配色板」直接变成代码变量。
- **对比度先看大字标准**：标题类大号文字（约 18pt 以上）只需满足 AA 大字（≥ 3:1），正文才需要 4.5:1。正文达标困难时，至少保证大字通过。
- **阴影用两层更自然**：一层近距离深色小阴影 + 一层远距离浅色大阴影，比单层阴影柔和得多，这也是 Material Design 的常见做法。
- **色盲模拟用于自查**：红绿搭配是色盲用户最难区分的组合，做完配色后到色盲模拟器看一眼，若模拟结果糊成一片，就该换色相或拉开明度差。
- **导出格式按需选**：普通项目选 CSS 变量，用 Sass 选 SCSS，需要给程序消费选 JSON，Tailwind 项目选 Tailwind 直接并入配置。

## 常见问题

**Q1：为什么点「随机生成」或上传图片时提示额度相关的内容？**
这两项操作会消耗工具的每日免费额度（页面上方有额度条显示剩余次数）。其余所有功能——手动输入颜色、对比度检查、渐变、阴影、色盲模拟、配色方案与导出——都不消耗额度，可以放心无限次使用。

**Q2：上传的图片会被保存到服务器吗？**
不会。图片只在浏览器本地用 Canvas 读取像素完成取色，不会上传到任何服务器，刷新页面后即消失。

**Q3：HEX 输入框支持三位简写（如 #fff）吗？**
输入框按六位 HEX 解析，建议写完整的六位格式（如 `#ffffff`），其它格式输入框会自动同步换算结果。

**Q4：配色方案里的色块点一下会发生什么？**
两件事：该颜色的 HEX 值被复制到剪贴板，同时它被设为新的主色，页面所有模块（转换器、色盲模拟、配色方案等）都会围绕它重新计算。

**Q5：导出的 Tailwind 代码怎么用？**
复制后合并到 `tailwind.config.js` 的 `theme.extend.colors` 中，即可在 class 里使用 `bg-color-1`、`text-color-2` 这类颜色类名。