用 OKLCH 与 Tailwind v4 搭一套有温度的配色

配色是博客「气质」的底层。过去我习惯在调色板里随手挑一个橙色，但不同亮度下经常翻车。这次改用 OKLCH 来定义整套色板，体验顺了很多。

为什么是 OKLCH

OKLCH 把颜色拆成「亮度 / 饱和度 / 色相」，最大的好处是亮度可预测：

• 同色相下，只要固定 L，深浅过渡就均匀；
• 不会因为饱和度变化导致「看起来忽明忽暗」；
• 配合 prefers-color-scheme 切换深色模式时，映射关系更稳定。

:root {
  --primary-500: oklch(62% 0.17 55);
  --primary-600: oklch(54% 0.16 55);
}

Tailwind v4 的玩法

Tailwind v4 用 @theme 把 CSS 变量直接映射成工具类，不再需要 tailwind.config.js：

@theme inline {
  --color-primary: var(--primary-500);
}

之后就能直接写 text-primary、bg-primary-subtle，语义和视觉一次对齐。

一点体会

配色不是越多越好。一个克制的品牌色 + 一套带暖意的中性灰，比五颜六色更耐看。博客尤其如此——界面应该退到内容身后。