欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

ElementUI 色彩Color

程序员文章站 2022-06-01 08:42:43
...

官方地址

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

色彩Color

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

主色

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

<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

ElementUI 色彩Color

<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

ElementUI 色彩Color

<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

ElementUI 色彩Color

<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

ElementUI 色彩Color

<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>	

中性色

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

<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>

ElementUI 色彩Color

<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>

ElementUI 色彩Color

<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>