TAILWIND v4 · 原生 OKLCH
Tailwind CSS 色板 — 完整默认调色板
一处覆盖 Tailwind v4 全部默认颜色：22 色相 × 11 阶。点击任意色块复制 HEX 或 OKLCH。可搜索过滤，然后直接放进 bg-、text-、border-、ring- 等工具类。
点击色块即可复制。每个色块下方的数字是其 HEX 值的后 6 位。
slate
--color-slate-500gray
--color-gray-500zinc
--color-zinc-500neutral
--color-neutral-500stone
--color-stone-500red
--color-red-500orange
--color-orange-500amber
--color-amber-500yellow
--color-yellow-500lime
--color-lime-500green
--color-green-500emerald
--color-emerald-500teal
--color-teal-500cyan
--color-cyan-500sky
--color-sky-500blue
--color-blue-500indigo
--color-indigo-500violet
--color-violet-500purple
--color-purple-500fuchsia
--color-fuchsia-500pink
--color-pink-500rose
--color-rose-500如何读这套色板
Tailwind 的色板由 22 个色相族各 11 阶组成。阶数命名在所有色相之间一致，所以切换颜色不会破坏视觉关系。
阶数 50 → 950
数字越小越浅，越大越深。500 是中段，通常就是品牌主色——logo 里那一抹颜色。50 / 100 / 200 用作浅色背景；800 / 900 / 950 用作深色模式背景。
17 个色相 + 5 个灰
5 种中性色（slate / gray / zinc / neutral / stone）冷暖度不同：slate 最冷，stone 最暖。选一种就别换——在同一个设计系统里混用两种灰，会出现肉眼可感知的细微色相漂移。
v4 新变化
Tailwind v4 用 OKLCH 定义色彩。这是关键差异。
v3 及之前，Tailwind 的色板用 HEX 值人工调出"视觉均匀"的阶梯——付出巨大努力但跨色相仍有漂移。v4 把每个颜色重新定义为 oklch()——感知均匀的色彩空间——在深色模式和宽色域显示器上差异立现。
阶数没变、HEX 值（几乎）没变、bg-blue-500 / text-slate-200 等工具类无需改动。新的是 v4 把每个颜色暴露为 --color-<名>-<阶> CSS 变量，你直接通过覆盖这些变量在 CSS 里定制主题，不必再改 tailwind.config.js。
实际意义：2026 年要扩展色板，请从一开始就用 OKLCH 定义自定阶。v4 文档给了数学公式，我们的色值转换器可以即刻把任意颜色转成 OKLCH。
加上你自己的品牌色
v4 里在 CSS 里定制颜色，不再写 JS。把下面这段放进主样式表，bg-brand-500 立即生效。
/* CSS-first config in Tailwind v4 */
@import "tailwindcss";
@theme {
--color-brand-50: oklch(97% 0.02 280);
--color-brand-500: oklch(58% 0.20 280);
--color-brand-900: oklch(20% 0.10 280);
}
/* Use with: bg-brand-500, text-brand-50, ring-brand-900 */不会写 OKLCH 值？用我们的色值转换器——粘贴品牌 HEX，复制 oklch() 输出。