# Color

----

Unified color matching can improve brand recognition. Besides the need for brand unity, the use of color also needs to achieve the purpose of information transmission, interactive feedback and so on. `AT-UI` is created by [AOTU Labs](https://github.com/o2team), which the brand color is `Blue`. Therefore, the overall color scheme of `AT-UI` is also based on `Brand Blue #6190E8`.

## Main Color

Used to identify brand colors.

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

## Auxiliary Colors

Used to identify the state of Button

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

## Secondary Auxiliary Colors

Used to indentify unimportant information.

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

## Neutral Colors

Used to indentify text, border or background.

<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 Title</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">Text - Black</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">Text - Grey</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">ICON</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">Border</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">Background - Light Blue</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">Background - CreamyWhite</p>
      <p class="color-value c-dark">#FAFBFC</p>
    </div>
  </div>
</div>

## 调色板

For more flexible color matching, we refer to the [Material Design Color Palette](https://material.io/guidelines/style/color.html#color-color-palette). Use the mentioned above `Brand Colors` and `Auxiliary Colors` as the main color, forming a complete gradient palette. Choose number `500` as main color.

> The tool of gradient palette generation is: [MATERIAL DESIGN PALETTE GENERATOR](http://mcg.mbitson.com/)

<div class="color-palette row">
  <!-- 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;
      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>