Tailwind CSS 颜色

此工具使用官方 Tailwind CSS v4 色板，包含全部 22 个色系，每个色系 11 个色阶（从 50 到 950）。这确保您使用的是 Tailwind 框架中最新、最准确的颜色值。

Tailwind 提供 5 种中性色系，它们在色调和冷暖度上有细微但重要的差异：

• Slate：带有轻微蓝色调的冷灰色 - 现代而清爽
• Gray：纯中性灰色 - 平衡且多用途
• Zinc：冷灰色，比 Slate 稍暖 - 现代感
• Neutral：真正的中性色，无色偏 - 完美平衡
• Stone：带有轻微棕色调的暖灰色 - 自然有机

根据您设计的整体色温和美学风格进行选择。冷灰色（Slate、Zinc）适合蓝色和现代设计，而暖灰色（Stone）则与大地色调相得益彰。

类名格式（例如 bg-blue-500）可以直接在您的 HTML 中与 Tailwind CSS 一起使用。只需将其添加到元素的 class 属性中：

<div class="bg-blue-500 text-white p-4">
  Hello World
</div>

常用前缀：

• bg- 用于背景色
• text- 用于文本颜色
• border- 用于边框颜色
• ring- 用于轮廓颜色

当然可以！复制 HEX、RGB 或 HSL 值即可在任何 CSS 文件、设计工具或应用程序中使用。这些颜色可以独立于 Tailwind 框架使用。

.my-button {
  background-color: #3b82f6;
  color: #ffffff;
  border: 2px solid rgb(59, 130, 246);
}

这些颜色也非常适合 Figma、Adobe XD、Sketch 等设计工具，或任何接受标准颜色格式的应用程序。

会的！收藏保存在您浏览器的 localStorage 中。它们会在同一设备和浏览器的会话间保持，因此您可以关闭标签页，稍后返回时仍能找到您的收藏。

导出自定义色板非常简单：

1. 点击星标图标将颜色添加到收藏
2. 打开收藏面板
3. 点击"导出 CSS"按钮
4. 将复制的 CSS 自定义属性粘贴到您的样式表中

:root {
  --color-blue-500: #3b82f6;
  --color-emerald-600: #059669;
  --color-slate-700: #334155;
}

然后您可以在整个 CSS 中使用这些变量：background-color: var(--color-blue-500);