<h2>工具简介</h2>
配色工具箱是工具派为设计师和前端开发者打造的一站式颜色工具集合，打开一个页面就能完成日常几乎全部与颜色相关的工作。它把七大模块整合在一起：颜色转换器（HEX / RGB / HSL / CMYK / HSV 五种格式实时互转，支持颜色名称查询）、对比度检查（按 WCAG 标准判定 AA / AAA 是否达标）、渐变生成器（线性 / 径向渐变可视化调节并输出 CSS）、图片取色器（从上传图片中点击提取颜色）、CSS 阴影生成器（最多三层阴影叠加）、色盲模拟器（预览颜色在三种色盲视角下的呈现）和配色方案（六种经典配色关系自动生成，可一键导出代码）。
所有计算都在浏览器本地完成，无需安装软件，也不用把图片上传到服务器。页面默认主色为 <code>#3b82f6</code>，任何一个模块里改了颜色，相关模块都会实时联动。
<h2>功能亮点</h2>
<ul>
<li>五格式互转：在 HEX、RGB、HSL、CMYK、HSV 任意一种输入框中修改数值，其余四种格式自动同步换算，每种格式都带「复制」按钮，粘贴进代码即用。</li>
<li>颜色名称查询：输入英文颜色名（如 <code>red</code>、<code>skyblue</code>）直接定位颜色，下方还有按红、橙、黄、绿、青、蓝、紫、粉、棕、灰分组的常用色块，点一下就能套用。</li>
<li>六种配色方案：基于当前主色自动计算互补色、类似色、三角色、分裂互补、四角色、单色六组配色，色块点击即复制，还能整体导出为 CSS / SCSS / JSON / Tailwind 代码。</li>
<li>WCAG 对比度检查：设置背景色与文字色后实时显示对比度比值，并给出 AA、AAA、AA 大字、AAA 大字四项是否通过。</li>
<li>渐变与阴影可视化：渐变支持线性（角度 0–360°）和径向（形状、大小、圆心位置可调），阴影支持三层叠加，预览与 CSS 代码实时同步。</li>
</ul>
<h2>使用步骤</h2>
<ol>
<li>选定主色：在「颜色转换器」卡片中，可以点击「随机生成」按钮随机取色、点击蓝色取色器打开系统调色板，也可以直接在 HEX / RGB / HSL / CMYK / HSV 任意输入框中键入数值——其余格式会自动同步。还可以在「颜色名称查询」框输入英文颜色名，或点击下方分组色块快速套用常用色。</li>
</ol>
<img src="article/202607/1783965765904_5979.png" alt="配色工具箱页面上半部分：左侧颜色转换器卡片包含随机生成按钮、取色器、HEX/RGB/HSL/CMYK/HSV 输入框、颜">
<ol start="2">
<li>检查对比度：在右侧「对比度检查」卡片中分别设置背景色和文字色（取色器或直接输入 HEX），中间的示例文字会实时预览效果，下方显示对比度比值以及 AA / AAA / AA 大字 / AAA 大字四项判定，绿色「通过」即满足 WCAG 无障碍标准。
</li>
<li>生成渐变：在「渐变生成器」卡片中设置起始色和结束色，选择「线性渐变」可拖动滑杆调整角度（0–360°），选择「径向渐变」可调整形状（circle / ellipse）、大小（closest-side 等四种）和圆心 X / Y 位置。预览条下方就是对应的 CSS 代码，点「复制」即可使用；懒得配色时可直接点击 12 个渐变预设之一。
</li>
<li>从图片取色：在「图片取色器」卡片中点击或拖拽上传图片，鼠标在图片上移动时右上角会显示当前悬停位置的颜色，点击即可把该颜色提取到「已提取颜色」列表并同步为主色，点色块可再次套用，点「清空」重新开始。
</li>
<li>调节 CSS 阴影：在「CSS 阴影生成器」卡片中用滑杆调整 X / Y 偏移、模糊半径、扩散半径、颜色和透明度，灰色区域的白色方块实时预览阴影效果，下方复制 <code>box-shadow</code> 代码。需要层次感时点「+ 添加阴影层」，最多叠加三层。
</li>
<li>色盲模拟检查：「色盲模拟器」卡片会自动把当前主色按红色盲、绿色盲、蓝色盲三种视角换算并展示，同时给出模拟色与白色背景的 WCAG AA 判定，做无障碍设计时用它来验证配色是否对色觉障碍用户友好。
</li>
<li>生成配色方案并导出：页面底部的「配色方案」卡片会基于当前主色自动生成六组配色，点击任意色块即可复制该颜色 HEX 值并把它设为主色。确定整套配色后点击「导出配色板」，在弹窗中选择 CSS、SCSS、JSON 或 Tailwind 格式，一键复制全部色值代码。
</li>
</ol>
<img src="article/202607/1783965766359_2070.png" alt="配色工具箱页面下半部分：上方是 CSS 阴影生成器的白色方块阴影预览和 box-shadow 代码复制区，下方配色方案卡">
<h2>参数说明</h2>
<table>
<thead>
<tr>
<th>模块</th>
<th>参数</th>
<th>说明</th>
<th>默认值 / 可选值</th>
</tr>
</thead>
<tbody><tr>
<td>颜色转换器</td>
<td>随机生成 / 取色器</td>
<td>随机产生颜色或用系统调色板选色（随机生成消耗一次免费额度）</td>
<td>默认主色 <code>#3b82f6</code></td>
</tr>
<tr>
<td>颜色转换器</td>
<td>HEX / RGB / HSL / CMYK / HSV</td>
<td>五种颜色格式输入框，改任意一个其余自动同步</td>
<td>RGB 0–255；H 0–360；S/L/V 0–100；CMYK 0–100</td>
</tr>
<tr>
<td>颜色转换器</td>
<td>颜色名称查询</td>
<td>输入英文颜色名定位颜色，或点击分组色块套用</td>
<td>内置 50 个常用颜色名，按 10 个色相分组</td>
</tr>
<tr>
<td>对比度检查</td>
<td>背景色 / 文字色</td>
<td>参与对比度计算的两个颜色</td>
<td>默认 <code>#ffffff</code> / <code>#000000</code></td>
</tr>
<tr>
<td>对比度检查</td>
<td>判定标准</td>
<td>WCAG 阈值：AA ≥ 4.5、AAA ≥ 7、AA 大字 ≥ 3、AAA 大字 ≥ 4.5</td>
<td>实时自动判定</td>
</tr>
<tr>
<td>渐变生成器</td>
<td>渐变类型</td>
<td>线性渐变或径向渐变</td>
<td>默认线性</td>
</tr>
<tr>
<td>渐变生成器</td>
<td>角度 / 形状 / 大小 / 圆心</td>
<td>线性调角度；径向调 circle/ellipse、四种尺寸关键字和圆心 X/Y</td>
<td>默认 135°；ellipse；farthest-corner；50% 50%</td>
</tr>
<tr>
<td>渐变生成器</td>
<td>渐变预设</td>
<td>一键套用精心搭配的渐变色组合</td>
<td>12 个预设</td>
</tr>
<tr>
<td>图片取色器</td>
<td>上传图片</td>
<td>点击或拖拽上传，悬停预览、点击取色（消耗一次免费额度）</td>
<td>支持常见图片格式</td>
</tr>
<tr>
<td>CSS 阴影生成器</td>
<td>X/Y 偏移、模糊、扩散、颜色、透明度</td>
<td>每层阴影的六个参数</td>
<td>X/Y −50<del>50；模糊 0</del>100；扩散 −50<del>50；透明度 0</del>100%</td>
</tr>
<tr>
<td>CSS 阴影生成器</td>
<td>阴影层数</td>
<td>多层阴影叠加出更自然的效果</td>
<td>默认 1 层，最多 3 层</td>
</tr>
<tr>
<td>色盲模拟器</td>
<td>模拟类型</td>
<td>红色盲 / 绿色盲 / 蓝色盲三种色觉模拟</td>
<td>基于当前主色自动换算</td>
</tr>
<tr>
<td>配色方案</td>
<td>方案类型</td>
<td>互补色（+180°）、类似色（±30°）、三角色（+120°/240°）、分裂互补（+150°/210°）、四角色（+90°/180°/270°）、单色（明度 ±10/±20）</td>
<td>随主色实时生成</td>
</tr>
<tr>
<td>配色方案</td>
<td>导出格式</td>
<td>整套配色的代码导出格式</td>
<td>CSS / SCSS / JSON / Tailwind</td>
</tr>
</tbody></table>
<h2>使用技巧</h2>
<ul>
<li>改一处、全联动：无论从哪个模块得到颜色（取色器、图片取色、配色色块），它都会成为新的主色，对比度、色盲模拟、配色方案全部实时更新，适合围绕一个品牌色做完整推演。</li>
<li>从图片快速建色板：看到喜欢的海报或网页截图，直接拖进图片取色器，连续点击画面中的关键颜色，整套色板就收集好了，再配合「导出配色板」直接变成代码变量。</li>
<li>对比度先看大字标准：标题类大号文字（约 18pt 以上）只需满足 AA 大字（≥ 3:1），正文才需要 4.5:1。正文达标困难时，至少保证大字通过。</li>
<li>阴影用两层更自然：一层近距离深色小阴影 + 一层远距离浅色大阴影，比单层阴影柔和得多，这也是 Material Design 的常见做法。</li>
<li>色盲模拟用于自查：红绿搭配是色盲用户最难区分的组合，做完配色后到色盲模拟器看一眼，若模拟结果糊成一片，就该换色相或拉开明度差。</li>
<li>导出格式按需选：普通项目选 CSS 变量，用 Sass 选 SCSS，需要给程序消费选 JSON，Tailwind 项目选 Tailwind 直接并入配置。</li>
</ul>
<h2>常见问题</h2>
Q1：为什么点「随机生成」或上传图片时提示额度相关的内容？ 这两项操作会消耗工具的每日免费额度（页面上方有额度条显示剩余次数）。其余所有功能——手动输入颜色、对比度检查、渐变、阴影、色盲模拟、配色方案与导出——都不消耗额度，可以放心无限次使用。
Q2：上传的图片会被保存到服务器吗？ 不会。图片只在浏览器本地用 Canvas 读取像素完成取色，不会上传到任何服务器，刷新页面后即消失。
Q3：HEX 输入框支持三位简写（如 #fff）吗？ 输入框按六位 HEX 解析，建议写完整的六位格式（如 <code>#ffffff</code>），其它格式输入框会自动同步换算结果。
Q4：配色方案里的色块点一下会发生什么？ 两件事：该颜色的 HEX 值被复制到剪贴板，同时它被设为新的主色，页面所有模块（转换器、色盲模拟、配色方案等）都会围绕它重新计算。
Q5：导出的 Tailwind 代码怎么用？ 复制后合并到 <code>tailwind.config.js</code> 的 <code>theme.extend.colors</code> 中，即可在 class 里使用 <code>bg-color-1</code>、<code>text-color-2</code> 这类颜色类名。

## 工具简介

**配色工具箱**是工具派为设计师和前端开发者打造的一站式颜色工具集合，打开一个页面就能完成日常几乎全部与颜色相关的工作。它把七大模块整合在一起：**颜色转换器**（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` 这类颜色类名。


免费在线配色工具箱，集成颜色五格式互转、颜色名查询、六种配色方案生成与导出、线性/径向渐变生成、WCAG 对比度检查、图片取色、CSS 阴影生成和色盲模拟，浏览器本地运行，附详细图文教程。

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