ElementUI 色彩Color
程序员文章站
2022-06-01 08:42:43
...
官方地址
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>
上一篇: ROS机器人编程实践——读书笔记4