Elysia Tools
导航
Development
输入一组 HEX,选择命名规则(色阶 50–950 / 单名 / 对象嵌套),自动生成 tailwind.config.ts 的 theme.extend.colors 片段,每个色阶同时给出 WCAG AA/AAA 对比等级,可选暗色模式。
详情
把一组 HEX 颜色变成可直接粘贴的 theme.extend.colors 配置块,并内置 WCAG 对比度检查。
你给什么。 每行一个 HEX。可选加前缀名:brand: #3b82f6、primary: #10b981。纯 HEX 自动命名 color1、color2。
命名规则。
bg-brand-500 / text-brand-700。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 自带的调色板生成。
执行
填写表单、运行工具，并在同一页面查看结果。
等待运行
案例
相关内容
工具使用指南
Tailwind 色板同步器是一款专为前端开发者与 UI 设计师打造的实用工具，支持将输入的 HEX 颜色代码快速转换为符合 Tailwind CSS 规范的 `theme.extend.colors` 配置代码。工具内置 HSL 空间插值算法生成视觉均匀的 50–950 色阶，并自动计算每个色阶在黑白背景下的 WCAG 对比度等级，同时支持一键生成暗色模式配置，帮助您轻松构建无障碍且易于维护的设计系统。
背景
正在从头搭建一个基于 Tailwind CSS 的企业官网，设计规范中只给出了品牌主色和辅助色的单一 HEX 值。
问题
需要将这两个颜色扩展为 50–950 的 11 档色阶，并以 Tailwind 推荐的嵌套对象格式写入配置文件。
如何使用
在颜色输入框中输入 `brand: #3b82f6` 和 `accent: #10b981`，命名规则选择“对象嵌套 (nested)”，点击生成。
colors: "brand: #3b82f6\naccent: #10b981"
namingScheme: "nested"
includeDarkMode: false结果
获得了一段包含 `brand` 和 `accent` 完整 11 档色阶的嵌套 JSON 代码，可直接粘贴到 `tailwind.config.ts` 的 `theme.extend.colors` 中，且每个色阶都标有 WCAG 对比度等级。
背景
正在为一个仪表盘项目配置主题色，需要支持亮色和暗色模式，且颜色不需要生成色阶，只需单值映射。
问题
需要快速生成亮暗两套主题的 Tailwind 颜色配置，并确保对比度达标。
如何使用
输入亮色 `primary: #6366f1` 等，勾选“包含暗色模式颜色”，在暗色输入框中输入 `primary: #818cf8` 等，命名规则选择“单名 (single)”。
colors: "primary: #6366f1\nsuccess: #22c55e"\nnamingScheme: "single"\nincludeDarkMode: true\ndarkColors: "primary: #818cf8\nsuccess: #4ade80"结果
工具以输入的 HEX 颜色作为 500 档基准，在 HSL 颜色空间中，向白插值生成 50–400 浅色档，向黑插值生成 600–950 深色档，确保视觉过渡均匀。
对象嵌套会将色阶输出为 `brand: { 500: '#3b82f6', ... }` 的格式，这是 Tailwind CSS 官方推荐的配置结构。
工具会自动计算每个色阶与纯白及纯黑背景的对比度比率，并根据标准标注为 AAA（≥7）、AA（≥4.5）、AA-Large（≥3）或 Fail。
勾选“包含暗色模式颜色”选项，在弹出的输入框中输入暗色对应的 HEX 颜色，工具将同步输出适用于暗色主题的配置。
工具会自动将其命名为 `color1`、`color2` 等默认名称，您也可以随时在输入时通过 `名称: #HEX` 的格式自定义命名。
成功导出亮色与暗色模式对应的单值颜色配置片段，并清晰了解各颜色在不同背景下的 WCAG 可读性表现。