ElementUI 色彩Color

官方地址

https://element.eleme.io/#/zh-CN/component/color

色彩Color

Element 为了避免视觉传达差异，使用一套特定的调色板来规定颜色，为你所搭建的产品提供一致的外观视觉感受。

主色

Element 主要品牌颜色是鲜艳、友好的蓝色。

<div style="background-color: #409EFF; width: 300px; height: 200px;">
	<p>主色 #409EFF</p>
</div>
		
<div style="background-color: rgb(83, 168, 255); width: 300px; height: 200px;">
	<p>background: rgb(83, 168, 255);</p>
</div>

<div style="background-color: rgb(102, 177, 255); width: 300px; height: 200px;">
	<p>background: rgb(102, 177, 255);</p>
</div>		

<div style="background-color: rgb(121, 187, 255); width: 300px; height: 200px;">
	<p>background: rgb(121, 187, 255);</p>
</div>		

<div style="background-color: rgb(140, 197, 255); width: 300px; height: 200px;">
	<p>background: rgb(140, 197, 255);</p>
</div>		

<div style="background-color: rgb(160, 207, 255); width: 300px; height: 200px;">
	<p>background: rgb(160, 207, 255);</p>
</div>

<div style="background-color: rgb(179, 216, 255); width: 300px; height: 200px;">
	<p>background: rgb(179, 216, 255);</p>
</div>

<div style="background-color: rgb(198, 226, 255); width: 300px; height: 200px;">
	<p>background: rgb(198, 226, 255);</p>
</div>	
	
<div style="background-color: rgb(217, 236, 255); width: 300px; height: 200px;">
	<p>background: rgb(217, 236, 255);</p>
</div>	

辅助色

除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。

Success

<div style="background-color: #67C23A; width: 300px; height: 200px;">
	<p>辅助色 Success #67C23A</p>
</div>

<div style="background-color: rgb(225, 243, 216); width: 300px; height: 200px;">
	<p>background: rgb(225, 243, 216);</p>
</div>

<div style="background-color: rgb(240, 249, 235); width: 300px; height: 200px;">
	<p>background: rgb(240, 249, 235);</p>
</div>	

Info

<div style="background-color: #909399; width: 300px; height: 200px;">
	<p>辅助色 Info #909399</p>
</div>

<div style="background-color: rgb(233, 233, 235); width: 300px; height: 200px;">
	<p>background: rgb(233, 233, 235);</p>
</div>

<div style="background-color: rgb(244, 244, 245); width: 300px; height: 200px;">
	<p>background: rgb(244, 244, 245);</p>
</div>	

Warning

<div style="background-color: #E6A23C; width: 300px; height: 200px;">
	<p>辅助色 Warning #E6A23C</p>
</div>

<div style="background-color: rgb(250, 236, 216); width: 300px; height: 200px;">
	<p>background: rgb(250, 236, 216);</p>
</div>

<div style="background-color: rgb(253, 246, 236); width: 300px; height: 200px;">
	<p>background: rgb(253, 246, 236);</p>
</div>

Danger

<div style="background-color: #F56C6C; width: 300px; height: 200px;">
	<p>辅助色 Danger #F56C6C</p>
</div>

<div style="background-color: rgb(253, 226, 226); width: 300px; height: 200px;">
	<p>background: rgb(253, 226, 226);</p>
</div>

<div style="background-color: rgb(254, 240, 240); width: 300px; height: 200px;">
	<p>background: rgb(254, 240, 240);</p>
</div>	

中性色

中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。

<div style="background-color: #303133; width: 300px; height: 200px;">
	<p>主要文字 #303133</p>
</div>		

<div style="background-color: #606266; width: 300px; height: 200px;">
	<p>常规文字 #606266</p>
</div>		

<div style="background-color: #909399; width: 300px; height: 200px;">
	<p>次要文字 #909399</p>
</div>		

<div style="background-color: #C0C4CC; width: 300px; height: 200px;">
	<p>占位文字 #C0C4CC</p>
</div>

<div style="background-color: #DCDFE6; width: 300px; height: 200px;">
	<p>一级边框 #DCDFE6</p>
</div>		

<div style="background-color: #E4E7ED; width: 300px; height: 200px;">
	<p>二级边框 #E4E7ED</p>
</div>		

<div style="background-color: #EBEEF5; width: 300px; height: 200px;">
	<p>三级边框 #EBEEF5</p>
</div>		

<div style="background-color: #F2F6FC; width: 300px; height: 200px;">
	<p>四级边框 #F2F6FC</p>
</div>

<div style="background-color: rgb(0, 0, 0); width: 300px; height: 200px;">
	<p>基础黑色 background: rgb(0, 0, 0);</p>
</div>		

<div style="background-color: rgb(255, 255, 255); width: 300px; height: 200px;">
	<p>基础白色 background: rgb(255, 255, 255);</p>
</div>		

<div style="background-color: transparent; width: 300px; height: 200px;">
	<p>透明 transparent</p>
</div>