Tailwind CSS 颜色生成器

输入一个基础颜色，生成完整的 Tailwind CSS 色阶（50-950）。复制配置代码到 tailwind.config.js。

色阶预览

tailwind.config.js

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand': {
        50: '#f3f6fc',
        100: '#e3ebf7',
        200: '#c0d5f7',
        300: '#92b6f1',
        400: '#538ce9',
        500: '#0b64f4',
        600: '#0954cd',
        700: '#0846ab',
        800: '#11356e',
        900: '#0c244b',
        950: '#07152c',
        },
      },
    },
  },
}

如何使用 Tailwind 颜色生成器

  1. 1.点击色块或在输入框中输入 HEX 颜色代码。
  2. 2.设置一个颜色名称以匹配你的设计系统（如 "brand"、"primary"）。
  3. 3.预览从基础颜色生成的所有 11 个色阶（50 到 950）。
  4. 4.点击任意色阶复制其 HEX 值，或复制完整的配置代码到 tailwind.config.js。

常见问题

色阶生成的原理是什么？

工具将基础颜色转换为 HSL，然后通过改变明度值（从 97% 到 10%）生成 11 个色阶，同时略微调整饱和度以获得更自然的效果。

可以用于 Tailwind CSS v4 吗？

可以。生成的配置代码兼容 Tailwind CSS v3 和 v4。对于 v4 基于 CSS 的配置，你可以直接在 CSS 自定义属性中使用 HEX 值。

为什么某些色阶与默认 Tailwind 调色板不同？

默认 Tailwind 颜色是设计师手动调整的。此生成器使用基于 HSL 明度的算法方法，效果不错但可能与手工调色略有差异。

可以生成多个调色板吗？

更改颜色名称和基础颜色即可生成不同的调色板。复制每个配置代码，在 tailwind.config.js 的 colors 键下组合使用。