Skip to content

颜色与主题

· 10 min

TailwindCSS v4 全面拥抱了 oklch 色彩空间——一个感知均匀的色彩模型。这意味着相同亮度值的颜色在人眼看来确实同样明亮，色阶过渡更加自然和谐。配合 CSS 变量的深度集成，v4 让主题定制和暗色模式变得前所未有的简单。

oklch 色彩空间#

什么是 oklch#

oklch 是一种感知均匀的色彩模型，由三个参数定义：

oklch(亮度 色度 色相)
oklch(L     C     H)

与传统的 hex、rgb、hsl 相比，oklch 的优势：

/* 传统 hsl: 相同饱和度和亮度，但视觉亮度不一致 */
.blue {
  background: hsl(240, 100%, 50%);
} /* 看起来很暗 */
.yellow {
  background: hsl(60, 100%, 50%);
} /* 看起来很亮 */


/* oklch: 相同亮度值，视觉亮度一致 */
.blue {
  background: oklch(0.6 0.2 240);
}
.yellow {
  background: oklch(0.6 0.2 90);
}

v4 的默认颜色#

v4 所有颜色都以 oklch 格式定义，并存储为 CSS 变量：

/* Tailwind v4 编译后 */
:root {
  --color-blue-500: oklch(0.623 0.214 259);
  --color-red-500: oklch(0.637 0.237 25);
  --color-green-500: oklch(0.723 0.191 142);
}

这使得颜色可以在运行时动态修改。

默认调色板#

Tailwind v4 提供了 22 种颜色，每种包含 11 个色阶（50-950）：

灰色系列#

颜色特点适用场景
slate蓝灰色现代科技感界面
gray纯灰色通用中性色
zinc暖灰色高端质感
neutral最纯灰色不带任何色调
stone米灰色温暖自然
<div class="bg-slate-100 text-slate-900">蓝灰调</div>
<div class="bg-zinc-100 text-zinc-900">锌灰调</div>
<div class="bg-stone-100 text-stone-900">暖灰调</div>

彩色系列#

<!-- 红色系 -->
<div class="bg-red-500">红色</div>


<!-- 橙色系 -->
<div class="bg-orange-500">橙色</div>


<!-- 琥珀色系 -->
<div class="bg-amber-500">琥珀色</div>


<!-- 黄色系 -->
<div class="bg-yellow-500">黄色</div>


<!-- 青柠色系 -->
<div class="bg-lime-500">青柠色</div>


<!-- 绿色系 -->
<div class="bg-green-500">绿色</div>


<!-- 翡翠色系 -->
<div class="bg-emerald-500">翡翠色</div>


<!-- 青绿色系 -->
<div class="bg-teal-500">青绿色</div>


<!-- 青色系 -->
<div class="bg-cyan-500">青色</div>


<!-- 天蓝色系 -->
<div class="bg-sky-500">天蓝色</div>


<!-- 蓝色系 -->
<div class="bg-blue-500">蓝色</div>


<!-- 靛青色系 -->
<div class="bg-indigo-500">靛青色</div>


<!-- 紫罗兰色系 -->
<div class="bg-violet-500">紫罗兰</div>


<!-- 紫色系 -->
<div class="bg-purple-500">紫色</div>


<!-- 紫红色系 -->
<div class="bg-fuchsia-500">紫红色</div>


<!-- 粉色系 -->
<div class="bg-pink-500">粉色</div>


<!-- 玫瑰色系 -->
<div class="bg-rose-500">玫瑰色</div>

色阶对照#

每种颜色包含 11 个色阶，从浅到深：

<!-- 蓝色完整色阶 -->
<div class="bg-blue-50">50 - 最浅</div>
<div class="bg-blue-100">100</div>
<div class="bg-blue-200">200</div>
<div class="bg-blue-300">300</div>
<div class="bg-blue-400">400</div>
<div class="bg-blue-500">500 - 基准</div>
<div class="bg-blue-600">600</div>
<div class="bg-blue-700">700</div>
<div class="bg-blue-800">800</div>
<div class="bg-blue-900">900</div>
<div class="bg-blue-950">950 - 最深</div>

设计建议：

颜色工具类#

文字颜色#

<p class="text-gray-900">主要文字</p>
<p class="text-gray-600">次要文字</p>
<p class="text-gray-400">辅助文字</p>
<p class="text-blue-500">链接文字</p>
<p class="text-red-500">错误提示</p>

背景颜色#

<div class="bg-white">白色背景</div>
<div class="bg-gray-50">浅灰背景</div>
<div class="bg-gray-100">灰色背景</div>
<div class="bg-blue-500">蓝色背景</div>

边框颜色#

