<script>
export default {
  components: {},
  data() {
    return{

    }
  }
}
</script>


# Color 色彩
efly 为了避免视觉传达差异，使用一套特定的调色板来规定颜色，为你所搭建的产品提供一致的外观视觉感受。

## 主要颜色
efly主要搭配颜色，主要用法为以color为前缀使用，如color-primary。
<div class="box">
    <color-lump :name="'Primary'" color="#409eff" :secondary=true></color-lump>
    <color-lump :name="'Success'" color="#67c23a" :secondary=true></color-lump>
    <color-lump :name="'Warning'" color="#e6a23c" :secondary=true></color-lump>
    <color-lump :name="'Danger'" color="#f56c6c" :secondary=true></color-lump>
    <color-lump :name="'Info'" color="#909399" :secondary=true></color-lump>
</div>

## 文字颜色
efly主要文字颜色，主要用法为以text为前缀使用，如text-primary。
<div class="box">
    <color-lump :name="'Primary'" color="#000000"></color-lump>
    <color-lump :name="'Regular'" color="#555555"></color-lump>
    <color-lump :name="'Secondary'" color="#888888"></color-lump>
    <color-lump :name="'Placeholder'" color="#b2b2b2"></color-lump>
</div>

## 边框颜色
efly主要文字颜色，主要用法为以border为前缀使用，如border-base。
<div class="box">
    <color-lump :name="'Base'" color="#000000"></color-lump>
    <color-lump :name="'Light'" color="#555555"></color-lump>
    <color-lump :name="'Lighter'" color="#888888"></color-lump>
    <color-lump :name="'Extralight'" color="#b2b2b2"></color-lump>
</div>
