目錄
- 官方位址
- 色彩Color
- 主色
- 輔助色
-
- Success
- Info
- Warning
- Danger
- 中性色
官方位址
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>