Tailwind 颜色 - 完整调色板速查表

Tailwind CSS 调色板速查

Tailwind 的全部颜色都集中在这一个可搜索的网格里 —— 22 个色系共 242 个颜色值，每个色系有从 50（最浅）到 950（最深）的 11 个色阶。点击任意色块即可立即复制它的类名或颜色值，再也不用回去翻文档。

调色板分为 5 个中性色系（Slate、Gray、Zinc、Neutral、Stone），适合文字、背景和边框；另有 17 个彩色色系，从 Red 到 Rose，适合点缀和主题配色。它专为想快速浏览、查 HEX 代码、直接拿到所需精确值的前端开发者和设计师打造。

隐私优先：整套调色板都打包在应用内、完全在你的浏览器中运行。没有任何内容上传到服务器，你的收藏也只保存在自己浏览器的本地存储里。

每一行左侧显示色系名称，右侧是它的 11 个色阶，从最浅（50）到最深（950）。把鼠标悬停在任意色块上，即可看到它的色阶编号和 HEX 值。

输入色系名称（如 blue）或 HEX 值（如 #3b82f6），网格会随输入实时筛选。使用筛选下拉菜单可只显示全部颜色、彩色或中性色。

在格式下拉菜单中选择类名、HEX、RGB 或 HSL，然后点击任意色块即可把该值复制到剪贴板。

双击色块打开详情弹窗。你可以一次看到类名、HEX、RGB 和 HSL，单独复制其中任意一个，并跳转到同一色系的其他色阶。

点击任意色块上的星标即可加入收藏。打开收藏面板，使用导出 CSS 把每个收藏复制为一组 CSS 自定义属性，直接粘贴进你的样式表即可。

全部 242 个 Tailwind 颜色集中在一个网格里 —— 22 个色系、每个 11 个色阶 —— 排列得让你一眼就能对比同一色系内的各级色阶。

可把颜色复制为类名（bg-blue-500）、HEX、RGB 或 HSL —— 从下拉菜单选好格式，点击即可复制。

把最常用的颜色加上星标。收藏保存在浏览器的本地存储里，因此在同一台设备上会跨会话保留。

一键把收藏变成 CSS 自定义属性，可直接放进 :root 块中，构建项目专属调色板。

双击任意颜色即可看到完整信息：类名、HEX、RGB 和 HSL 一并呈现，还有跳转到该色系内其他每个色阶的快捷链接。

按色系名称或 HEX 值即时查找颜色。网格会随输入实时筛选，分类筛选还能将范围缩小到中性色或彩色。

调色板打包在应用内，完全在你的浏览器中运行。没有服务器请求，收藏保存在本地，首次加载后即可离线使用。

本工具收录 22 个色系，每个色系有从 50（最浅）到 950（最深）的 11 个色阶 —— 共 242 个颜色。其中 5 个色系是中性色（Slate、Gray、Zinc、Neutral、Stone），另外 17 个是彩色，从 Red 到 Rose。

bg-blue-500 是 #3b82f6。要查其他颜色的 HEX，搜索色系名称或把鼠标悬停在色块上即可 —— 色阶编号和 HEX 值会直接显示在上面，详情弹窗也会把 HEX、RGB 和 HSL 一并列出。

把格式下拉菜单设为 HEX 或 RGB，然后点击任意色块即可复制该值。你也可以双击色块打开详情弹窗，单独复制类名、HEX、RGB 或 HSL。

类名格式复制的是背景类，例如 bg-blue-500，搭配 Tailwind CSS 可直接放进 HTML。要设置文字颜色，把前缀换成 text-blue-500；边框则用 border-blue-500 —— 色系和色阶保持不变。

Tailwind 提供 5 个带微妙色调的中性色系：Slate 是偏蓝的冷灰，Gray 是均衡的中性灰，Zinc 偏冷但比 Slate 略暖，Neutral 完全不带任何色偏，Stone 是带一丝棕调的暖灰。

可以。复制 HEX、RGB 或 HSL 值，就能用在任何 CSS 文件、设计工具或应用里 —— 这些颜色不依赖 Tailwind 框架，本身就能使用。

收藏保存在浏览器的本地存储里，因此在同一台设备和浏览器上会跨会话保留；清除浏览器数据会将其删除。打开收藏面板并点击导出 CSS，即可把每个收藏复制为可粘贴进样式表的 CSS 自定义属性。