前端页面配色

时间:2024-03-13 11:12:56

色彩基础知识

色彩的三要素:色相,饱和度,明度。
色相,可以理解为某种具体的颜色,比如红橙黄绿青蓝紫就代表了七种不同色相。

饱和度,简单来说就是色彩的丰富性,饱和度越强色彩越丰富,反之越单一。
明度,就是指代颜色的亮与暗
用二维的方式表达就是色环,它的特点就是不同角度代表不同色相,不同纵深代表不同明度。
前端页面配色

了解了色彩的三个基本概念,就可以掌握五种搭配手段了,
分别是:

  • 单色搭配
  • 近似色搭配
  • 补色搭配
  • 分裂补色搭配
  • 原色搭配
    前端页面配色
    01/ 单色搭配
    指的是相通色相下,改变明度和饱和度。

比右边的示例,它的主色调是紫色,但它通过不同明度和饱和度来呈现色彩上的主体变化。
前端页面配色
02/ 近似色搭配
相当于在色环上近距离角度范围内的色彩搭配,比如橙黄相配。
前端页面配色
03/ 补色搭配
并不是新手的好选择,需要有很好的色彩把控能力才能保证将色环上相差180°的颜色搭配得当。
前端页面配色

04/ 分裂补色搭配
相当于在补色的基础上另外加上一近似色搭配,同样不推荐使用,容易翻车。

前端页面配色

05/ 原色搭配

是色环上相距120°的色彩组合,其中经典的范例是红黄配,但也由于使用得过于泛滥,很难再推陈出新。

前端页面配色

差的配色不如人之处则是:色彩繁多、滥用渐变。

配色的要诀啦:精简色彩、少用渐变、色彩温和
前端页面配色
NO.1 精简色彩
少即是多。
需要注意的是底色、主色和强调色的相互配比,分别为70%、25%和5%,明度上也是由弱到强的关系。

前端页面配色
NO.2 少用渐变

渐变用不好反而添烦恼,如果你非要使用渐变不可,我建议你使用近似色表现,更容易凸显质感而非廉价感。
前端页面配色
NO.3 色彩温和
色彩上过于强烈容易产生视觉疲劳,用温和的颜色更会让人保持阅读欲望。
前端页面配色
配色大法
前端页面配色
除了解决配色方法之外,还要知道在一张页面上主要是底色+主色+强调色,三者的主要分布
前端页面配色
前端页面配色
前端页面配色
01/单色配色法
改变同一色相的明度,饱和度
前端页面配色
前端页面配色
前端页面配色
前端页面配色
前端页面配色
前端页面配色
02/ 同系配色法
采用了两种活以上的近似色彩搭配,常常以渐变色的形式呈现

前端页面配色

前端页面配色
03/ 软件配色法
单色配色选择: peise.net/tools/web
多色配色网站:colormind.io
04/模仿配色法
前端页面配色
前端页面配色

本文源于:https://www.zhihu.com/question/22148127/answer/864747769