# Tailwind 色板同步器

输入一组 HEX,选择命名规则(色阶 50–950 / 单名 / 对象嵌套),自动生成 tailwind.config.ts 的 theme.extend.colors 片段,每个色阶同时给出 WCAG AA/AAA 对比等级,可选暗色模式。

> 标准页面: https://elysiatools.com/zh/tools/tailwind-color-palette-sync

- **分类:** Development

- **关键词:** tailwind, tailwind 配置, 色板, 设计令牌, WCAG, 对比度, 暗色模式, HEX

## 概述

把一组 HEX 颜色变成可直接粘贴的 `theme.extend.colors` 配置块,并内置 WCAG 对比度检查。

**你给什么。** 每行一个 HEX。可选加前缀名:`brand: #3b82f6`、`primary: #10b981`。纯 HEX 自动命名 `color1`、`color2`。

**命名规则。**
- **色阶 (50–950):** 每个输入色生成完整 11 档(50、100、200、…、950),向白变浅、向黑变深。适合 `bg-brand-500` / `text-brand-700`。
- **单名:** 每个输入变一个 token(`brand: '#3b82f6'`)。不需要色阶时用。
- **对象嵌套:** 同色阶,但输出成嵌套对象(`brand: { 500: '...', 700: '...' }`)——Tailwind 的地道写法。

**WCAG 对比。** 每个色阶算与白/黑背景的对比比,标注 **AAA**(≥7)、**AA**(≥4.5)、**AA-Large**(≥3)或 **Fail**。一眼看出哪些色阶能做正文、哪些只能做装饰色,让调色板天生可访问。

**暗色模式。** 可选第二组 HEX。工具输出独立的暗色配置,可接 `dark:` 变体或 CSS 变量方案。

**算法。** 浅色档(50–400)在 HSL 空间向纯白插值,深色档(600–950)向纯黑插值,输入色锚定 500 档。产生视觉均匀的色阶,比 RGB 混合更接近 Tailwind 自带的调色板生成。

## 输入项

- **颜色(每行一个 HEX,或 "name: HEX")** (textarea): brand: #3b82f6 accent: #10b981 #f59e0b
- **命名规则** (select)
- **包含暗色模式颜色** (checkbox)
- **暗色模式颜色(可选, 同格式)** (textarea): brand: #60a5fa accent: #34d399

## 适用场景

- 需要将 UI 设计稿中的品牌主色快速扩展为 Tailwind CSS 规范的 11 档（50–950）色阶时。
- 在配置 Tailwind 颜色时，需要确保生成的色阶符合 WCAG AA/AAA 无障碍对比度标准。
- 需要同时为项目配置亮色和暗色两套主题色板，并导出为统一的 Tailwind 配置文件片段时。

## 工作原理

- 在输入框中输入 HEX 颜色值，可使用“名称: #HEX”格式命名，或直接输入 HEX 由系统自动命名。
- 选择命名规则（色阶、单名或对象嵌套），并根据需要勾选启用暗色模式并输入对应的暗色 HEX 颜色。
- 工具通过 HSL 空间插值算法计算出均匀的色阶，并计算各色阶与黑白背景的对比度，标注出 WCAG 等级。
- 实时生成可直接复制的 `theme.extend.colors` 配置代码块，直接粘贴至 `tailwind.config.ts` 中使用。

## 使用案例

- 快速将设计系统（Design System）中的单色扩展为完整的 Tailwind 调色板。
- 检查现有 Tailwind 项目中各颜色色阶的无障碍对比度，优化文本可读性。
- 快速生成支持暗色模式切换的 Tailwind 配置文件，减少手动编写配置的时间。

## 常见问题

### 这个工具是如何生成 50–950 色阶的？

工具以输入的 HEX 颜色作为 500 档基准，在 HSL 颜色空间中，向白插值生成 50–400 浅色档，向黑插值生成 600–950 深色档，确保视觉过渡均匀。

### 什么是对象嵌套（nested）命名规则？

对象嵌套会将色阶输出为 `brand: { 500: '#3b82f6', ... }` 的格式，这是 Tailwind CSS 官方推荐的配置结构。

### WCAG 对比度等级是如何计算的？

工具会自动计算每个色阶与纯白及纯黑背景的对比度比率，并根据标准标注为 AAA（≥7）、AA（≥4.5）、AA-Large（≥3）或 Fail。

### 如何配置暗色模式下的颜色？

