# Color 色彩

----

统一的色彩搭配可以提高品牌的识别度，色彩的运用除了需要考虑品牌的统一性之外，还需要达到信息传递，交互反馈等目的。`AT-UI` 是凹凸实验室出品，品牌颜色为「凹凸蓝」，因此 `AT-UI` 的整体配色风格也是基于「凹凸蓝」展开的。

## 主色

用于标识品牌颜色

<div class="row no-gutter">
  <div class="col-sm-12 col-md-6 col-lg-5">
    <div class="at-color-container" style="background-color: #6190E8;">
      <p class="color-name">Brand Color</p>
      <p class="color-value">#6190E8</p>
    </div>
  </div>
</div>

## 辅助色

用于标识状态的按钮等

<div class="row no-gutter">
  <div class="col-sm-12 col-md-6 col-lg-5">
    <div class="at-color-container" style="background-color: #13CE66;">
      <p class="color-name">Green - Positive</p>
      <p class="color-value">#13CE66</p>
    </div>
  </div>
  <div class="col-sm-12 col-md-6 col-lg-5">
    <div class="at-color-container" style="background-color: #FF4949;">
      <p class="color-name">Red - Negative</p>
      <p class="color-value">#FF4949</p>
    </div>
  </div>
  <div class="col-sm-12 col-md-6 col-lg-5">
    <div class="at-color-container" style="background-color: #FFC82C;">
      <p class="color-name c-dark">Yellow - Warning</p>
      <p class="color-value c-dark">#FFC82C</p>
    </div>
  </div>
  <div class="col-sm-12 col-md-6 col-lg-5">
    <div class="at-color-container" style="background-color: #78A4FA;">
      <p class="color-name">Blue - Info</p>
      <p class="color-value">#78A4FA</p>
    </div>
  </div>
</div>

## 次辅助色

用于不那么重要的信息等

<div class="row no-gutter">
  <div class="col-sm-12 col-md-6 col-lg-5">
    <div class="at-color-container" style="background-color: #C2ABC7;">
      <p class="color-name">Roof</p>
      <p class="color-value">#C2ABC7</p>
    </div>
  </div>
  <div class="col-sm-12 col-md-6 col-lg-5">
    <div class="at-color-container" style="background-color: #F0D0D5;">
      <p class="color-name c-dark">Curtain</p>
      <p class="color-value c-dark">#F0D0D5</p>
    </div>
  </div>
  <div class="col-sm-12 col-md-6 col-lg-5">
    <div class="at-color-container" style="background-color: #F1E4ED;">
      <p class="color-name c-dark">Door</p>
      <p class="color-value c-dark">#F1E4ED</p>
    </div>
  </div>
  <div class="col-sm-12 col-md-6 col-lg-5">
    <div class="at-color-container" style="background-color: #EEF0F0;">
      <p class="color-name c-dark">Wall</p>
      <p class="color-value c-dark">#EEF0F0</p>
    </div>
  </div>
</div>

## 中性色

用于文本、背景和边框

<div class="row no-gutter">
  <div class="col-sm-12 col-md-6 col-lg-5">
    <div class="at-color-container" style="background-color: #2C405A;">
      <p class="color-name">Header 标题</p>
      <p class="color-value">#2C405A</p>
    </div>
  </div>
  <div class="col-sm-12 col-md-6 col-lg-5">
    <div class="at-color-container" style="background-color: #3F536E;">
      <p class="color-name">正文字体 - 黑</p>
      <p class="color-value">#3F536E</p>
    </div>
  </div>
  <div class="col-sm-12 col-md-6 col-lg-5">
    <div class="at-color-container" style="background-color: #8DABC4;">
      <p class="color-name">正文字体 - 灰</p>
      <p class="color-value">#8DABC4</p>
    </div>
  </div>
  <div class="col-sm-12 col-md-6 col-lg-5">
    <div class="at-color-container" style="background-color: #A8C6DF;">
      <p class="color-name">图标</p>
      <p class="color-value">#A8C6DF</p>
    </div>
  </div>
  <div class="col-sm-12 col-md-6 col-lg-5">
    <div class="at-color-container" style="background-color: #C5D9E8;">
      <p class="color-name">边框</p>
      <p class="color-value">#C5D9E8</p>
    </div>
  </div>
  <div class="col-sm-12 col-md-6 col-lg-5">
    <div class="at-color-container" style="background-color: #ECF5FD;">
      <p class="color-name c-dark">背景色 - 浅蓝</p>
      <p class="color-value c-dark">#ECF5FD</p>
    </div>
  </div>
  <div class="col-sm-12 col-md-6 col-lg-5">
    <div class="at-color-container" style="background-color: #FAFBFC;">
      <p class="color-name c-dark">背景色 - 米白</p>
      <p class="color-value c-dark">#FAFBFC</p>
    </div>
  </div>
