Tailwind 调色板
完整默认 Tailwind 调色板的可视参考(v3.4 与 v4 共享相同默认值)。每个色块显示色阶号与 HEX,复制模式切换可按你代码库需要的形式获取值:`bg-slate-700`、`#334155` 或 `rgb(51, 65, 85)`。按色相名或 HEX 子串搜索过滤。
—
复制:
slate
gray
zinc
neutral
stone
red
orange
amber
yellow
lime
green
emerald
teal
cyan
sky
blue
indigo
violet
purple
fuchsia
pink
rose
Tailwind CSS v3.4 / v4 的默认主题值。
使用方法
- 选择复制格式 — Tailwind 工具类用 Class、设计工具用 HEX、CSS 变量用 rgb()。
- 点击任意色块复制其值。短暂的勾标记确认复制成功。
- 输入色相(`emerald`)或 HEX 片段(`fde0`)过滤。
常见问题
- 与 Tailwind v4 匹配吗?
- 是 — v4 默认主题保留与 v3.4 相同的色相/色阶值,所以调色板相同。如果你在配置中自定义了 `theme.colors`,项目的调色板可能不同。
- 为什么有五种灰色系?
- Tailwind 提供 slate / gray / zinc / neutral / stone 五种中性色相,底色略有不同:slate 偏冷蓝、gray 中性、zinc 更冷/钢质、neutral 纯中性、stone 暖灰褐。挑与你的强调色最搭配的。
- 950 色阶意味着什么?
- Tailwind 在 v3.3 在原有 50–900 阶梯之外添加了更暗的 950 步。近黑色但带有色相的微弱暗示,适合深色模式背景与非常细微的边框。
相关工具
颜色排序
粘贴 hex 颜色列表,按色相、饱和度、明度或感知亮度排序 — 适用于整理设计令牌调色板。
颜色 0 0
颜色明暗变体生成器
从基础色生成 tint(更亮)、shade(更暗)、tone(与灰混合)——2 到 20 档,HEX、RGB、HSL 输出。
颜色 0 0
调色板生成器
选择基色,得到经典色环和谐配色 —— 互补、分裂互补、三色、四色、正方、类似、单色。
颜色 0 0
从图片提取调色板
拖入图片,工具通过 Canvas 分析主色并提取调色板——复制 HEX 或一键复制全部。
颜色 0 0
颜色令牌导出器
定义一次颜色调色板,导出到 CSS 自定义属性、Tailwind 配置、SCSS、LESS、设计令牌 JSON、SwiftUI Color 或 Android `colors.xml`。实时预览色样。
颜色 0 0
颜色名称查找
为任意 hex/RGB 颜色查找最接近的 CSS、Tailwind 或 XKCD 调查色名 — 按 OKLab 空间感知距离排序。
颜色 0 0