APP界面色彩定稿
产品经理和开发因为按钮颜色吵了三次：设计稿用的 Material Design 蓝，开发说 iOS 原生蓝在深色模式下对比度不够。两个方案各执一词，没有量化依据。用本工具分别输入两种预设的色值，直接并排预览 Material 和 iOS 预设下的按钮、背景、文字在亮暗模式下的实际视觉效果，并自动标注 WCAG 对比度分数。最终双方对着屏幕上的实测数值和效果图，3 分钟达成一致，选了 iOS 预设加一级加深。
搜索范围
色 阶 网 格Scale Grid · 点色块复制 · 点色族名看详情
点选左侧任一色族
查看完整色阶 + 各阶 HEX / RGB / HSL · 一键复制整族 · 导出
查看完整色阶 + 各阶 HEX / RGB / HSL · 一键复制整族 · 导出
就绪 · 内置 Material / Tailwind / Ant Design / iOS / Bootstrap / Open Color 官方色阶 · 全程浏览器本地处理
第一节
关于本工具
About前端开发调色时，从设计稿的 Material 蓝切到 Tailwind 灰，再对齐 iOS 系统色板，手动翻文档挨个比对低效又易错。在输入框贴入十六进制或 RGB 值，工具立即返回四套预设中最接近的色号，并显示偏差值。所有计算在浏览器内完成，色值不上传服务器——适合在本地反复微调配色方案。
使用场景
品牌色延展到前端框架
设计团队给官网定了品牌主色 #FF6600，但前端用的是 Ant Design 组件库，直接填色号会导致按钮、标签、警告框的配色体系不统一。设计师需要手动逐一调整每个组件的色相、明度、饱和度来适配 Antd 的色阶算法，光调一个按钮的 hover 状态就花了半天。通过本工具输入品牌色，选择 Antd 预设，自动生成整套主色、中性色、功能色（成功/警告/错误）的色阶表，直接复制色值到 Less 变量文件，两小时的工作压缩到 10 分钟。
Tailwind 暗色模式配色
独立开发者用 Tailwind 写个人博客，白天用默认 slate 色系，晚上切暗色模式后发现文字和背景对比度太低，眼睛累。手动改 tailwind.config.js 里的颜色值，改完一个又发现卡片阴影在暗色下变糊，反复调了 4 轮都不满意。用本工具选定 Tailwind 预设，分别输入亮/暗两种模式下的色值，工具自动生成完整的 Tailwind 颜色配置对象，包括 text、bg、border、ring 各层级的明暗对应关系，复制后直接替换配置文件，暗色模式一次调通。
跨端设计稿颜色统一
UI 设计师同时维护 iOS 和 Material Design 两套设计稿，同一个功能模块（比如“提交”按钮）在 iOS 用 SF Pro 字体配系统蓝，在 Android 用 Roboto 配 Material Blue。两套色值靠肉眼对照，经常出现 iOS 的按钮在 Android 上偏紫、Android 的按钮在 iOS 上偏青的问题。用本工具分别输入两套预设的基准色，并排预览两种系统风格下的按钮、导航栏、标签页的配色差异，直接看到色相偏移量，据此微调其中一套的色值，让两端的“提交”按钮在视觉上完全一致。
组件库色阶自动生成
前端团队自建组件库，需要为每个主色生成 50/100/200/…/900 共 10 级色阶。之前靠设计师手动在 Figma 里拉渐变取色，每套色阶耗时 2 小时，且不同设计师拉出来的 500 级色阶亮度不一致，导致组件库里的按钮 hover 效果参差不齐。用本工具选定任意预设（如 Material），输入主色后自动输出 10 级色阶的 Hex 值，同时显示每级的亮度百分比和色相偏移量，确保 500 级色阶的亮度步长均匀。复制后直接写入组件库的 tokens 文件，一套色阶 30 秒完成。
第二节
使用指南
Getting Started使用步骤
- 1点击「预设库」标签，浏览 Material、iOS、Tailwind、Antd 四套色板缩略图，每套显示主色与辅助色数量
- 2选中一套预设（如 Tailwind），右侧预览区立即渲染该套色板的完整色阶卡片，每张卡片显示色值（HEX）
- 3点击任意色阶卡片，色值自动复制到剪贴板，卡片边框高亮 1 秒提示复制成功
- 4在「自定义」标签下拖动色相/饱和度滑块，实时调整当前预设的全局色调，预览区同步更新所有色阶
输入输出示例
| 输入 | 输出 | 说明 |
|---|---|---|
| Material Design 主色 #1976D2 | Primary: #1976D2, Light: #63A4FF, Dark: #004BA0, TextOnPrimary: #FFFFFF | 常规：Material 预设的典型主色，验证三阶调色板（主色/亮色/暗色）和文本对比色输出 |
| Tailwind CSS 颜色 blue-500 | 50: #EFF6FF, 100: #DBEAFE, 200: #BFDBFE, 300: #93C5FD, 400: #60A5FA, 500: #3B82F6, 600: #2563EB, 700: #1D4ED8, 800: #1E40AF, 900: #1E3A8A | 常规：Tailwind 预设的完整色阶（50-900），验证多级渐变输出和命名规范 |
| Ant Design 主色 #1890FF | Primary: #1890FF, Hover: #40A9FF, Active: #096DD9, Text: #333333, Border: #D9D9D9 | 常规：Antd 预设的典型主色，验证悬停/激活/文本/边框等组件级语义色输出 |
| iOS 系统色 blue #007AFF | Blue: #007AFF, Light: #4DA6FF, Dark: #0055CC, Gray: #8E8E93, Red: #FF3B30, Green: #34C759, Orange: #FF9500, Yellow: #FFCC00, Purple: #AF52DE, Pink: #FF2D55 | 边界：iOS 预设包含系统级语义色（红/绿/橙等），验证是否输出完整系统色板而非仅主色 |
| Material Design 错误色 #B00020 | Error: #B00020, OnError: #FFFFFF, ErrorContainer: #FCDEDE, OnErrorContainer: #410002 | 边界：Material 预设的错误语义色，验证深色背景下的对比色和容器色输出 |
| Tailwind CSS 颜色 gray-50（接近白色） | 50: #F9FAFB, 100: #F3F4F6, 200: #E5E7EB, 300: #D1D5DB, 400: #9CA3AF, 500: #6B7280, 600: #4B5563, 700: #374151, 800: #1F2937, 900: #111827 | 边界：Tailwind 极浅色（gray-50），验证浅色起点和色阶过渡的连续性 |
| Ant Design 主色 #F5222D（红色） | Primary: #F5222D, Hover: #FF4D4F, Active: #CF1322, Text: #333333, Border: #D9D9D9 | 易错：红色主色在 Antd 预设中悬停色（#FF4D4F）比主色更亮，验证悬停/激活色方向是否正确（非简单变暗） |
| iOS 系统色 orange #FF9500 | Orange: #FF9500, Light: #FFCC00, Dark: #C93400, Gray: #8E8E93, Red: #FF3B30, Green: #34C759, Yellow: #FFCC00, Blue: #007AFF, Purple: #AF52DE, Pink: #FF2D55 | 易错：iOS 预设中 orange 和 yellow 的浅色（Light）均为 #FFCC00，验证重复色值是否被正确处理或去重 |
常见错误对照
1.直接复制色值，忽略预设命名空间
✗ 错误
从 Tailwind 文档复制 `blue-500` 到 Material 预设里用✓ 修复
在 Material 预设里用 `primary` 或 `blue500`（具体看工具输出格式）各预设（Material / iOS / Tailwind / Antd）有自己的命名规则和色板范围，跨预设混用会导致颜色映射失败或显示为默认值。
2.把十六进制色值写成大写，与预设不匹配
✗ 错误
在 iOS 预设里输入 `#FF5733`✓ 修复
输入 `#ff5733`（小写）部分预设（如 iOS Human Interface Guidelines 示例）要求色值全小写，大写会被工具解析为无效格式，返回空或错误色。
3.在 Tailwind 预设里用旧版命名（v2）
✗ 错误
输入 `gray-500`（Tailwind v2 命名）✓ 修复
输入 `slate-500`（Tailwind v3 命名）Tailwind v3 将 `gray` 重命名为 `slate`，旧名在预设中可能映射到不同色值或不存在，导致输出偏差。
4.Antd 预设里用了不存在的色阶
✗ 错误
输入 `blue-9`（Antd 色阶只有 1-10）✓ 修复
输入 `blue-9` 应改为 `blue-8` 或 `blue-10`，具体查 Antd 色板文档Antd 色阶是 1-10 整数，不存在 9 或 11 等值，工具会忽略或报错，需严格对应官方色板范围。
5.Material 预设里混淆了 primary 和 secondary 语义
✗ 错误
把 `primary` 色值直接复制给 `secondary` 字段✓ 修复
分别从 Material 色板选取 `primary`（主色）和 `secondary`（强调色）的独立色值Material Design 中 primary 和 secondary 有不同语义和对比度要求，混用会导致 UI 层级混乱，工具输出无法直接用于设计稿。
6.iOS 预设里用了系统色名但没带透明度后缀
✗ 错误
输入 `systemBlue`✓ 修复
输入 `systemBlue` 后需补充透明度参数（如 `systemBlue:0.8`）iOS 预设的系统色（如 systemBlue）默认不包含透明度，工具要求显式指定 alpha 值才能生成正确 UIColor 代码。
第三节
工作原理
How It Works核心公式
ΔE = √((L₁ - L₂)² + (a₁ - a₂)² + (b₁ - b₂)²)
变量说明
L₁, L₂两个颜色的亮度分量（0–100）a₁, a₂两个颜色的红绿轴分量（-128–127）b₁, b₂两个颜色的黄蓝轴分量（-128–127）
示例
Material 预设主色 #6200EE 的 Lab 值为 (30, 58, -98)，Tailwind 预设主色 #6366F1 的 Lab 值为 (42, 30, -72)。ΔE = √((30-42)² + (58-30)² + (-98+72)²) = √(144 + 784 + 676) = √1604 ≈ 40.05，超过 2.3 的人眼可辨阈值，两预设色差异显著。
用户输入
本地处理
输出结果
第五节
常见问题
Q & A问调色板预设里的 Material、iOS、Tailwind、Antd 到底有啥区别？＋
答
这四种是不同设计系统的主色板。Material（Google Material Design）偏扁平、强调主色+辅色分层；iOS（Apple HIG）更注重明度渐变和视觉通透感；Tailwind（Utility-first CSS）色阶最多（50-900），适合快速开发；Antd（Ant Design）偏商务/后台，饱和度适中。选哪个取决于你项目用的 UI 框架——比如用 React Antd 组件库就优先选 Antd 预设，用 Tailwind 就选 Tailwind。
问我选了 Tailwind 预设，出来的颜色为什么和我之前手动调的不一样？＋
答
Tailwind 官方色板是基于固定 HSL 值（如 blue-500: hsl(217, 91%, 60%)）定义的，不是任意 RGB 取色。本工具严格按照 Tailwind v3 官方色板输出，如果你之前手动调的颜色偏离了标准色相（比如把蓝色调偏紫）或明度不落在官方阶梯上，就会有差异。建议：先确认你用的 Tailwind 版本——本工具只匹配 v3 标准色板，v2 色阶数量不同（v2 只有 9 级，v3 有 11 级）。
问这个工具能导出 CSS 变量吗？还是只能看颜色预览？＋
答
本工具主要提供预设色板的十六进制色值和对应的 CSS 变量名（如 --md-sys-color-primary、--tw-blue-500），结果区直接复制即可。不支持导出文件（如 .json/.css 文件），因为纯前端工具没有后端存储能力。如果你需要批量导出，建议复制后粘贴到自己的样式文件里；如果项目规模大，推荐直接用对应 UI 框架的官方主题生成器（如 Material Theme Builder）配合本工具做快速参考。
问为什么有些预设颜色看起来饱和度特别高？＋
答
不同设计系统对主色的饱和度定义不同。例如 Material Design 的 Primary 色（如 #6200EE）饱和度通常在 90% 以上，目的是在浅色背景上足够醒目；而 iOS 的 System Blue（#007AFF）饱和度约 85% 但明度更低，更贴合屏幕显示。如果你觉得某个预设颜色刺眼，可以手动降低饱和度——但注意：一旦修改，就不再是官方预设色板，后续升级 UI 框架版本时颜色可能对不上。
问我选了 Antd 预设，但颜色列表里没有我想要的某个色号（比如 #1890ff），怎么办？＋
答
Antd 4.x 主色是 #1890ff（对应 blue-6），5.x 改为 #1677ff（对应 blue-6）。本工具默认输出 Antd 5.x 色板（基于 @ant-design/colors 包）。如果你需要 4.x 老色板，当前版本不支持直接切换——建议手动在结果区输入 #1890ff 自行替换，或使用 Antd 官方色彩计算工具（ant.design/docs/spec/colors）生成。另外注意：Antd 色板中的色阶命名（blue-1 到 blue-10）与 Tailwind（50-900）不同，不要混用。
问在手机上打开这个工具，颜色预览会不会不准？＋
答
颜色预览本身取决于设备屏幕的色域和亮度设置。本工具输出的是标准 sRGB 色值（十六进制），理论上所有现代设备都能正确显示。但如果你手机开了护眼模式或夜览模式，屏幕色温会偏暖，导致颜色看起来偏黄——这不是工具的问题。建议：在开发时用 PC 显示器校准过的屏幕做参考，手机预览只做快速对比，不要作为最终配色依据。
问这个工具的颜色是直接从设计规范里拿的，还是自己算的？＋
答
全部基于对应设计系统的官方色板定义。Material 色板来自 material.io/design/color 的 2014/2018/2021 版本；iOS 色板来自 developer.apple.com/design/human-interface-guidelines/color；Tailwind 色板来自 tailwindcss.com/docs/customizing-colors；Antd 色板来自 ant.design/docs/spec/colors。本工具不做任何插值或自动生成——你看到的每个颜色都是官方文档里写死的值，保证了与对应框架组件库的 100% 一致性。
问我复制了颜色值，但粘贴到 Figma 里发现色差很大，怎么回事？＋
答
Figma 默认使用 sRGB 色域，但部分预设颜色（尤其是 Material 的深色主题色）在 sRGB 下可能会被截断。例如 Material 的 error 色 #B00020 在 sRGB 下显示正常，但如果你在 Figma 里用了 Display P3 色域，红色会显得更鲜艳。建议：在 Figma 中检查颜色面板的色域设置，确保与工具输出一致（均为 sRGB）。另外，如果 Figma 开启了颜色配置文件转换，粘贴时可能自动转换色值，导致偏差——关闭自动转换即可。
隐私保证所有计算与处理均在你的浏览器本地完成，输入数据不会上传服务器，也不会保存或共享。