无需登录 数据私有 本地保存

Tailwind 调色板可视化浏览器 - 所有色阶一览

CSS 设计工具 Tailwind 浏览 调色板 颜色
40
0
0
0

🎨 Tailwind 调色板浏览器

所有色阶一览 · 点击复制颜色代码

22 色系 242 色阶 点击复制
全部色系 灰色系 暖色系 绿色系 蓝色系 紫粉系

未找到匹配的颜色系列

尝试其他搜索词或切换分类

📖 常见问题与知识点

什么是 Tailwind CSS 调色板？
Tailwind CSS 调色板是一套精心设计的颜色系统，包含 22个颜色系列，每个系列提供 11个色阶（50-950），共计242种颜色。这些颜色经过专业设计师调校，确保在同一系列内色阶过渡自然、在不同系列间搭配和谐。Tailwind 颜色命名直观（如 red-500、blue-700），让开发者无需记忆复杂的颜色变量名即可快速构建美观的界面。
Tailwind 色阶 50-950 分别代表什么？
色阶数字从 50（最浅）到 950（最深），形成完整的明暗渐变。通常：50-100 适合浅色背景或微妙的强调色；200-400 适合hover状态、边框、次要元素；500 是基准色，最常用于主色调和品牌色；600-700 适合文字、图标、强调元素；800-950 适合深色背景、重度强调或深色模式下的元素。950色阶是Tailwind v3.3新增的，比900更深。
如何在项目中使用 Tailwind 颜色类名？
Tailwind 使用简洁的类名格式：bg-{color}-{shade} 设置背景色、text-{color}-{shade} 设置文字颜色、border-{color}-{shade} 设置边框颜色。例如 bg-blue-500 会应用蓝色基准色背景，text-red-700 应用深红色文字。类名直观易记，极大提升了开发效率。您也可以使用任意值语法如 bg-[#3b82f6] 来使用自定义颜色。
如何选择适合的配色方案？
选择配色时建议：1）确定主色调——选择1-2个颜色系列作为品牌主色（如 blue-500 或 indigo-600）；2）搭配灰色系——使用 Slate/Gray/Neutral 作为中性背景和文字色；3）使用色阶对比——同一系列内使用不同色阶（如 blue-500 配 blue-100 背景）可保持视觉统一；4）注意对比度——确保文字与背景色阶差至少400以上（如 white 文字配 600+ 色阶背景），以符合WCAG无障碍标准。本工具可帮助您直观浏览所有可选颜色。
Tailwind 颜色可以自定义吗？
可以。在 tailwind.config.js 中通过 theme.extend.colors 可以扩展或覆盖默认颜色。例如：colors: { brand: { 500: '#ff6b6b', 600: '#ee5a5a' } } 可添加自定义品牌色。也可以完全替换默认调色板。Tailwind还支持使用CSS变量定义颜色，实现动态主题切换。自定义颜色建议也遵循50-950的色阶体系，保持与框架设计理念一致。
灰色系之间有什么区别？（Slate vs Gray vs Zinc vs Neutral vs Stone）
Tailwind提供5种灰色系列以满足不同设计风格：Slate 带轻微蓝调，现代清爽，适合科技类产品；Gray 中性偏冷，最通用的灰色；Zinc 中性微暖，适合与暖色搭配；Neutral 纯中性灰，完全无色偏，适合极简设计；Stone 带温暖土色调，适合自然、手工艺风格。选择哪个灰色系取决于您的整体设计基调——冷色调设计选Slate或Gray，暖色调设计选Zinc或Stone。
如何利用色阶系统提升设计效率？
色阶系统的核心优势是一致性。设计中的常见模式：用50色阶做页面背景、100色阶做卡片背景、200色阶做边框、500色阶做主按钮、600色阶做hover状态、700色阶做文字标题。这种模式在任何颜色系列中保持一致，让您在不同页面和组件间切换颜色时无需重新思考色阶关系。建议团队内部约定好色阶使用规范，可大幅提升设计和开发协作效率。
🔧 相关工具