在 CSS 里用 OKLCH：我踩过的坑和发现的技巧

刚开始用 OKLCH 写 CSS 的时候，我以为就是把 #3b82f6 换成 oklch(60% 0.15 240) 这么简单。

结果发现，真的不止这些。

有些地方用起来特别爽，有些地方踩了坑。今天把我的经验分享一下。

先看看实际效果

别看文字了，直接上手感受一下：

CSS 中的 OKLCH 实践演示

基础语法

使用 OKLCH 的最简单方式。颜色方案：文字颜色、背景色、边框色和阴影都是基于同一色相的不同变化。

CSS 代码：

.element {
  /* 基础 OKLCH 语法 */
  color: oklch(60% 0.15 240);
  background: oklch(90% 0.05 240);
  border: 2px solid oklch(40% 0.2 240);

  /* 带透明度的 OKLCH */
  box-shadow: 0 4px 12px oklch(20% 0.1 240 / 0.3);
}

效果预览：

基础语法

使用 OKLCH 的最简单方式。颜色方案：文字颜色、背景色、边框色和阴影都是基于同一色相的不同变化。使用 OKLCH 的最简单方式。颜色方案：文字颜色、背景色、边框色和阴影都是基于同一色相的不同变化。

🎨 自定义颜色测试

亮度: 60%

色度: 0.15

色相: 240°

oklch(60% 0.15 240)

复制这个值到你的 CSS 中试试！

切换不同标签页，看看各种用法。特别试试最后的自定义颜色测试，很有意思。

语法真的很简单

/* 基础语法 */
color: oklch(60% 0.15 240);

/* 带透明度 */
background: oklch(70% 0.1 120 / 0.5);

就三个数字：亮度、饱和度、色相。比 RGB 的三个数字好理解多了。

我最常用的几种套路

套路 1：按钮的悬停效果

以前用 RGB 做按钮悬停，要么调亮度要么调透明度，总感觉不够自然。

OKLCH 就很舒服：

.button {
  background: oklch(55% 0.15 220);
  transition: all 0.2s ease;
}

.button:hover {
  /* 亮度 +10%，饱和度 +0.03，自然！ */
  background: oklch(65% 0.18 220);
}

悬停效果特别丝滑，不会有那种"突然变亮"的感觉。

套路 2：用 CSS 变量做主题切换

这个真的是神级操作：

:root {
  --theme-hue: 240;  /* 蓝色主题 */
  --primary: oklch(60% 0.15 var(--theme-hue));
  --bg: oklch(95% 0.02 var(--theme-hue));
}

/* 切换主题，只需要改一个数字 */
.green-theme { --theme-hue: 120; }
.red-theme { --theme-hue: 0; }

一行代码，整个网站换色。这个技巧让我在客户面前装了好几次 X。

套路 3：做渐变不要太香

RGB 做渐变，中间容易出现"脏颜色"。OKLCH 的渐变，真的是丝滑：

/* 从红到绿，中间不会变成难看的褐色 */
background: linear-gradient(
  45deg,
  oklch(60% 0.2 0),    /* 红 */
  oklch(60% 0.2 60),   /* 橙 */
  oklch(60% 0.2 120)   /* 绿 */
);

踩过的坑

坑 1：兼容性要考虑

不是所有浏览器都支持 OKLCH，所以要写回退：

.element {
  /* 先写回退色 */
  background: #3b82f6;

  /* 再写 OKLCH */
  background: oklch(60% 0.15 240);
}

或者用 @supports 检测：

@supports (color: oklch(50% 0.1 180)) {
  .fancy-bg {
    background: oklch(70% 0.2 300);
  }
}

坑 2：深色模式下要调整

浅色模式的 OKLCH 值直接用到深色模式，效果会很奇怪。

我的经验：深色模式下，亮度往往要调高一点：

/* 浅色模式 */
:root {
  --accent: oklch(60% 0.15 240);
}

