🎨 Tailwind颜色查找器

什么是Tailwind颜色查找器？

Tailwind颜色查找器是DevToolBox推出的一款前端开发辅助工具，用于快速查询和复制Tailwind CSS框架中的所有预设颜色。Tailwind CSS提供了22种基础色系，每种色系包含11个色阶（50、100、200...900），共计200+种预设颜色。本工具可以帮您快速浏览、搜索和复制这些颜色值，提高前端开发效率。

Tailwind CSS是目前最流行的原子化CSS框架之一，其色彩系统设计非常专业，每种色系的色阶都经过精心设计，对比度和视觉层次都很合理。但由于颜色数量众多，开发者很难记住所有色值和对应的类名。有了这个颜色查找器，您可以快速找到需要的颜色，一键复制HEX、RGB、HSL值或Tailwind类名。

如何使用Tailwind颜色查找器

1. 选择色系 — 从下拉菜单中选择您想查看的色系，或选择"全部色系"查看所有颜色。支持22种Tailwind预设色系。
2. 选择复制格式 — 选择点击颜色时复制的格式：HEX（十六进制）、RGB（红绿蓝）、HSL（色相饱和度亮度）或Tailwind CSS类名。
3. 搜索颜色 — 在搜索框中输入颜色名或色值关键词，可以快速过滤出匹配的颜色。例如搜索"blue-500"或"#3b82f6"。
4. 点击复制 — 点击任意颜色块，即可将该颜色按选定格式复制到剪贴板，方便粘贴到代码中使用。

常见使用场景

技术原理

Tailwind的颜色系统基于精心设计的色阶体系，每个色系包含11个色阶（50到900）。50是最浅的变体（接近白色），900是最深的变体（接近黑色）。色阶命名数字越高，颜色越深。中间的500是该色系的"基准色"或"主色调"。

// Tailwind 颜色数据结构示例
const tailwindColors = {
  blue: {
    50:   '#eff6ff',
    100:  '#dbeafe',
    200:  '#bfdbfe',
    300:  '#93c5fd',
    400:  '#60a5fa',
    500:  '#3b82f6', // 基准色
    600:  '#2563eb',
    700:  '#1d4ed8',
    800:  '#1e40af',
    900:  '#1e3a8a',
    950:  '#172554'
  },
  // ... 其他色系
};

Tailwind v3版本的颜色系统包含22种色系：5种中性灰系（Slate、Gray、Zinc、Neutral、Stone）和17种彩色系（Red、Orange、Amber、Yellow、Lime、Green、Emerald、Teal、Cyan、Sky、Blue、Indigo、Violet、Purple、Fuchsia、Pink、Rose）。每种色系有11个色阶，共约242种预设颜色。这个色彩体系由专业设计师设计，广泛应用于各种Web项目。

Tailwind色系分类

最佳实践与注意事项

• 主色调推荐选择500-600色阶，饱和度适中、视觉效果好。按钮、链接等交互元素常用500色阶，hover状态用600，active用700。
• 文字颜色推荐：浅色背景上用900（标题）和700（正文），深色背景上用50（标题）和200（正文）。辅助文字用500或400色阶。
• 背景色推荐：50-100色阶用于浅色背景，800-900色阶用于深色背景。卡片和容器可以用比页面背景深或浅一个色阶的颜色。
• 边框和分割线推荐使用200（浅色模式）或700（深色模式）色阶，视觉上若有若无，不会干扰主要内容。
• 确保文字和背景的对比度符合WCAG可访问性标准。普通文字需要至少4.5:1的对比度，大文字需要至少3:1。50和900的对比度最高，最安全。
• 设计界面时尽量保持色系一致性，不要混用太多不同色系。通常一个主色+一个强调色+一套中性灰就足够了。

常见问题