🎯 基础颜色
🌈 色阶预览
🎨 配色方案预览
📋 导出配置
❓ 常见问题
Tailwind CSS颜色配置生成器是免费的吗？
是的，完全免费使用，无需注册，无需登录，所有功能都可以直接使用。
生成的颜色配置如何使用？
点击导出按钮获取tailwind.config.js代码，将colors部分复制到你的Tailwind配置文件中即可使用自定义颜色类名如bg-primary-500。
支持哪些颜色格式输入？
支持HEX（#3b82f6）、RGB（rgb(59,130,246)）、HSL（hsl(217,91%,60%)）和CSS颜色名称输入。
数据会上传到服务器吗？
不会。本工具采用纯前端技术，所有处理都在你的浏览器中完成，数据不会上传到任何服务器。
如何生成和谐的配色方案？
选择一个基础颜色后，工具会自动生成互补色、类似色、三等分等和谐配色方案，也可手动调节HSL值微调每个色阶。
支持Tailwind CSS v4吗？
本工具生成兼容Tailwind CSS v3.x和v4.x的颜色配置代码。v4使用CSS变量方式，工具提供两种导出格式。
Tailwind CSS颜色配置生成器能做什么？
Tailwind CSS颜色配置生成器是一款专为前端开发者设计的在线工具，帮助你快速创建自定义Tailwind CSS颜色主题。通过可视化界面选择基础颜色，自动生成50-950共11个色阶，支持互补色、类似色、三等分等多种配色方案，一键导出tailwind.config.js配置代码，让你的项目拥有独特的品牌配色。
核心功能
- 智能色阶生成：基于HSL色彩空间，从基础颜色自动生成50到950共11个色阶，确保每个色阶过渡自然和谐
- 多种配色方案：支持单色、互补色、类似色、三等分、分裂互补、四等分6种经典配色方案
- HSL精细调节：通过色相、饱和度、亮度三个滑块精确控制颜色，实时预览效果
- 多格式导出：支持tailwind.config.js（v3）、CSS变量（v4）、SCSS变量、CSS类名4种导出格式
- 多组颜色管理：可同时配置primary、secondary、accent等多组颜色，统一管理项目配色
使用教程
1. 在颜色选择器中选择基础颜色，或直接输入HEX值
2. 使用HSL滑块微调色相、饱和度和亮度
3. 选择配色方案查看不同色彩组合效果
4. 点击色阶条中的任意色阶可复制对应HEX值
5. 选择导出格式，点击复制或下载获取配置代码
6. 将配置代码粘贴到项目的tailwind.config.js中即可使用
应用场景
场景1：品牌网站开发
设计师提供品牌主色后，使用本工具快速生成完整的Tailwind颜色配置，确保网站各处颜色使用一致且层次分明。
场景2：组件库开发
开发UI组件库时，需要为primary、secondary、success、warning、danger等语义化颜色生成色阶，本工具一键完成。
场景3：主题切换功能
为支持多主题的应用生成不同颜色配置，通过CSS变量方式导出，轻松实现亮色/暗色主题切换。
扩展知识
Tailwind CSS默认提供slate、gray、zinc、neutral、stone、red、orange、amber、yellow、lime、green、emerald、teal、cyan、sky、blue、indigo、violet、purple、fuchsia、pink、rose共22种颜色，每种颜色包含50-950共11个色阶。当默认颜色无法满足品牌需求时，就需要自定义颜色配置。Tailwind v3通过tailwind.config.js的extend.colors添加自定义颜色，v4则推荐使用CSS变量方式定义，更灵活且支持运行时切换。