Tailwind颜色色阶预览器 - 50到950色度

Tailwind CSS 的颜色系统采用数字色阶命名，50 是最浅的色调（接近白色），950 是最深的色调（接近黑色）。中间色阶从 100、200 一直到 900，每个色阶的亮度递减、饱和度递增。500 是基准色，代表该颜色最"纯正"的状态。这种设计让开发者可以轻松地为不同 UI 状态（如悬停、焦点、边框、背景）选择合适的深浅变体，而无需手动调色。

Tailwind CSS v3.x 默认提供 22 个颜色家族，共 242 个色值（每个家族 11 个色阶）。包括：
5 个中性色：Slate、Gray、Zinc、Neutral、Stone
17 个彩色：Red、Orange、Amber、Yellow、Lime、Green、Emerald、Teal、Cyan、Sky、Blue、Indigo、Violet、Purple、Fuchsia、Pink、Rose
覆盖了从冷色到暖色、从灰调到鲜艳色彩的完整光谱，满足 99% 的 UI 设计需求。

Tailwind 使用 颜色名-色阶 的命名规则，例如：
bg-blue-500 → 蓝色 500 作为背景色
text-red-700 → 红色 700 作为文字色
border-emerald-300 → 翠绿色 300 作为边框色
hover:bg-slate-100 → 悬停时使用浅灰背景
你也可以在 CSS 中使用 theme() 函数引用：background-color: theme('colors.blue.500');

在 tailwind.config.js 中的 theme.extend.colors 里定义自定义颜色：

module.exports = {
  theme: {
    extend: {
      colors: {
        'brand': {
          50: '#f0f9ff',
          100: '#e0f2fe',
          // ... 其他色阶
          500: '#3b82f6',
          900: '#1e3a8a',
        }
      }
    }
  }
}

也可以使用 uicolors.app 等在线工具自动生成完整色阶。

50-100：适合页面背景、卡片底色、微妙的区分色
200-300：适合边框、分隔线、禁用状态背景
400-500：基准色，适合主要按钮、图标、品牌色强调
600-700：适合悬停状态、文字标题、深色背景上的元素
800-950：适合深色模式背景、高对比度文字、阴影色
一般建议背景用 50-100，文字用 600-900，确保 WCAG 对比度标准（正文至少 4.5:1）。

这 5 个中性色系列各有微妙的色调偏向：
Slate：带蓝灰色调，现代感强，是 Tailwind 的默认灰色
Gray：纯正灰色，最通用
Zinc：略偏暖的中性灰，接近自然金属色
Neutral：完全中性的灰色，无冷暖偏向
Stone：带暖棕色调，类似石材色，适合温暖风格的设计
选择哪个取决于你的设计风格——偏冷调选 Slate，偏暖调选 Stone。

Tailwind 借鉴了 Material Design 等设计系统的色阶命名惯例。50 不代表 50% 亮度，而是一个相对索引。50 是最浅的实用色（再浅就接近纯白了），950 是最深的实用色（再深就接近纯黑了）。数字越大颜色越深。这种命名避免了百分比带来的歧义（如"浅灰"在不同语境下可能指不同色值），让团队协作时引用颜色更精确。

你可以：
1. 使用 Tailwind Color Palette 插件（Figma 社区可搜索到）直接导入所有色阶
2. 从本页面复制 Hex 值，手动在 Figma 中创建 Color Styles
3. 使用 tailwind-config-viewer 导出 JSON 格式的颜色配置
4. 将 Tailwind 配置文件中的颜色通过插件自动同步到设计工具
保持设计工具与代码中的颜色一致，能显著提升设计与开发的协作效率。