页面元素之颜色

1、简介

layui为我们提供了一些颜色和功能之间的搭配，方便我们使用，她提供的颜色清新柔和，整体效果十分自热融洽，也可根据需求自行选择颜色。（微信截图可以十分方便的取色，截图时鼠标右下方的框里显示，光标所指地方的RGB值）

截图取色.png

2、颜色的几种写法

<div style="text-align: center;">
    <div style="background-color: red;">
                单词方式
    </div>
    <div style="background-color: #00F7DE;">
                十六进制代码 其实也是三个0~255的数
    </div>
    <div style="background-color: rgb(010,156,120);">
                rgb()方式
    </div>
    <div style="background-color: rgba(010,156,120,0.2);">
                rgba()方式，a是透明度 取值范围0~1，1是原色
    </div>
</div>

取色代码结果.png

3、颜色搭配

常用主色

常用主色.png

场景色

场景色.png

极简中性色

极简中性色.png

4、内置的css类

layui-bg-color类，直接添加到你想加的标签上就可以，这几个类在前期对网页进行功能分块时，使用起来十分方便，并且这几个颜色也是使用频率较高的配色。
例：
<div class="layui-bg-blue"></div>

内置的layui-bg-color类.png