关于页面配色

一、互补色
当两个颜色恰好在色环的两端时，这两个颜色叫做补色。补色搭配能形成强列的对比效果

在线配色工具地址

文字背景色和文字颜色互为补色，文字会很难看清，那么就只使用一种颜色作为主要颜色，其补色用来装点页面
比如，使用 深青色(#09A7A1) 作为页面主色，使用其补色 橙色(#FF790E) 来装饰登录按钮

二、css3 里面的 hsl() 调整颜色的色相
hsl 括号里面有三个参数：⇒ 色相 hue / 饱和度 saturation / 亮度 lightness

• 色相
  色相是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。以颜色光谱为例，光谱左边从红色开始，移动到中间的绿色，一直到右边的蓝色，色相值就是沿着这条线的取值。在hsl()里面，色相用色环来代替光谱，色相值就是色环里面的颜色对应的从 0 到 360 度的角度值。
• 饱和度
  饱和度是指色彩的纯度，也就是颜色里灰色的占比，越高色彩越纯，低则逐渐变灰，取0-100%的数值。
• 亮度
  亮度决定颜色的明暗程度，也就是颜色里白色或者黑色的占比，100% 亮度是白色， 0% 亮度是黑色，而 50% 亮度是“一般的”。

颜色	HSL
红色	hsl(0, 100%, 50%)
黄色	hsl(60, 100%, 50%)
绿色	hsl(120, 100%, 50%)
蓝绿色	hsl(180, 100%, 50%)
蓝	hsl(240, 100%, 50%)
品红	hsl(300, 100%, 50%)

三、更改 s 和 l 的值，可以调整颜色的色调：
饱和度代表灰色的占比，亮度代表白色和黑色的占比。这在当你有了一个基色调却需要微调时非常有用。

四、css3 线性渐变
linear-gradient(gradient_direction, color1, color2....)
第一个参数指定了颜色过渡的方向 - 它的值是角度，90deg 代表垂直渐变，45deg 的渐变角度和反斜杠方向差不多。剩下的参数指定了渐变颜色的顺序：

background: linear-gradient(35deg, #CCFFFF, #FFCCCC);

五、使用 css 线性渐变创建条纹元素
repeating-linear-gradient() 语法形式

repeating-linear-gradient(  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
                            \---------------------------------/ \----------------------------/
                              渐变轴的定义                                色标列表

where <side-or-corner> = [left | right] || [top | bottom]
   and <color-stop>     = <color> [ <percentage> | <length> ]?

#grad1 {
  background-image: repeating-linear-gradient(180deg,
      rgb(26,198,204),
      rgb(26,198,204) 7%,
      rgb(100,100,100) 10%);
}

#grad2 {
  background-image: repeating-linear-gradient(-45deg,
      transparent,
      transparent 25px,
      rgba(255,255,255,1) 25px,
      rgba(255,255,255,1) 50px);
}

<ol>
  <li>Repeating horizontal bars
    <div id="grad1"></div>
  </li>
  <li>Zebra stripes
    <div id="grad2"></div>
  </li>
</ol>

效果

因为 gradient 属于 image 数据类型只能在 image 的地方使用它们，如 background-image ，不适合在 background-color / color 里面使用

六、利用 url() 给整个 body 上纹理或者图案背景

body {
	background-image: url(文件路径); /*最终这个图案会一直重复铺，直到铺满整个页面*/
}

七、利用伪元素，画心形