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

2024-01-03 17:39:06 来源/作者: / 己有:2人学习过

前言:用LESS CSS框架进行编码会简化代码结构,提高我们的工作效率,但是试验后你会发现,默认情况下,LESS在Firefox中能被正确编译,实现效果,但IE和Chrome是无法解析LESS代码的,必须对浏览器进行一些设置才行。如果希望对LESS有一个最基础的了解,IBM 对LESS CSS框架的简介会帮到你https://img.lvups.com/d/file/bigpic/2022/12/26/12lwhvqdaas

 

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

 

LESS提供了一些函数,使定义和操作颜色变得超级简单。在本教程中,我们将使用其中的一些函数帮助你控制颜色,更好地配色并保持其组织性。

 

色轮

首先是spin()函数,它可以让我们在色轮上指定一种颜色。这个函数是非常有用的,比如说,在进行配色的时候。你可能已经看过一些常见的颜色结构,以一种和谐的方式进行组合,比如说互补色,三元色,混合色。使用一些工具,像Adobe Color CC(原名Kuler),你可以遵循这些结构快速的生成配色方案。但是如何使用LESS制定我们自己的配色方案呢?

 

互补色

我们将以生成最简单地色彩结构——互补色开始。这种互补的颜色正好在色轮相反的位置。

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

 

首先,我们定义一种基准色,然后参照基准色定义第二种颜色。挑选一种你最喜欢的,或者是任意一种突然浮现在你脑海里的颜色。这里我们挑选了一种青蓝色,#3bafdA,作为实例:

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

由于想要在色轮上得到基准色的补色,我们将度数值设为180。配色方案,使用LESS color函数创建配色方案

 

 

 

这让我们得到两个精确、可爱的颜色,它们是互补的。

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

以下是将这些颜色应用到网页原型设计中的一个例子:

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

三元色

我们可以进一步探讨颜色模型并且创建一个三元色结构。“三元”,顾名思义,是由三种颜色组成。因此,我们将色轮分成三部分,并且用函数spin()来设置旋转的度数: