CSS 渐变：为何你的颜色过渡显得浑浊以及如何修复

Source: Dev.to

为什么渐变会显得浑浊

当你在两个鲜艳的颜色之间创建渐变时，可能会在中间看到意外的灰色条带。这是因为浏览器在默认的 sRGB 颜色空间中进行颜色插值，该空间在 RGB 立方体中沿直线进行插值。

例如，蓝色 (#0000FF) 与 黄色 (#FFFF00) 之间的直线经过大约 #808080 的中点——一个真正的灰色。RGB 模型并不符合人类的颜色感知，所以在感知上不同的颜色在 RGB 空间中可能很接近，反之亦然。

颜色插值与感知颜色空间

为了避免浑浊的过渡，应在感知颜色空间中进行颜色插值。现代 CSS 允许使用 in 关键字指定插值空间。

/* sRGB 中的浑浊过渡 */
.gradient-srgb {
  background: linear-gradient(to right, blue, yellow);
}

/* OKLCH 中的鲜艳过渡 */
.gradient-oklch {
  background: linear-gradient(in oklch to right, blue, yellow);
}

in oklch 语法告诉浏览器在 OKLCH 颜色空间中进行插值，该空间的路径经过更丰富的色相而不是灰色，从而产生自然的渐变效果。

CSS 渐变函数

线性渐变

沿直线创建过渡。

background: linear-gradient(135deg, #667eea, #764ba2);

• 角度 定义方向：0deg（从下到上），90deg（从左到右），135deg（左上到右下）。
• 也可以使用关键字，如 to right、to bottom left 等。

径向渐变

从中心点向外扩展过渡。

background: radial-gradient(circle at 30% 50%, #667eea, #764ba2);

• 形状：circle 或 ellipse。
• 位置（at 30% 50%）设置中心；默认是元素中心的椭圆。

锥形渐变

围绕中心点进行过渡，类似色轮。

background: conic-gradient(from 0deg at 50% 50%, #667eea, #764ba2, #667eea);

锥形渐变非常适合饼图、颜色选择器和径向进度指示器。

控制颜色停靠点

默认情况下，颜色停靠点均匀分布，但你可以显式定位它们。

/* 蓝色占据大部分渐变 */
background: linear-gradient(
  to right,
  #667eea 0%,
  #667eea 60%,
  #764ba2 100%
);

硬边缘

在同一位置放置两个停靠点会产生锐利的边界。

/* 50% 处的锐利颜色边界 */
background: linear-gradient(
  to right,
  #667eea 50%,
  #764ba2 50%
);

中点提示

使用颜色提示可以移动过渡的中点位置。

background: linear-gradient(
  to right,
  #667eea,
  30%,               /* 中点在 30% 而不是 50% */
  #764ba2
);

添加中间停靠点以增加层次感

仅使用两种颜色的渐变可能显得平淡。加入中间停靠点可以提升感知深度。

/* 平淡 */
background: linear-gradient(135deg, #667eea, #764ba2);

/* 丰富且有层次感 */
background: linear-gradient(
  135deg,
  #667eea 0%,
  #5a67d8 30%,
  #764ba2 100%
);

中间颜色应是保持鲜艳度的混合色。在感知颜色空间（例如 OKLCH）中选择它，比简单的算术平均效果更好。