<div class="border border-gray-200">浅边框</div>
<div class="border-2 border-blue-500">蓝色边框</div>
<div class="border-b border-gray-100">底部边框</div>

透明度#

使用斜杠语法设置透明度：

<!-- 背景透明度 -->
<div class="bg-black/50">50% 透明度黑色</div>
<div class="bg-blue-500/75">75% 透明度蓝色</div>


<!-- 文字透明度 -->
<p class="text-gray-900/80">80% 透明度文字</p>


<!-- 边框透明度 -->
<div class="border border-black/10">10% 透明度边框</div>

任意透明度值：

<div class="bg-blue-500/[0.35]">35% 透明度</div>

渐变#

<!-- 线性渐变 -->
<div class="bg-gradient-to-r from-blue-500 to-purple-500">从左到右渐变</div>


<!-- 指定中间色 -->
<div class="bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500">
  三色渐变
</div>


<!-- 不同方向 -->
<div class="bg-gradient-to-t">从下到上</div>
<div class="bg-gradient-to-b">从上到下</div>
<div class="bg-gradient-to-l">从右到左</div>
<div class="bg-gradient-to-r">从左到右</div>
<div class="bg-gradient-to-tl">到左上</div>
<div class="bg-gradient-to-tr">到右上</div>
<div class="bg-gradient-to-bl">到左下</div>
<div class="bg-gradient-to-br">到右下</div>

渐变实战：

function GradientButton({ children }: { children: React.ReactNode }) {
  return (
    <button className="px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-500 text-white font-medium rounded-lg hover:from-blue-600 hover:to-purple-600 transition-all">
      {children}
    </button>
  )
}


function HeroSection() {
  return (
    <section className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 flex items-center justify-center">
      <h1 className="text-5xl font-bold text-white">欢迎</h1>
    </section>
  )
}

暗色模式#

启用暗色模式#

v4 默认使用 prefers-color-scheme 媒体查询检测系统主题：

<!-- 自动适配系统主题 -->
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
  浅色/深色自适应
</div>

手动切换模式#

使用 class 策略手动控制：

globals.css
@import 'tailwindcss';


/* 使用 class 策略 */
@variant dark (&:where(.dark, .dark *));
<!-- 在 html 或根元素添加 dark 类 -->
<html class="dark">
  ...
</html>
// 主题切换逻辑
function ThemeToggle() {
  const [isDark, setIsDark] = useState(false)


  const toggle = () => {
    setIsDark(!isDark)
    document.documentElement.classList.toggle('dark')
  }


  return (
    <button
      onClick={toggle}
      className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800"
    >
      {isDark ? '🌙' : '☀️'}
    </button>
  )
}

暗色模式设计模式#

function Card({ title, description }: { title: string; description: string }) {
  return (
    <div
      className="
      bg-white dark:bg-gray-800
      border border-gray-200 dark:border-gray-700
      rounded-xl shadow-sm dark:shadow-gray-900/20
      p-6
    "
    >
      <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2">
        {title}
      </h3>
      <p className="text-gray-600 dark:text-gray-300">{description}</p>
    </div>
  )
}

颜色映射建议：

用途浅色模式暗色模式
页面背景bg-whitedark:bg-gray-900
卡片背景bg-gray-50dark:bg-gray-800
主要文字text-gray-900dark:text-white
次要文字text-gray-600dark:text-gray-300
辅助文字text-gray-400dark:text-gray-500
边框border-gray-200dark:border-gray-700
分割线divide-gray-100dark:divide-gray-800

自定义颜色#

@theme 配置#

在 CSS 中使用 @theme 添加自定义颜色：

globals.css
@import 'tailwindcss';


@theme {
  /* 品牌色 */
  --color-brand-50: oklch(0.97 0.01 250);
  --color-brand-100: oklch(0.93 0.03 250);
  --color-brand-200: oklch(0.86 0.06 250);
  --color-brand-300: oklch(0.76 0.1 250);
  --color-brand-400: oklch(0.66 0.14 250);
  --color-brand-500: oklch(0.55 0.18 250);
  --color-brand-600: oklch(0.48 0.16 250);
  --color-brand-700: oklch(0.4 0.13 250);
  --color-brand-800: oklch(0.33 0.1 250);
  --color-brand-900: oklch(0.27 0.07 250);
  --color-brand-950: oklch(0.2 0.05 250);


  /* 功能色 */
  --color-success: oklch(0.72 0.19 142);
  --color-warning: oklch(0.8 0.18 85);
  --color-error: oklch(0.63 0.24 25);
  --color-info: oklch(0.7 0.15 230);
}

使用自定义颜色：

<button class="bg-brand-500 hover:bg-brand-600 text-white">品牌按钮</button>


<div class="text-success">操作成功</div>
<div class="text-error">操作失败</div>