/* 深色模式 */
@media (prefers-color-scheme: dark) {
  :root {
    --accent: oklch(75% 0.15 240);  /* 亮度调高 */
  }
}

坑 3：绿色特别扎眼

同样的饱和度，绿色总是比其他颜色显眼。解决办法：绿色用低一点的饱和度。

/* 其他颜色 */
--blue: oklch(60% 0.15 240);
--red: oklch(60% 0.15 0);

/* 绿色调低饱和度 */
--green: oklch(60% 0.12 120);  /* 0.12 而不是 0.15 */

发现的小技巧

技巧 1：文字层级用亮度控制

以前做文字层级，我喜欢用透明度。现在用亮度控制，效果更好：

/* 主标题 */
.title { color: oklch(20% 0.02 240); }

/* 副标题 */
.subtitle { color: oklch(40% 0.02 240); }

/* 正文 */
.text { color: oklch(30% 0.02 240); }

同样的色相，不同的亮度，看起来就是"一家人"。

技巧 2：高级感靠低饱和度

想要页面看起来高级？降低所有颜色的饱和度：

/* 普通 */
--primary: oklch(60% 0.15 240);

/* 高级感 */
--primary: oklch(60% 0.05 240);  /* 饱和度很低 */

瞬间从"淘宝风"变成"苹果风"。

技巧 3：动画用相同亮度

做颜色动画时，保持亮度不变，只改色相：

@keyframes rainbow {
  0% { background: oklch(60% 0.15 0); }
  33% { background: oklch(60% 0.15 120); }
  66% { background: oklch(60% 0.15 240); }
  100% { background: oklch(60% 0.15 360); }
}

这样动画看起来不会闪眼睛。

实际项目中的经验

做设计系统

OKLCH 特别适合做设计系统的基础：

:root {
  /* 基础参数 */
  --brand-hue: 240;
  --success-hue: 120;
  --warning-hue: 60;
  --danger-hue: 0;

  /* 统一饱和度 */
  --brand-chroma: 0.15;
  --semantic-chroma: 0.12;

  /* 生成调色板 */
  --primary-50: oklch(95% calc(var(--brand-chroma) * 0.3) var(--brand-hue));
  --primary-500: oklch(60% var(--brand-chroma) var(--brand-hue));
  --primary-900: oklch(25% calc(var(--brand-chroma) * 1.2) var(--brand-hue));
}

这样做出来的设计系统，颜色特别和谐。

响应式颜色

没错，颜色也可以响应式：

.card {
  /* 手机端：低饱和度，不刺眼 */
  background: oklch(95% 0.02 240);
}

@media (min-width: 768px) {
  .card {
    /* 大屏：稍微提高饱和度 */
    background: oklch(95% 0.05 240);
  }
}

性能方面

OKLCH 的性能和 RGB 差不多，不用担心。

但有个小建议：复杂的 calc() 计算放在 CSS 变量里，不要放在动画里：

/* 好 */
:root {
  --hover-color: oklch(calc(60% + 10%) calc(0.15 + 0.03) 240);
}

.button:hover {
  background: var(--hover-color);
}

/* 不好 */
.button:hover {
  background: oklch(calc(60% + 10%) calc(0.15 + 0.03) 240);
}

我的建议

先从主色开始：把项目里最重要的几个颜色换成 OKLCH
记住回退：老浏览器用户也要照顾
多试试：OKLCH 的优势要用了才知道
做记录：好用的数值组合记下来，下次直接用

最重要的：别想太多，先用起来。

OKLCH 不是什么高深的技术，就是一个更好用的颜色格式。用习惯了，你就回不去 RGB 了。

就像我现在，看到 #3b82f6 这种颜色代码，总觉得不够直观。还是 oklch(60% 0.15 240) 看着舒服，一眼就知道是什么颜色。

刚开始用 OKLCH 写 CSS 的时候，我以为就是把 #3b82f6 换成 oklch(60% 0.15 240) 这么简单。

结果发现，真的不止这些。

