配色方案,使用LESS color函数创建配色方案

2023-12-18 17:48:54 来源/作者: / 己有:2人学习过

饱和度

或者,我们可以调整颜色饱和度来代替明暗度。饱和度定义了一种颜色的深度。饱和度越大,颜色越亮丽,最低饱和度则会使颜色趋于灰色。

拿上面的例子来说,我们可以用saturate() 和 desaturate()函数来替换明暗度的函数,此外,还可以定义未激活状态的颜色。

配色方案,使用LESS color函数创建配色方案

进一步调整颜色的不饱和度,直到认为它在你的设计背景中合适为止。

 

现在当我们自定义按钮样式的时候,我们的变量色都是与基准色紧密联系的;当基准色改变的时候,它们都会进行相应的变化。

配色方案,使用LESS color函数创建配色方案

智能色彩输出

LESS让我们的样式变得更智能。举例来说,我们能让我们的样式自己“思考”并决定什么颜色在什么条件下适用。假设我们正在创建一个网站模板,这是按钮的基本样式,你打算用不同的颜色和风格来扩展它。但是我们怎样控制颜色的输出呢?我们当然不希望深色的文字在深色的背景上,反之亦然。我们需要确保文本保留对比,以便于阅读,这样,contrast()函数就派上用场了。

配色方案,使用LESS color函数创建配色方案

在上面的例子中,我们通过contrast()函数来设置颜色。这样确保文本颜色与背景颜色有足够的反差。在这种情况下,由于背景颜色是#000,文本颜色应该返回#fff。如果你设置背景色为浅色,比如说白色,烟白,或者天蓝色,文本颜色应该返回#000。

配色方案,使用LESS color函数创建配色方案

你也可以自定义颜色的明暗。在下面的例子中,颜色值将返回#999或#777,而不是#fff,或者#000。

配色方案,使用LESS color函数创建配色方案

通常情况下,如果颜色是透明的,尤其是背景颜色,我也不想输出颜色声明。对此,我们可以在LESS 混合闭包内封装background声明。

配色方案,使用LESS color函数创建配色方案

你也可以为border属性和color属性作同样的声明,并通过删除不必要的规则在你的样式表里只保留几行代码。你同样可以在声明border与color属性时做同样的事,并只保留一些必要的代码。

 

结束语

我希望我介绍的某些函数能帮助你在设计中提升配色能力。你可以在LESS官网上上找到完整的函数清单,并试验它。我非常同意Kezz Bracey的说法。配色的唯一方法就是反复的试验。

 

“直到我通过反复试验来开始创建可靠的配色方案,我所看过的所有色彩理论才开始变得有意义