Tailwind 颜色生成
从 1 色的 Hex 代码生成 Tailwind CSS 的 50～950 的 11 阶调调色板和设置代码
特点
从 1 色自动生成 11 阶调
将输入的颜色置于 500，计算 50～950 的浓淡
支持 v3 和 v4 两种格式
通过选项卡切换 config 和 @theme 的写法
逐阶调复制 Hex 代码
通过每个色块按钮逐个复制颜色代码
输入时实时更新调色板
无需执行按钮，可以试验颜色并进行比较
使用方法
输入基准色的 Hex 代码
输入 Hex 代码，或点击左端的色块打开取色器选择
根据需要输入颜色名称
用英文小写输入代码中使用的颜色名称。如果为空，则使用 primary
确认 11 阶调的色块
确认 50～950 的色块和 Hex 代码，通过色块上的复制按钮逐个复制
选择输出格式并复制
选择 v3 或 v4，点击「复制代码」粘贴到 tailwind.config.js 或 CSS 文件
使用场景
创建品牌色的浓淡
从品牌色 1 色统一生成按钮悬停和背景使用的浓淡
添加标准调色板中不存在的颜色
将 Tailwind 标准色中不存在的项目独有颜色以 11 阶调方式添加到设置文件
创建 v4 的 @theme 设置
从网站主色生成 Tailwind v4 CSS 变量设置
设计稿实现准备
从设计稿指定色准备实现用的 11 阶调代码，并转录到设计工具
基础知识
Tailwind 的 50～950 代表什么
Tailwind CSS 的颜色用 50～950 这 11 个数字表示明度，50 最浅，950 最深，500 是该颜色的基准。数字作为后缀用在「bg-primary-500」或「text-primary-700」这样的类名中。
- 50～300 阶调：50～300 阶调是常用于背景色或浅色填充的明亮颜色，即使在上面放置深色文字也易于阅读。
- 600～950 阶调：600～950 阶调是常用于按钮悬停或标题文字颜色的深色，在白色背景上也清晰可见。
v3 和 v4 颜色定义方法的差异
Tailwind CSS v3 在 tailwind.config.js 中用 JavaScript 定义颜色，v4 在 CSS 文件的 @theme 中用 CSS 变量定义。无论哪种写法，定义的颜色都可用「bg-primary-500」这样的相同类名使用。
- v3 的写法：v3 的写法是在 theme.extend.colors 中，像「primary: { 500: '#3B82F6' }」这样嵌套输入颜色名和阶调的格式。
- v4 的写法：v4 的写法是在 @theme 中，像「--color-primary-500: #3B82F6;」这样用连字符连接颜色名和阶调的变量名形式。
安全性和隐私
浏览器内完成
输入数据仅在您的浏览器内处理，不会发送至外部。
仅在浏览器内处理
调色板的计算和代码生成完全在您的浏览器内进行，输入数据不会发送到服务器。
通信采用HTTPS加密
页面加载也通过TLS加密，第三方无法读取内容。
不向第三方发送
不向广告网络、跟踪器等外部服务发送输入内容。
结果不自动保存
输入的颜色和颜色名称和输入建议不会保存到服务器。
在Google搜索中关注RAKKOTOOLS
187个实用工具，在Google搜索和AI搜索中更容易找到！
- 在搜索中找到
- 在AI搜索中也显示
- 发现新工具
更新信息
- update #318
添加Tailwind颜色生成，从1种颜色生成11级调色和配置代码