勾选“包含暗色模式颜色”选项，在弹出的输入框中输入暗色对应的 HEX 颜色，工具将同步输出适用于暗色主题的配置。

### 如果我输入的 HEX 没有指定名称会怎样？

工具会自动将其命名为 `color1`、`color2` 等默认名称，您也可以随时在输入时通过 `名称: #HEX` 的格式自定义命名。

## 相关工具

- [AI 域名创意生成器](https://elysiatools.com/zh/tools/ai-domain-name-idea-generator): 输入品牌关键词,让 AI 生成最多 10 个创意域名,自动用 DNS 粗筛 + RDAP 复验可用性,过滤掉已注册的。面向创业者、独立开发者、品牌策划。
- [package.json 依赖审计器](https://elysiatools.com/zh/tools/package-json-dependency-auditor): 审计 package.json 的依赖卫生、版本范围质量，并可选地从 package-lock.json 或 yarn.lock 深入检查传递依赖树。会标记重复依赖、通配符或预发布版本、未排序键、缺失元数据，以及运行时/开发时依赖误分类问题。
- [色彩空间转换器](https://elysiatools.com/zh/tools/color-space-converter): 在 HEX、RGB、HSL、CIELAB 与 Display-P3 之间转换颜色，提供 CSS 输出与色域检查。
- [JWK 生成与解析器](https://elysiatools.com/zh/tools/jwk-generator): 生成 RSA、EC（P-256/P-384/P-521/secp256k1）与 OKP（Ed25519/Ed448/X25519/X448）的 JSON Web Key，或解析已有 JWK 以查看参数、指纹与元信息
- [看板周期时间与吞吐量教练](https://elysiatools.com/zh/tools/kanban-cycle-time-throughput-coach): 从 CSV（Jira 风格或简单格式）导入创建→开始→完成时间戳，得到敏捷教练视角的流指标：前置/周期时间分位数、WIP 年龄、按天/周/月的吞吐量、累积流图以及 Little 定律一致性校验。
- [PKCE Code Verifier 与 Challenge 生成器](https://elysiatools.com/zh/tools/pkce-code-verifier-generator): 生成、校验与验证 OAuth2 / OIDC PKCE（RFC 7636）的 code_verifier 与 S256 code_challenge 配对。三种模式：(1) 从密码学安全随机字节（256/384/512/768 位熵）生成全新的 verifier + challenge；(2) 按 RFC 审计你已有的 verifier——长度（43–128）、字符集 \[A-Za-z0-9-._~\] 与 ≥256 位熵；(3) 通过重算 BASE64URL(SHA256(verifier)) 验证 verifier/challenge 配对。可选构建完整的授权请求 URL 与令牌交换体。补足通用的 nonce-generator（仅输出 verifier+challenge 配对）——增加 RFC 合规审计与配对验证。
- [安全响应头检查器](https://elysiatools.com/zh/tools/security-headers-checker): 审计 HTTP 响应头的安全合规性——解析你粘贴的原始头（无网络），按 OWASP 安全头集做值级检查：HSTS max-age、CSP unsafe-inline/eval、X-Content-Type-Options、Referrer-Policy、Permissions-Policy、COOP/COEP/CORP 等。输出字母评级（A+ 到 F）及逐项 Finding 与可复制的修复建议。
- [可变字体轴实例与 CSS font-variation-settings 构建器](https://elysiatools.com/zh/tools/variable-font-axis-instance-and-css-font-variation-settings-builder): 上传可变字体（TTF/OTF/WOFF/WOFF2），检视 fvar 轴与命名实例，浏览器内实时预览插值效果，并生成可直接复制的 font-variation-settings CSS、高级属性等价写法与可变 @font-face 声明。

## 示例

- [颜色代码示例](https://elysiatools.com/zh/samples/color-code): 用于验证测试的各种格式颜色代码集合（Hex、RGB、HSL、命名颜色）
- [Tailwind CSS 示例](https://elysiatools.com/zh/samples/tailwind-css): Tailwind CSS示例 - 实用优先的CSS框架，具有响应式设计、组件和自定义配置
- [Web Python 图像处理示例](https://elysiatools.com/zh/samples/web-image-processing-python): Web Python 图像处理示例，使用 PIL/Pillow 包括读取、保存、缩放和格式转换
- [Android Java 图像处理示例](https://elysiatools.com/zh/samples/android-image-processing-java): Android Java 图像处理示例，包括图像读取保存、缩放和格式转换