Tailwind颜色生成器

前端工程师与UI设计师在搭建设计系统时，需要从品牌色快速生成一套科学、无障碍的Tailwind色阶——Kigen的Color Generator通过算法插值（支持HSL/RGB/Oklch）自动输出50至950共11阶色板，并直接导出Tailwind配置、CSS变量及Figma token。

它能做什么：从基色到完整色阶的一键生成

输入任意HEX/RGBA/HSL/OKLCH颜色（支持取色器或空格键随机生成），算法自动计算从接近白色的50到接近黑色的950共11个阶梯。核心参数可调：色相偏移量（Shift 0.00）、命名模式（50,100...900）、色阶数量（Shade Count 11）。支持导出格式：CSS、Tailwind 4 Tokens、HEX、RGBA、HSL、OKLCH，以及SVG/Figma空模板。

• 算法对比度控制：内置Contrast滑块，确保深色阶（如900/950）在浅色背景上满足WCAG无障碍标准
• 色相偏移（Hue Shifting）：生成过程中自动微调色相，避免传统暗化函数导致的浑浊或霓虹感
• 实时预览面板：左侧显示完整色阶色块，右侧同步更新CSS与Tailwind配置代码
• Figma插件集成：可直接在Figma内调用生成器，输出设计Token

适合谁用：设计系统团队与框架开发者

主要面向使用Tailwind CSS的UI/UX设计师、前端工程师和设计系统架构师。材料指出，手动选取11种颜色会导致亮度阶梯不一致和对比度失败，而Kigen通过数学插值（HSL/RGB/Oklch空间）保证“蓝色的700与红色的700具有相同的感知视觉权重”。

• 品牌色扩展：将单一品牌主色自动扩展为完整的交互状态色阶（如按钮基色500、悬停600、激活700、背景50、文本900）
• 深色模式适配：950色阶专为现代深色界面设计，提供接近黑色的深色调
• 多色彩空间支持：除HEX外，支持OKLCH——CSS Color Module Level 4标准化的感知均匀色彩空间

收费与限制：免费Web工具，插件需注意

Web端（kigen.design/color）完全免费，无付费墙。Figma插件（名为“Design System new Figma plugin”）处于开发中状态，材料未明确其定价。站点由Overlayz Studio的realvjy开发，与Figma无官方关联。

• 无中文界面：所有标签、提示和导出代码均为英文
• 无账号系统：无需注册即可使用，所有操作在浏览器端完成
• 导出格式限制：仅支持代码导出，不支持图片或PDF色板导出

常见问题

Q1：Kigen的Color Generator如何保证生成色阶的对比度无障碍？

A1：工具内置Contrast滑块（默认0.00），通过算法在HSL或Oklch空间中调整亮度与饱和度，确保深色阶（如900/950）与浅色阶（50/100）之间的对比度符合WCAG标准。材料强调，手动选取颜色常导致“深红色比深蓝色更难阅读”，而Kigen的数学插值使不同色相的同级色阶具有一致的感知权重。

Q2：生成的色阶能否直接用于Tailwind CSS项目？

A2：可以。导出选项包括Tailwind 4 Tokens格式（直接复制到tailwind.config.js的colors对象）和CSS变量（如--color-500: #ff0000）。此外支持HEX、RGBA、HSL、OKLCH四种颜色值格式，满足不同框架需求。

Q3：Kigen与Tailwind官方默认调色板有何不同？

A3：Tailwind v1的默认调色板由设计师Steve Schoger手动调优，包含色相偏移但无法直接用于品牌色扩展。Kigen通过算法逆向工程了这种“光学调整”，用户输入任意基色即可获得风格一致的11阶色板，而非仅使用官方预设的22种颜色。

更多同类工具与网站,可在颜色搭配分类继续挑选。

信息核实于 2026年7月,具体以官网为准。