Tailwind 配色生成器

在你的浏览器中，把一个品牌色转换为完整的 50-950 Tailwind 色阶（基于 OKLCH），并附带每一档的 WCAG 对比度。

这款 Tailwind 配色生成器完全在你的浏览器中运行。你输入的品牌色以及生成的各档颜色都在你的设备上计算，绝不会上传到 ArrayKit。

打开 CSS 颜色转换器

关于 Tailwind 配色生成器

这款 Tailwind 配色生成器可将单个品牌色转换为完整的 50、100、200……900、950 色阶，让你直接放入 tailwind.config。它不用你去猜 hex 值，而是在 OKLCH（一个感知均匀的空间）中对明度做插值，让每一档看起来都间隔均匀，并会把你的输入吸附到最近的一档，让调色板真正包含你精确的品牌色。每个色块都会显示它的 hex，以及相对黑色和白色的 WCAG 对比度，让你一眼就能看出哪些档用于文本是安全的。你可以把整套色阶复制为 theme.colors 代码块，或复制为 CSS 自定义属性。可粘贴任意 CSS 颜色——hex、rgb()、hsl()，或像 rebeccapurple 这样的命名颜色。一切都在你的设备上计算；你输入的颜色绝不会离开浏览器。

功能特性

如何使用 Tailwind 配色生成器

  1. 输入或选取你的品牌色（hex、rgb()、hsl() 或名称）
  2. 设置颜色名称——它会成为键，例如 brand 或 accent
  3. 查看每档的 WCAG 对比度徽章，找出文本安全的档位
  4. 在 tailwind.config 和 CSS 变量输出之间切换
  5. 复制整个代码块，或点击单个色块获取它的 hex

示例

输入

#7c3aed  (name: brand)

输出

colors: { brand: { 50: '#faf5ff', 500: '#7c3aed', 950: '#2e1065' } }

一个紫罗兰 hex 展开为以 OKLCH 均匀间隔、以 brand 为键的 50-950 色阶。

常见错误与故障排除

常见问题

Tailwind 配色生成器如何构建 50-950 色阶？
它把你的颜色转换到 OKLCH，保持色相不变，在十一个 Tailwind 档位上渐变明度，并向两端收窄彩度。OKLCH 是感知均匀的，因此每一档看起来间隔均匀，而不像普通 HSL 渐变那样在中间档扎堆。
为什么我的品牌色落在了 400 或 600 而不是 500？
生成器会把你的输入吸附到目标明度与它最接近的那一档，并在那里保留你精确的颜色。较浅的品牌色会锚定在接近 300-400，较深的锚定在接近 600-700，因此色阶始终包含你输入的颜色。
每个色块上的对比度数字是什么意思？
它们是该档相对纯黑和纯白的 WCAG 2.x 对比度。绿色徽章至少为 4.5:1（正文的 AA），琥珀色至少为 3:1（大字号或 UI 的 AA）。用它们来选择文本与背景的搭配。
我可以粘贴 rgb()、hsl() 或命名颜色，而不用 hex 吗？
可以。任何 CSS 颜色字符串都行——#7c3aed、rgb(124 58 237)、hsl(262 83% 58%)，或像 rebeccapurple 这样的名称。本工具会解析它，转换为 OKLCH，并以相同方式构建色阶。
我如何在项目中使用输出？
把 tailwind.config 代码块复制进 theme.extend.colors，并引用像 bg-brand-500 或 text-brand-800 这样的类。或者复制 CSS 变量版本，在任何普通 CSS 中使用 var(--brand-500)。修改颜色名称字段即可重命名键。
我输入的颜色会被发送到任何地方吗？
不会。整套色阶——解析、OKLCH 计算、对比度以及两种输出格式——都在你的浏览器中计算。你输入或选取的品牌色绝不会离开你的设备，也不会上传到 ArrayKit。

相关工具

全部 ArrayKit 工具