用CSS写出更炫丽的渐变

·  阅读 3402

这是一个CSS线性渐变,从纯黄色到纯蓝色: \

image.png 注意到它在中间部分的颜色变的很脏了吗?

这就是埃里克·肯尼迪(Erik Kennedy)创造的"灰色死区"。除非您在为渐变选择颜色时非常小心,否则CSS渐变中经常会出现不饱和的中段。

然而,事实证明,我们绝对可以避免灰色死区。在这篇博客文章中,我们将了解为什么会发生这种情况,以及我们如何使用色彩理论来创建丰富,生动,彻底的渐变。

如何计算梯度

你有没有想过CSS算法是如何工作的?它实际上如何计算光谱上每个像素的特定颜色值?linear-gradient

它通过获取3个颜色通道中每个通道的数学平均值来计算它:红色,绿色和蓝色。

单击并拖动以查看沿途每个像素的特定 RGB 细分:

image.png 如何使用: 单击并拖动以重新定位指示器,或聚焦指示器并使用向左/向右箭头键。

在 RGB 色彩空间中,我们通过混合三个通道来创建颜色:红色、绿色和蓝色。每个通道的范围从 0 到 255。

如果我们把所有三个通道都最大化 - 255 / 255 / 255 - 我们得到纯白色。如果我们把每个通道设置为0,我们会得到黑色,没有任何颜色。

实际上,如果将所有 3 个通道都设置为相同的值,则结果将始终为灰度颜色:

image.png 在上面的演示中,我们从纯黄色(255/255/0)开始。当我们穿过渐变时,我们开始在蓝色(0/0/255)中混合。当我们到达最中心时,我们已经混合了一半的黄色,混合了一半的蓝色。

换句话说,所有三个通道都收敛于其中间值 127.5。结果颜色是灰色。

对我来说有点奇怪的是,蓝色和黄色之间的中点是灰色的。通过将两种高饱和度的颜色混合在一起,我们最终得到一种完全不饱和的颜色。如果有一种方法可以只混合颜料,并在整个过程中保持饱和度一致,会怎么样?

链接到此标题其他颜色模式

有很多不同的方式来表示颜色。到目前为止,我们一直在使用R / G / B模式。而且,老实说,这种颜色模式有点糟糕。😅

让我们来谈谈一种不同的颜色模式: HSL

HSL 代表 色相/饱和度/亮度。如果您曾经使用过颜色选取器,则可能使用此颜色模式。*

下面是一个实时示例:

image.png

以下是每个值所表示的内容:

  • 色相控制颜料将是什么,颜色落在色轮上的位置。
  • 饱和度控制颜色的鲜艳程度。
  • 亮度控制颜色的亮度或深色程度。

就个人而言,我发现这是一更直观的思考颜色的方式。

这是一件非常神奇的事情: 如果我们不是平均梯度中的RGB值,而是平均HSL值,该怎么办?

好吧,让我们试试看:

\

image.png

不再有灰色死区,因为我们不再混合 R/G/B 值,而是混合 H/S/L 值。

起始颜色和结束颜色具有相同的饱和度和亮度,因此唯一变化的值是色调。因此,我们有效地走过了色轮。

这是另一个例子,这次混合了具有不同饱和度和亮度的颜色:

image.png

有很大的不同,对吧?

现在,HSL不一定是在任何情况下使用的最佳颜色模式。它倾向于产生可能过于明亮和生动的渐变,因为它没有考虑到人类的感知。

根据HSL颜色模式,这两种颜色具有相同的"亮度":

image.png

不是每个人都以同样的方式看待颜色,但大多数人会说黄色感觉比蓝色轻得多,尽管它们具有相同的"轻盈"值。不过,HSL并不关心人类如何感知颜色。它是根据原始物理,能量和波长等建模的。

幸运的是,还有其他颜色模式确实考虑了人类的感知。例如,HCL类似于HSL,但以人类视觉为模型:

image.png

哪种颜色模式最好? 好吧,这真的取决于你想要什么效果!我喜欢尝试许多不同的颜色模式,以找到特定渐变的最佳颜色模式。

应用这些知识

我有一些好消息和一些坏消息。让我们从坏消息开始。

CSS没有给我们任何方法来改变渐变计算中使用的颜色模式。我们不能"选择加入"对给定的梯度使用HSL插值,至少现在还没有。CSS图像级别4确实提供了一种指定"颜色插值方法"的方法,但据我所知,它在浏览器中并不广泛支持。

不过,好消息是:如果我们有点鬼鬼祟祟,我们可以绕过这个限制。😈

CSS中的渐变不必只坚持两种颜色。我们可以传递3种颜色或10种颜色或100种颜色。

首先,我们需要手动计算一堆中间颜色。我们将使用JavaScript来执行此操作,以便我们可以使用我们想要的任何颜色模式(使用有用的库,如chroma.js):

image.png

接下来,我们将采用该颜色集合,并将每个值传递给 CSS 渐变函数:

.box {
  background-image: linear-gradient(
    to right,
    #ffff00,
    #f8ea47,
    #f0d465,
    #f0d465,
    #e7bf7c,
    #ddaa8f,
    #d095a1,
    #c280b2,
    #b26cc2,
    #9d56d2,
    #8440e1,
    #6028f0,
    #0000ff
  )
}
复制代码

(我们在这里使用线性渐变,但同样的技巧也适用于径向和圆锥渐变!

但是等等,CSS引擎不会仍然使用RGB插值来计算每个提供的颜色之间的间距吗? 除非我们传递数百种颜色,足以满足每个像素的需求,否则我们仍然依赖于RGB插值!

这是真的,但幸运的是这没什么大不了的。

当两种颜色彼此非常相似时,我们使用哪种颜色模式并不重要。你最终会得到大致相同的渐变。无论你如何定义"平均",我们都不会得到一个截然不同的"平均"值。

例如,下面是一个使用两种非常相似的颜色的渐变:

image.png

颜色是如此相似,以至于RGB插值真的没有办法搞砸它。

那么:我们的鬼鬼祟祟的技巧是使用自定义颜色模式生成一堆中点颜色,并将它们全部传递给我们的CSS渐变函数。CSS引擎将使用RGB插值,但不会影响最终结果(至少,还不足以让人类感知)。

好了,现在是有趣的部分。让我们来谈谈如何生成这些渐变。😄

介绍"渐变生成器”

我创建了一个工具,可以帮助您生成可以在CSS中使用的丰富,美丽的渐变。

image.png

我对这个工具感到非常兴奋。它使用了我们在这篇博客文章中讨论的所有内容,以及其他一些漂亮的技巧(例如使用缓动曲线来控制颜色的分布)。

调整控件,直到你喜欢结果,然后复制底部的 CSS 代码段。目前,该工具仅生成线性渐变,但您可以复制/粘贴CSS颜色集,并在径向和圆锥渐变中使用它们!

在这里查看:
joshwcomeau.com/gradient-ge…

复制代码
分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改