有些地方用起来特别爽，有些地方踩了坑。今天把我的经验分享一下。

先看看实际效果

别看文字了，直接上手感受一下：

CSS 中的 OKLCH 实践演示

基础语法

使用 OKLCH 的最简单方式。颜色方案：文字颜色、背景色、边框色和阴影都是基于同一色相的不同变化。

CSS 代码：

.element {
  /* 基础 OKLCH 语法 */
  color: oklch(60% 0.15 240);
  background: oklch(90% 0.05 240);
  border: 2px solid oklch(40% 0.2 240);

  /* 带透明度的 OKLCH */
  box-shadow: 0 4px 12px oklch(20% 0.1 240 / 0.3);
}

效果预览：

基础语法

🎨 自定义颜色测试

亮度: 60%

色度: 0.15

色相: 240°

oklch(60% 0.15 240)

复制这个值到你的 CSS 中试试！

切换不同标签页，看看各种用法。特别试试最后的自定义颜色测试，很有意思。

语法真的很简单

/* 基础语法 */
color: oklch(60% 0.15 240);

/* 带透明度 */
background: oklch(70% 0.1 120 / 0.5);

就三个数字：亮度、饱和度、色相。比 RGB 的三个数字好理解多了。

我最常用的几种套路

套路 1：按钮的悬停效果

以前用 RGB 做按钮悬停，要么调亮度要么调透明度，总感觉不够自然。

OKLCH 就很舒服：

.button {
  background: oklch(55% 0.15 220);
  transition: all 0.2s ease;
}

.button:hover {
  /* 亮度 +10%，饱和度 +0.03，自然！ */
  background: oklch(65% 0.18 220);
}

悬停效果特别丝滑，不会有那种"突然变亮"的感觉。

套路 2：用 CSS 变量做主题切换

这个真的是神级操作：

:root {
  --theme-hue: 240;  /* 蓝色主题 */
  --primary: oklch(60% 0.15 var(--theme-hue));
  --bg: oklch(95% 0.02 var(--theme-hue));
}

/* 切换主题，只需要改一个数字 */
.green-theme { --theme-hue: 120; }
.red-theme { --theme-hue: 0; }

一行代码，整个网站换色。这个技巧让我在客户面前装了好几次 X。

套路 3：做渐变不要太香

RGB 做渐变，中间容易出现"脏颜色"。OKLCH 的渐变，真的是丝滑：

/* 从红到绿，中间不会变成难看的褐色 */
background: linear-gradient(
  45deg,
  oklch(60% 0.2 0),    /* 红 */
  oklch(60% 0.2 60),   /* 橙 */
  oklch(60% 0.2 120)   /* 绿 */
);

踩过的坑

坑 1：兼容性要考虑

不是所有浏览器都支持 OKLCH，所以要写回退：

.element {
  /* 先写回退色 */
  background: #3b82f6;

  /* 再写 OKLCH */
  background: oklch(60% 0.15 240);
}

或者用 @supports 检测：

@supports (color: oklch(50% 0.1 180)) {
  .fancy-bg {
    background: oklch(70% 0.2 300);
  }
}

坑 2：深色模式下要调整

浅色模式的 OKLCH 值直接用到深色模式，效果会很奇怪。

我的经验：深色模式下，亮度往往要调高一点：

/* 浅色模式 */
:root {
  --accent: oklch(60% 0.15 240);
}

/* 深色模式 */
@media (prefers-color-scheme: dark) {
  :root {
    --accent: oklch(75% 0.15 240);  /* 亮度调高 */
  }
}

坑 3：绿色特别扎眼

同样的饱和度，绿色总是比其他颜色显眼。解决办法：绿色用低一点的饱和度。

/* 其他颜色 */
--blue: oklch(60% 0.15 240);
--red: oklch(60% 0.15 0);

/* 绿色调低饱和度 */
--green: oklch(60% 0.12 120);  /* 0.12 而不是 0.15 */

发现的小技巧

技巧 1：文字层级用亮度控制

