跳到取色器

蓝色到藏青色渐变

从蓝色到藏青色的平滑 CSS 渐变,在 OKLab 中混合,中间颜色依然干净。可调整角度、添加颜色并复制代码。

颜色

混合空间

OKLab 让中间保持明亮。sRGB 是旧浏览器的混合方式,中间常常发灰。

类型
90°

CSS

background: linear-gradient(90deg, #0000ff, #0000ee, #0000de, #0000ce, #0000bd, #0000ae, #00009e, #00008f, #000080);
background: linear-gradient(90deg in oklab, #0000ff, #000080);

Tailwind CSS v4

bg-linear-90/oklab from-[#0000ff] to-[#000080]

渐变中的颜色

7

蓝色和藏青色在各色彩空间中的混合效果

同样两种颜色,浏览器在不同空间中混合,中间色也会不同。下面是 50% 处的精确颜色。 这两种颜色在各个空间中的混合效果几乎相同:中间色在 OKLab 中为 #0000bd,在 sRGB 中为 #0000c0,用哪个都可以。

混合空间渐变预览中间色亮度彩度
OKLab#0000bd36.2%0.251
OKLCH#0000bd36.2%0.251
sRGB#0000c036.4%0.253
LCH#0000bd36.2%0.251
HSL#0000c036.4%0.253

关于这个渐变的常见问题

如何用 CSS 制作从蓝色到藏青色的渐变?

使用 background: linear-gradient(90deg in oklab, #0000ff, #000080)。为兼容很旧的浏览器,可在它前面加一行 sRGB 版本。所有现代浏览器都支持在 OKLab 中插值。

蓝色和藏青色正中间是什么颜色?

在 OKLab 中混合,蓝色和藏青色正中间的颜色是 #0000bd。普通 sRGB 混合得到的是 #0000c0。

如何用 Tailwind CSS 制作从蓝色到藏青色的渐变?

在 Tailwind CSS v4 中使用类名 bg-linear-90/oklab from-[#0000ff] to-[#000080]。