</div>

## 调色板

为了更灵活的进行颜色搭配，我们参考了 [Material Design Color Palette](https://material.io/guidelines/style/color.html#color-color-palette) ，使用上述提到的 `品牌色` 和 `辅助色` 作为主色，形成一条条完整的渐变色板。主色使用 `500` 色号

> 渐变色板的生成，使用的工具是：[MATERIAL DESIGN PALETTE GENERATOR](http://mcg.mbitson.com/)

<div class="color-palette row no-gutter">
  <!-- Brand Blue -->
  <ul class="color-group col-sm-20 col-md-4">
    <li style="background-color: #6190E8;">
      <span class="color-name">Brand Blue</span>
      <span class="color-value">#6190E8</span>
    </li>
    <li style="background-color: #ECF2FC;">
      <span class="color-name c-dark">50</span>
      <span class="color-value c-dark">#ECF2FC</span>
    </li>
    <li style="background-color: #D0DEF8;">
      <span class="color-name c-dark">100</span>
      <span class="color-value c-dark">#D0DEF8</span>
    </li>
    <li style="background-color: #B0C8F4;">
      <span class="color-name c-dark">200</span>
      <span class="color-value c-dark">#B0C8F4</span>
    </li>
    <li style="background-color: #90B1EF;">
      <span class="color-name">300</span>
      <span class="color-value">#90B1EF</span>
    </li>
    <li style="background-color: #79A1EB;">
      <span class="color-name">400</span>
      <span class="color-value">#79A1EB</span>
    </li>
    <li style="background-color: #6190E8;">
      <span class="color-name">500</span>
      <span class="color-value">#6190E8</span>
    </li>
    <li style="background-color: #5988E5;">
      <span class="color-name">600</span>
      <span class="color-value">#5988E5</span>
    </li>
    <li style="background-color: #4F7DE2;">
      <span class="color-name">700</span>
      <span class="color-value">#4F7DE2</span>
    </li>
    <li style="background-color: #4573DE;">
      <span class="color-name">800</span>
      <span class="color-value">#4573DE</span>
    </li>
    <li style="background-color: #3361D8;">
      <span class="color-name">900</span>
      <span class="color-value">#3361D8</span>
    </li>
  </ul>

  <!-- Green -->
  <ul class="color-group col-sm-20 col-md-4">
    <li style="background-color: #13CE66;">
      <span class="color-name">Green</span>
      <span class="color-value">#13CE66</span>
    </li>
    <li style="background-color: #E3F9ED;">
      <span class="color-name c-dark">50</span>
      <span class="color-value c-dark">#E3F9ED</span>
    </li>
    <li style="background-color: #B8F0D1;">
      <span class="color-name c-dark">100</span>
      <span class="color-value c-dark">#B8F0D1</span>
    </li>
    <li style="background-color: #89E7B3;">
      <span class="color-name c-dark">200</span>
      <span class="color-value c-dark">#89E7B3</span>
    </li>
    <li style="background-color: #5ADD94;">
      <span class="color-name">300</span>
      <span class="color-value">#5ADD94</span>
    </li>
    <li style="background-color: #36D57D;">
      <span class="color-name">400</span>
      <span class="color-value">#36D57D</span>
    </li>
    <li style="background-color: #13CE66;">
      <span class="color-name">500</span>
      <span class="color-value">#13CE66</span>
    </li>
    <li style="background-color: #11C95E;">
      <span class="color-name">600</span>
      <span class="color-value">#11C95E</span>
    </li>
    <li style="background-color: #0EC253;">
      <span class="color-name">700</span>
      <span class="color-value">#0EC253</span>
    </li>
    <li style="background-color: #0BBC49;">
      <span class="color-name">800</span>
      <span class="color-value">#0BBC49</span>
    </li>
    <li style="background-color: #06B038;">
      <span class="color-name">900</span>
      <span class="color-value">#06B038</span>
    </li>
  </ul>

  <!-- Red -->
  <ul class="color-group col-sm-20 col-md-4">
    <li style="background-color: #FF4949;">
      <span class="color-name">Red</span>
      <span class="color-value">#FF4949</span>
    </li>
    <li style="background-color: #FFE9E9;">
      <span class="color-name c-dark">50</span>
      <span class="color-value c-dark">#FFE9E9</span>
    </li>
    <li style="background-color: #FFC8C8;">
      <span class="color-name c-dark">100</span>
      <span class="color-value c-dark">#FFC8C8</span>
    </li>
    <li style="background-color: #FFA4A4;">
      <span class="color-name c-dark">200</span>
      <span class="color-value c-dark">#FFA4A4</span>
    </li>
    <li style="background-color: #FF8080;">
      <span class="color-name">300</span>
      <span class="color-value">#FF8080</span>
    </li>
    <li style="background-color: #FF6464;">
      <span class="color-name">400</span>
      <span class="color-value">#FF6464</span>
    </li>
    <li style="background-color: #FF4949;">
      <span class="color-name">500</span>
      <span class="color-value">#FF4949</span>
    </li>
    <li style="background-color: #FF4242;">
      <span class="color-name">600</span>
      <span class="color-value">#FF4242</span>
    </li>
    <li style="background-color: #FF3939;">
      <span class="color-name">700</span>
      <span class="color-value">#FF3939</span>
    </li>
    <li style="background-color: #FF3131;">
      <span class="color-name">800</span>
      <span class="color-value">#FF3131</span>
    </li>
    <li style="background-color: #FF2121;">
      <span class="color-name">900</span>
      <span class="color-value">#FF2121</span>
    </li>
  </ul>

  <!-- Yellow -->
  <ul class="color-group col-sm-20 col-md-4">
    <li style="background-color: #FFC82C;">
      <span class="color-name">Yellow</span>
      <span class="color-value">#FFC82C</span>
    </li>
    <li style="background-color: #FFF8E6;">
      <span class="color-name c-dark">50</span>
      <span class="color-value c-dark">#FFF8E6</span>
    </li>
    <li style="background-color: #FFEFC0;">
      <span class="color-name c-dark">100</span>
      <span class="color-value c-dark">#FFEFC0</span>
    </li>
    <li style="background-color: #FFE496;">
      <span class="color-name c-dark">200</span>
      <span class="color-value c-dark">#FFE496</span>
    </li>
    <li style="background-color: #FFD96B;">
      <span class="color-name">300</span>
      <span class="color-value">#FFD96B</span>
    </li>
    <li style="background-color: #FFD04C;">
      <span class="color-name">400</span>
      <span class="color-value">#FFD04C</span>
    </li>
    <li style="background-color: #FFC82C;">
      <span class="color-name">500</span>
      <span class="color-value">#FFC82C</span>
    </li>
    <li style="background-color: #FFC227;">
      <span class="color-name">600</span>
      <span class="color-value">#FFC227</span>
    </li>
    <li style="background-color: #FFBB21;">
      <span class="color-name">700</span>
      <span class="color-value">#FFBB21</span>
    </li>
    <li style="background-color: #FFB41B;">
      <span class="color-name">800</span>
      <span class="color-value">#FFB41B</span>
    </li>
    <li style="background-color: #FFA710;">
      <span class="color-name">900</span>
      <span class="color-value">#FFA710</span>
    </li>
  </ul>

  <!-- Blue -->
  <ul class="color-group col-sm-20 col-md-4">
    <li style="background-color: #78A4FA;">
      <span class="color-name">Blue</span>
      <span class="color-value">#78A4FA</span>
    </li>
    <li style="background-color: #EFF4FE;">
      <span class="color-name c-dark">50</span>
      <span class="color-value c-dark">#EFF4FE</span>
    </li>
    <li style="background-color: #D7E4FE;">
      <span class="color-name c-dark">100</span>
      <span class="color-value c-dark">#D7E4FE</span>
    </li>
    <li style="background-color: #BCD2FD;">
      <span class="color-name c-dark">200</span>
      <span class="color-value c-dark">#BCD2FD</span>
    </li>
    <li style="background-color: #A1BFFC;">
      <span class="color-name">300</span>
      <span class="color-value">#A1BFFC</span>
    </li>
    <li style="background-color: #8CB2FB;">
      <span class="color-name">400</span>
      <span class="color-value">#8CB2FB</span>
    </li>
    <li style="background-color: #78A4FA;">
      <span class="color-name">500</span>
      <span class="color-value">#78A4FA</span>
    </li>
    <li style="background-color: #709CF9;">
      <span class="color-name">600</span>
      <span class="color-value">#709CF9</span>
    </li>
    <li style="background-color: #6592F9;">
      <span class="color-name">700</span>
      <span class="color-value">#6592F9</span>
    </li>
    <li style="background-color: #5B89F8;">
      <span class="color-name">800</span>
      <span class="color-value">#5B89F8</span>
    </li>
    <li style="background-color: #4878F6;">
      <span class="color-name">900</span>
      <span class="color-value">#4878F6</span>
    </li>
  </ul>

  <!-- Grey -->
  <ul class="color-group col-sm-20 col-md-4">
    <li style="background-color: #BFBFBF;">
      <span class="color-name">Grey</span>
      <span class="color-value">#BFBFBF</span>
    </li>
    <li style="background-color: #F7F7F7;">
      <span class="color-name c-dark">50</span>
      <span class="color-value c-dark">#F7F7F7</span>
    </li>
    <li style="background-color: #ECECEC;">
      <span class="color-name c-dark">100</span>
      <span class="color-value c-dark">#ECECEC</span>
    </li>
    <li style="background-color: #DFDFDF;">
      <span class="color-name c-dark">200</span>
      <span class="color-value c-dark">#DFDFDF</span>
    </li>
    <li style="background-color: #D2D2D2;">
      <span class="color-name">300</span>
      <span class="color-value">#D2D2D2</span>
    </li>
    <li style="background-color: #C9C9C9;">
      <span class="color-name">400</span>
      <span class="color-value">#C9C9C9</span>
    </li>
    <li style="background-color: #BFBFBF;">
      <span class="color-name">500</span>
      <span class="color-value">#BFBFBF</span>
    </li>
    <li style="background-color: #B9B9B9;">
      <span class="color-name">600</span>
      <span class="color-value">#B9B9B9</span>
    </li>
    <li style="background-color: #B1B1B1;">
      <span class="color-name">700</span>
      <span class="color-value">#B1B1B1</span>
    </li>
    <li style="background-color: #A9A9A9;">
      <span class="color-name">800</span>
      <span class="color-value">#A9A9A9</span>
    </li>
    <li style="background-color: #9B9B9B;">
      <span class="color-name">900</span>
      <span class="color-value">#9B9B9B</span>
    </li>
  </ul>

  <!-- Black -->
  <ul class="color-group col-sm-20 col-md-4">
    <li style="background-color: #2C405A;">
      <span class="color-name">Black</span>
      <span class="color-value">#2C405A</span>
    </li>
    <li style="background-color: #E6E8EB;">
      <span class="color-name c-dark">50</span>
      <span class="color-value c-dark">#E6E8EB</span>
    </li>
    <li style="background-color: #C0C6CE;">
      <span class="color-name c-dark">100</span>
      <span class="color-value c-dark">#C0C6CE</span>
    </li>
    <li style="background-color: #96A0AD;">
      <span class="color-name">200</span>
      <span class="color-value">#96A0AD</span>
    </li>
    <li style="background-color: #6B798C;">
      <span class="color-name">300</span>
      <span class="color-value">#6B798C</span>
    </li>
    <li style="background-color: #4C5D73;">
      <span class="color-name">400</span>
      <span class="color-value">#4C5D73</span>
    </li>
    <li style="background-color: #2C405A;">
      <span class="color-name">500</span>
      <span class="color-value">#2C405A</span>
    </li>
    <li style="background-color: #273A52;">
      <span class="color-name">600</span>
      <span class="color-value">#273A52</span>
    </li>
    <li style="background-color: #213248;">
      <span class="color-name">700</span>
      <span class="color-value">#213248</span>
    </li>
    <li style="background-color: #1B2A3F;">
      <span class="color-name">800</span>
      <span class="color-value">#1B2A3F</span>
    </li>
    <li style="background-color: #101C2E;">
      <span class="color-name">900</span>
      <span class="color-value">#101C2E</span>
    </li>
  </ul>
</div>

<style lang="scss" scoped>
  .at-color-container {
    margin: 16px 16px 0 0;
    padding: 16px;
    border-radius: 4px;

    p {
      color: #fff;
      font-size: 14px;
    }
    .color-value {
      font-size: 12px;
      opacity: 0.7;
    }
  }
  .c-dark {
    color: #7E95A7 !important;
  }
  .color-palette {
    .color-group {
      padding: 0;
      margin: 16px 16px 16px 0;
      color: #fff;
      font-size: 14px;
      list-style: none;
      min-width: 200px;
      border-radius: 4px;
      overflow: hidden;

      li {
        padding: 16px;
        overflow: hidden;
        line-height: 1.4;

        &:first-child {
          .color-name {
            display: block;
            font-size: 18px;
          }
        }
      }
      .color-value {
        float: right;
      }
    }
  }
</style>