Tailwind CSS颜色选择器

什么是Tailwind CSS颜色选择器？

如何使用Tailwind CSS颜色选择器

1. 1

   筛选颜色：在页面左侧的基础色分组列表中，点击你需要的基础色名称，就能切换到对应颜色的色阶选择区域，可根据需求快速定位色系范围

2. 2

   选择色阶：在展开的色阶色块组中，点击对应亮度的色块，页面上方会同步显示该颜色的预览效果，确认你选中的颜色是否符合需求

3. 3

   复制结果：点击生成好的『Tailwind类名』或『CSS变量』文本框，就可以一键将对应内容复制到剪贴板，直接粘贴到项目代码中使用

4. 4

   查看色值：在页面下方的色值展示区域，会同步显示当前选中颜色的十六进制与RGB两种格式的原始色值，方便你在其他场景参考使用

什么场景会用到？

计算示例

注意事项

• 本工具仅生成 Tailwind CSS v3 版本官方内置调色板的代码，不支持自定义添加额外颜色。
• 生成的类名可直接在项目中使用，对应 Tailwind 默认配置下的颜色映射，修改过自定义颜色配置需要手动对齐。
• 不同浏览器显示的色值存在微小差异，实际项目最终颜色以编译后的CSS输出为准。
• 若需要 Tailwind v2 版本的颜色，部分明度档位命名与v3不同，本工具不兼容旧版本。

常见问题

参考资料

• Tailwind CSS 官方 v3 版本调色板文档

本页采用Tailwind CSS v3官方标准调色板数据，所有颜色映射关系均和官方规范对齐，示例输出经工具实测复算，由工具集编辑组维护。