以前做文字层级，我喜欢用透明度。现在用亮度控制，效果更好：

/* 主标题 */
.title { color: oklch(20% 0.02 240); }

/* 副标题 */
.subtitle { color: oklch(40% 0.02 240); }

/* 正文 */
.text { color: oklch(30% 0.02 240); }

同样的色相，不同的亮度，看起来就是"一家人"。

技巧 2：高级感靠低饱和度

想要页面看起来高级？降低所有颜色的饱和度：

/* 普通 */
--primary: oklch(60% 0.15 240);

/* 高级感 */
--primary: oklch(60% 0.05 240);  /* 饱和度很低 */

瞬间从"淘宝风"变成"苹果风"。

技巧 3：动画用相同亮度

做颜色动画时，保持亮度不变，只改色相：

@keyframes rainbow {
  0% { background: oklch(60% 0.15 0); }
  33% { background: oklch(60% 0.15 120); }
  66% { background: oklch(60% 0.15 240); }
  100% { background: oklch(60% 0.15 360); }
}

这样动画看起来不会闪眼睛。

实际项目中的经验

做设计系统

OKLCH 特别适合做设计系统的基础：

:root {
  /* 基础参数 */
  --brand-hue: 240;
  --success-hue: 120;
  --warning-hue: 60;
  --danger-hue: 0;

  /* 统一饱和度 */
  --brand-chroma: 0.15;
  --semantic-chroma: 0.12;

  /* 生成调色板 */
  --primary-50: oklch(95% calc(var(--brand-chroma) * 0.3) var(--brand-hue));
  --primary-500: oklch(60% var(--brand-chroma) var(--brand-hue));
  --primary-900: oklch(25% calc(var(--brand-chroma) * 1.2) var(--brand-hue));
}

这样做出来的设计系统，颜色特别和谐。

响应式颜色

没错，颜色也可以响应式：

.card {
  /* 手机端：低饱和度，不刺眼 */
  background: oklch(95% 0.02 240);
}

@media (min-width: 768px) {
  .card {
    /* 大屏：稍微提高饱和度 */
    background: oklch(95% 0.05 240);
  }
}

性能方面

OKLCH 的性能和 RGB 差不多，不用担心。

但有个小建议：复杂的 calc() 计算放在 CSS 变量里，不要放在动画里：

/* 好 */
:root {
  --hover-color: oklch(calc(60% + 10%) calc(0.15 + 0.03) 240);
}

.button:hover {
  background: var(--hover-color);
}

/* 不好 */
.button:hover {
  background: oklch(calc(60% + 10%) calc(0.15 + 0.03) 240);
}

我的建议

先从主色开始：把项目里最重要的几个颜色换成 OKLCH
记住回退：老浏览器用户也要照顾
多试试：OKLCH 的优势要用了才知道
做记录：好用的数值组合记下来，下次直接用

最重要的：别想太多，先用起来。

OKLCH 不是什么高深的技术，就是一个更好用的颜色格式。用习惯了，你就回不去 RGB 了。

就像我现在，看到 #3b82f6 这种颜色代码，总觉得不够直观。还是 oklch(60% 0.15 240) 看着舒服，一眼就知道是什么颜色。

CSS 中的 OKLCH 实践演示

基础语法

CSS 代码：

效果预览：

基础语法

🎨 自定义颜色测试

作者

分类

更多文章

OKLCH 浏览器支持情况：2025年现状一览

OKLCH 调色板：三个滑块玩出完美配色

什么是 OKLCH？新一代颜色系统简单解读

在 CSS 里用 OKLCH：我踩过的坑和发现的技巧

CSS 中的 OKLCH 实践演示

基础语法

CSS 代码：

效果预览：

基础语法

🎨 自定义颜色测试

作者

分类

更多文章

OKLCH 浏览器支持情况：2025年现状一览

OKLCH 调色板：三个滑块玩出完美配色

什么是 OKLCH？新一代颜色系统简单解读