当前位置:首页 > PS教程 > PS教程

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

  • 2022-12-24 21:16:40
  • 来源/作者:互联网/佚名
  • 己被围观

用LESS CSS框架进行编码会简化代码结构,提高我们的工作效率,但是试验后你会发现,默认情况下,LESS在Firefox中能被正确编译,实现效果,但IE和Chrome是无法解析LESS代码的,必须对浏览器进行一些设置才行。

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

 

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

 

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

 

色轮

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

 

互补色

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

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

 

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

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

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

 

 

 

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

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

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

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

三元色

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

 1/3    1 2 3 下一页 尾页

*PSjia.COM 倾力出品,转载请注明来自PS家园网(www.psjia.com)

更多精彩内容

  • 工具运用,给产品图片加上尺寸标识 工具运用,给产品图片加上尺寸标识
  • ps大师之路:ps笔刷的详细设置 ps大师之路:ps笔刷的详细设置
  • ps无缝重复图案的制作和使用方法 ps无缝重复图案的制作和使用方法
  • photoshop大师之路消除锯齿和羽化 photoshop大师之路消除锯齿和羽化
  • 教你怎样分辨照片是否被ps过 教你怎样分辨照片是否被ps过
  • 浅谈photoshop图像处理中的亮调,中间调,暗调选取 浅谈photoshop图像处理中的亮调,中间调,暗调选取
  • Photoshop自由变形调整照片的透视变形 Photoshop自由变形调整照片的透视变形
  • 文字设计,英文字母组合的N种方式 文字设计,英文字母组合的N种方式