oklch 颜色生成技巧#

创建和谐的色阶：保持色相(H)不变，调整亮度(L)和色度(C)

@theme {
  /* 固定色相 250（蓝紫色），调整亮度和色度 */
  --color-primary-50: oklch(0.97 0.01 250); /* 最浅 */
  --color-primary-100: oklch(0.93 0.03 250);
  --color-primary-200: oklch(0.86 0.06 250);
  --color-primary-300: oklch(0.76 0.1 250);
  --color-primary-400: oklch(0.66 0.14 250);
  --color-primary-500: oklch(0.55 0.18 250); /* 基准 */
  --color-primary-600: oklch(0.48 0.16 250);
  --color-primary-700: oklch(0.4 0.13 250);
  --color-primary-800: oklch(0.33 0.1 250);
  --color-primary-900: oklch(0.27 0.07 250);
  --color-primary-950: oklch(0.2 0.05 250); /* 最深 */
}

规律：

CSS 变量与运行时主题#

v4 的一大优势是所有设计令牌都是 CSS 变量，支持运行时修改：

function ThemeSwitcher() {
  const themes = {
    blue: { hue: 250 },
    green: { hue: 142 },
    purple: { hue: 290 },
    orange: { hue: 30 },
  }


  const setTheme = (theme: keyof typeof themes) => {
    const { hue } = themes[theme]


    // 运行时修改 CSS 变量
    document.documentElement.style.setProperty(
      '--color-brand-500',
      `oklch(0.55 0.18 ${hue})`
    )
    document.documentElement.style.setProperty(
      '--color-brand-600',
      `oklch(0.48 0.16 ${hue})`
    )
  }


  return (
    <div className="flex gap-2">
      {Object.keys(themes).map((theme) => (
        <button
          key={theme}
          onClick={() => setTheme(theme as keyof typeof themes)}
          className="px-3 py-1 rounded border"
        >
          {theme}
        </button>
      ))}
    </div>
  )
}

完整主题配置示例#

globals.css
@import 'tailwindcss';


@theme {
  /* 语义化颜色变量 */
  --color-bg-primary: var(--color-white);
  --color-bg-secondary: var(--color-gray-50);
  --color-bg-tertiary: var(--color-gray-100);


  --color-text-primary: var(--color-gray-900);
  --color-text-secondary: var(--color-gray-600);
  --color-text-tertiary: var(--color-gray-400);


  --color-border-primary: var(--color-gray-200);
  --color-border-secondary: var(--color-gray-100);
}


/* 暗色模式覆盖 */
.dark {
  --color-bg-primary: var(--color-gray-900);
  --color-bg-secondary: var(--color-gray-800);
  --color-bg-tertiary: var(--color-gray-700);


  --color-text-primary: var(--color-white);
  --color-text-secondary: var(--color-gray-300);
  --color-text-tertiary: var(--color-gray-500);


  --color-border-primary: var(--color-gray-700);
  --color-border-secondary: var(--color-gray-800);
}
// 使用语义化颜色
function Layout({ children }: { children: React.ReactNode }) {
  return (
    <div className="bg-[var(--color-bg-primary)] text-[var(--color-text-primary)] min-h-screen">
      <nav className="border-b border-[var(--color-border-primary)]">
        {/* 导航内容 */}
      </nav>
      <main className="bg-[var(--color-bg-secondary)]">{children}</main>
    </div>
  )
}

实战：品牌主题配置#

结合 CSS 变量和 JavaScript 实现动态主题切换：

const themes = {
  light: {
    primary: 'oklch(0.55 0.18 250)',
    background: 'oklch(1 0 0)',
    text: 'oklch(0.2 0 0)',
  },
  dark: {
    primary: 'oklch(0.65 0.18 250)',
    background: 'oklch(0.15 0 0)',
    text: 'oklch(0.95 0 0)',
  },
}


function applyTheme(themeName: keyof typeof themes) {
  const theme = themes[themeName]
  const root = document.documentElement
  Object.entries(theme).forEach(([key, value]) => {
    root.style.setProperty(`--theme-${key}`, value)
  })
  localStorage.setItem('theme', themeName)
}
/* 使用主题变量 */
@theme {
  --color-primary: var(--theme-primary, oklch(0.55 0.18 250));
  --color-background: var(--theme-background, oklch(1 0 0));
  --color-text: var(--theme-text, oklch(0.2 0 0));
}
<div class="bg-background text-text">
  <button class="bg-primary">主题按钮</button>
</div>

颜色是界面设计的灵魂，而 Tailwind v4 的 oklch 系统让颜色管理变得科学且灵活。下一篇文章将探讨响应式设计，了解断点系统和移动优先策略的实践方法。