《layui宇宙版教程》：颜色
1.4 颜色
视觉疲劳的形成往往是由于颜色过于丰富或过于单一形成的麻木感，而Layui提供的颜色不仅清新而且不乏深沉，互相中和，不过分刺激视觉神经，形成越久越耐看的微妙影像，使Web平台的用户界面看上去更为融洽。
1.4.1 常用主色
常用主色如图1-xx所示。
Layui主要是以象征包容的墨绿色作为主色调，由于它给人以深沉感，所以通常会以浅黑色作为其陪衬，又会以蓝色这种比较鲜艳的色调来弥补它的色觉疲劳，整体让人清新自然，愈发耐看。
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.all.js"></script>
</head>
<body>
<div class="layui-row">
<div class="layui-col-md12" style="background-color: #009688;">#009688</div>
<div class="layui-col-md12" style="background-color: #5FB878;">#5FB878</div>
<div class="layui-col-md12" style="background-color: #393D49;">#393D49</div>
<div class="layui-col-md12" style="background-color: #1E9FFF;">#1E9FFF</div>
</div>
</body>
</html>
运行结果如图1-xx所示。
1.4.2 场景色
场景色如图1-xx所示。
事实上，Layui并非不敢去尝试一些亮丽的颜色，但许多情况下它可能并不是那么合适，所以把这些颜色归为“场景色”，即按照实际场景来呈现对应的颜色，比如想给人以警觉感，可以尝试用上面的红色。它们一般会出现在Layui的按钮、提示和修饰性元素以及一些侧边元素上。
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.all.js"></script>
</head>
<body>
<div class="layui-row">
<div class="layui-col-md12" style="background-color: #FFB800;">#FFB800</div>
<div class="layui-col-md12" style="background-color: #FF5722;">#FF5722</div>
<div class="layui-col-md12" style="background-color: #01AAED;">#01AAED</div>
<div class="layui-col-md12" style="background-color: #2F4056;">#2F4056</div>
</div>
</body>
</html>
运行结果如下：
1.4.3 极简中性色
极简中性色如图1-xx所示。
它们一般用于背景、边框等。Layui认为灰色系代表极简，因为这是一种神奇的颜色，几乎可以与任何元素搭配，不易形成视觉疲劳，且永远不会过时。低调而优雅！
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.all.js"></script>
</head>
<body>
<div class="layui-row">
<div class="layui-col-md12" style="background-color: #F0F0F0;">#F0F0F0</div>
<div class="layui-col-md12" style="background-color: #f2f2f2;">#f2f2f2</div>
<div class="layui-col-md12" style="background-color: #eeeeee;">#eeeeee</div>
<div class="layui-col-md12" style="background-color: #e2e2e2;">#e2e2e2</div>
<div class="layui-col-md12" style="background-color: #dddddd;">#dddddd</div>
<div class="layui-col-md12" style="background-color: #d2d2d2;">#d2d2d2</div>
<div class="layui-col-md12" style="background-color: #c2c2c2;">#c2c2c2</div>
</div>
</body>
</html>
运行结果如图1-xx所示。
1.4.4 内置的背景色CSS样式类
内置的背景色CSS样式类如图1-xx所示。
Layui内置了七种背景色：
赤色：class="layui-bg-red"
橙色：class="layui-bg-orange"
墨绿：class="layui-bg-green"
藏青：class="layui-bg-cyan"
蓝色：class="layui-bg-blue"
雅黑：class="layui-bg-black"
银灰：class="layui-bg-gray"
以便用于各种元素，例如徽章、分割线、导航等等。
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.all.js"></script>
</head>
<body>
<div class="layui-row">
<div class="layui-col-md12 layui-bg-red">layui-bg-red</div>
<div class="layui-col-md12 layui-bg-orange">layui-bg-orange</div>
<div class="layui-col-md12 layui-bg-green">layui-bg-green</div>
<div class="layui-col-md12 layui-bg-cyan">layui-bg-cyan</div>
<div class="layui-col-md12 layui-bg-blue">layui-bg-blue</div>
<div class="layui-col-md12 layui-bg-black">layui-bg-black</div>
<div class="layui-col-md12 layui-bg-gray">layui-bg-gray</div>
</div>
</body>
</html>
运行结果如图1-xx所示。