Color Scheme

In this example below you will see how to do a Color Scheme with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by jesgs, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright jesgs ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Color Scheme</title>
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,700,700i" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="row">
  <div class="col-md-12">
    <h1>Color Scheme Template</h1>
  </div>
</div>
<div class="row">
  <div class="col-md-12">
    <h2>Color Chips</h2>
  </div>
</div>
<div class="row"> 
  <div class="col-md-6">
    <div class="row">
      <div class="color-chip">
        <div class="color-chip__color color-chip__color--base-00">
          &nbsp;
        </div>
        <div class="color-chip__meta">
          <p class="color-chip__name">Base 00</p>
          <p class="color-chip__value">#002b36</p>
        </div>
      </div>

      <div class="color-chip">
        <div class="color-chip__color color-chip__color--base-01">
          &nbsp;
        </div>
        <div class="color-chip__meta">
          <p class="color-chip__name">Base 01</p>
          <p class="color-chip__value">#073642</p>
        </div>
      </div>

      <div class="color-chip">
        <div class="color-chip__color color-chip__color--base-02">
          &nbsp;
        </div>
        <div class="color-chip__meta">
          <p class="color-chip__name">Base 02</p>
          <p class="color-chip__value">#586e75</p>
        </div>
      </div>

      <div class="color-chip">
        <div class="color-chip__color color-chip__color--base-03">
          &nbsp;
        </div>
        <div class="color-chip__meta">
          <p class="color-chip__name">Base 03</p>
          <p class="color-chip__value">#657b83</p>
        </div>
      </div>  
    </div>
  </div> 
  <div class="col-md-6">
    <div class="row">
      <div class="color-chip">
        <div class="color-chip__color color-chip__color--accent-01">
          &nbsp;
        </div>
        <div class="color-chip__meta">
          <p class="color-chip__name">Accent 01</p>
          <p class="color-chip__value">#b58900</p>
        </div>
      </div>

      <div class="color-chip">
        <div class="color-chip__color color-chip__color--accent-02">
          &nbsp;
        </div>
        <div class="color-chip__meta">
          <p class="color-chip__name">Accent 02</p>
          <p class="color-chip__value">#cb4b16</p>
        </div>
      </div>

      <div class="color-chip">
        <div class="color-chip__color color-chip__color--accent-03">
          &nbsp;
        </div>
        <div class="color-chip__meta">
          <p class="color-chip__name">Accent 03</p>
          <p class="color-chip__value">#dc322f</p>
        </div>
      </div>

      <div class="color-chip">
        <div class="color-chip__color color-chip__color--accent-04">
          &nbsp;
        </div>
        <div class="color-chip__meta">
          <p class="color-chip__name">Accent 04</p>
          <p class="color-chip__value">#d33682</p>
        </div>
      </div>  
    </div>

    <div class="row">
      <div class="color-chip">
        <div class="color-chip__color color-chip__color--accent-05">
          &nbsp;
        </div>
        <div class="color-chip__meta">
          <p class="color-chip__name">Accent 05</p>
          <p class="color-chip__value">#6c71c4</p>
        </div>
      </div>

      <div class="color-chip">
        <div class="color-chip__color color-chip__color--accent-06">
          &nbsp;
        </div>
        <div class="color-chip__meta">
          <p class="color-chip__name">Accent 06</p>
          <p class="color-chip__value">#268bd2</p>
        </div>
      </div>

      <div class="color-chip">
        <div class="color-chip__color color-chip__color--accent-07">
          &nbsp;
        </div>
        <div class="color-chip__meta">
          <p class="color-chip__name">Accent 07</p>
          <p class="color-chip__value">#2aa198</p>
        </div>
      </div>

      <div class="color-chip">
        <div class="color-chip__color color-chip__color--accent-08">
          &nbsp;
        </div>
        <div class="color-chip__meta">
          <p class="color-chip__name">Accent 08</p>
          <p class="color-chip__value">#859900</p>
        </div>
      </div>  
    </div>    
  </div>
</div>
<div class="row">
  <div class="col-md-12">
    <h2>Gradients</h2>
  </div>
</div>
<div class="row">
  <div class="col-md-1">
    <div class="gradient-chip gradient-chip-large gradient-chip-large--accent-01">
      <div class="gradient-chip-large__gradient -threequarter-step--lighten">
        <div class="gradient-chip-large__gradient__label">
          <p class="gradient-chip-large__code">-75</p>
          <p class="gradient-chip-large__name"></p>
        </div>        
      </div>
      <div class="gradient-chip-large__gradient -half-step--lighten">
        <div class="gradient-chip-large__gradient__label">
          <p class="gradient-chip-large__code">-50</p>
          <p class="gradient-chip-large__name"></p>
        </div>        
      </div>      
      <div class="gradient-chip-large__gradient -quarter-step--lighten">
        <div class="gradient-chip-large__gradient__label">
          <p class="gradient-chip-large__code">-25</p>
          <p class="gradient-chip-large__name"></p>
        </div>        
      </div>
      <div class="gradient-chip-large__gradient -step--lighten">
        <div class="gradient-chip-large__gradient__label">
          <p class="gradient-chip-large__code">-00</p>
          <p class="gradient-chip-large__name"></p>
        </div>
      </div>
      <div class="gradient-chip-large__gradient -quarter-step--darken">
        <div class="gradient-chip-large__gradient__label">
          <p class="gradient-chip-large__code">+25</p>
          <p class="gradient-chip-large__name"></p>
        </div>        
      </div>     
      <div class="gradient-chip-large__gradient -half-step--darken">
        <div class="gradient-chip-large__gradient__label">
          <p class="gradient-chip-large__code">+50</p>
          <p class="gradient-chip-large__name"></p>
        </div>        
      </div>
      <div class="gradient-chip-large__gradient -threequarter-step--darken">
        <div class="gradient-chip-large__gradient__label">
          <p class="gradient-chip-large__code">+75</p>
          <p class="gradient-chip-large__name"></p>
        </div>        
      </div>            
    </div>
  </div>
  <div class="col-md-1">
    <div class="gradient-chip gradient-chip-large gradient-chip-large--accent-02">
      <div class="gradient-chip-large__gradient -threequarter-step--lighten">
        <div class="gradient-chip-large__gradient__label">
          <p class="gradient-chip-large__code">-75</p>
          <p class="gradient-chip-large__name"></p>
        </div>        
      </div>
      <div class="gradient-chip-large__gradient -half-step--lighten">
        <div class="gradient-chip-large__gradient__label">
          <p class="gradient-chip-large__code">-50</p>
          <p class="gradient-chip-large__name"></p>
        </div>        
      </div>      
      <div class="gradient-chip-large__gradient -quarter-step--lighten">
        <div class="gradient-chip-large__gradient__label">
          <p class="gradient-chip-large__code">-25</p>
          <p class="gradient-chip-large__name"></p>
        </div>        
      </div>
      <div class="gradient-chip-large__gradient -step--lighten">
        <div class="gradient-chip-large__gradient__label">
          <p class="gradient-chip-large__code">-00</p>
          <p class="gradient-chip-large__name"></p>
        </div>
      </div>
      <div class="gradient-chip-large__gradient -quarter-step--darken">
        <div class="gradient-chip-large__gradient__label">
          <p class="gradient-chip-large__code">+25</p>
          <p class="gradient-chip-large__name"></p>
        </div>        
      </div>     
      <div class="gradient-chip-large__gradient -half-step--darken">
        <div class="gradient-chip-large__gradient__label">
          <p class="gradient-chip-large__code">+50</p>
          <p class="gradient-chip-large__name"></p>
        </div>        
      </div>
      <div class="gradient-chip-large__gradient -threequarter-step--darken">
        <div class="gradient-chip-large__gradient__label">
          <p class="gradient-chip-large__code">+75</p>
          <p class="gradient-chip-large__name"></p>
        </div>        
      </div>            
    </div>
  </div>
  <div class="col-md-1">
    <div class="gradient-chip gradient-chip-large gradient-chip-large--accent-03">
      <div class="gradient-chip-large__gradient -threequarter-step--lighten">
        <div class="gradient-chip-large__gradient__label">
          <p class="gradient-chip-large__code">-75</p>
          <p class="gradient-chip-large__name"></p>
        </div>        
      </div>
      <div class="gradient-chip-large__gradient -half-step--lighten">
        <div class="gradient-chip-large__gradient__label">
          <p class="gradient-chip-large__code">-50</p>
          <p class="gradient-chip-large__name"></p>
        </div>        
      </div>      
      <div class="gradient-chip-large__gradient -quarter-step--lighten">
        <div class="gradient-chip-large__gradient__label">
          <p class="gradient-chip-large__code">-25</p>
          <p class="gradient-chip-large__name"></p>
        </div>        
      </div>
      <div class="gradient-chip-large__gradient -step--lighten">
        <div class="gradient-chip-large__gradient__label">
          <p class="gradient-chip-large__code">-00</p>
          <p class="gradient-chip-large__name"></p>
        </div>
      </div>
      <div class="gradient-chip-large__gradient -quarter-step--darken">
        <div class="gradient-chip-large__gradient__label">
          <p class="gradient-chip-large__code">+25</p>
          <p class="gradient-chip-large__name"></p>
        </div>        
      </div>     
      <div class="gradient-chip-large__gradient -half-step--darken">
        <div class="gradient-chip-large__gradient__label">
          <p class="gradient-chip-large__code">+50</p>
          <p class="gradient-chip-large__name"></p>
        </div>        
      </div>
      <div class="gradient-chip-large__gradient -threequarter-step--darken">
        <div class="gradient-chip-large__gradient__label">
          <p class="gradient-chip-large__code">+75</p>
          <p class="gradient-chip-large__name"></p>
        </div>        
      </div>            
    </div>
  </div>
  <div class="col-md-1">
    <div class="gradient-chip gradient-chip-large gradient-chip-large--accent-04">
      <div class="gradient-chip-large__gradient -threequarter-step--lighten">
        <div class="gradient-chip-large__gradient__label">
          <p class="gradient-chip-large__code">-75</p>
          <p class="gradient-chip-large__name"></p>
        </div>        
      </div>
      <div class="gradient-chip-large__gradient -half-step--lighten">
        <div class="gradient-chip-large__gradient__label">
          <p class="gradient-chip-large__code">-50</p>
          <p class="gradient-chip-large__name"></p>
        </div>        
      </div>      
      <div class="gradient-chip-large__gradient -quarter-step--lighten">
        <div class="gradient-chip-large__gradient__label">
          <p class="gradient-chip-large__code">-25</p>
          <p class="gradient-chip-large__name"></p>
        </div>        
      </div>
      <div class="gradient-chip-large__gradient -step--lighten">
        <div class="gradient-chip-large__gradient__label">
          <p class="gradient-chip-large__code">-00</p>
          <p class="gradient-chip-large__name"></p>
        </div>
      </div>
      <div class="gradient-chip-large__gradient -quarter-step--darken">
        <div class="gradient-chip-large__gradient__label">
          <p class="gradient-chip-large__code">+25</p>
          <p class="gradient-chip-large__name"></p>
        </div>        
      </div>     
      <div class="gradient-chip-large__gradient -half-step--darken">
        <div class="gradient-chip-large__gradient__label">
          <p class="gradient-chip-large__code">+50</p>
          <p class="gradient-chip-large__name"></p>
        </div>        
      </div>
      <div class="gradient-chip-large__gradient -threequarter-step--darken">
        <div class="gradient-chip-large__gradient__label">
          <p class="gradient-chip-large__code">+75</p>
          <p class="gradient-chip-large__name"></p>
        </div>        
      </div>            
    </div>
  </div>
  <div class="col-md-1">
    <div class="gradient-chip gradient-chip-large gradient-chip-large--accent-05">
      <div class="gradient-chip-large__gradient -threequarter-step--lighten">
        <div class="gradient-chip-large__gradient__label">
          <p class="gradient-chip-large__code">-75</p>
          <p class="gradient-chip-large__name"></p>
        </div>        
      </div>
      <div class="gradient-chip-large__gradient -half-step--lighten">
        <div class="gradient-chip-large__gradient__label">
          <p class="gradient-chip-large__code">-50</p>
          <p class="gradient-chip-large__name"></p>
        </div>        
      </div>      
      <div class="gradient-chip-large__gradient -quarter-step--lighten">
        <div class="gradient-chip-large__gradient__label">
          <p class="gradient-chip-large__code">-25</p>
          <p class="gradient-chip-large__name"></p>
        </div>        
      </div>
      <div class="gradient-chip-large__gradient -step--lighten">
        <div class="gradient-chip-large__gradient__label">
          <p class="gradient-chip-large__code">-00</p>
          <p class="gradient-chip-large__name"></p>
        </div>
      </div>
      <div class="gradient-chip-large__gradient -quarter-step--darken">
        <div class="gradient-chip-large__gradient__label">
          <p class="gradient-chip-large__code">+25</p>
          <p class="gradient-chip-large__name"></p>
        </div>        
      </div>     
      <div class="gradient-chip-large__gradient -half-step--darken">
        <div class="gradient-chip-large__gradient__label">
          <p class="gradient-chip-large__code">+50</p>
          <p class="gradient-chip-large__name"></p>
        </div>        
      </div>
      <div class="gradient-chip-large__gradient -threequarter-step--darken">
        <div class="gradient-chip-large__gradient__label">
          <p class="gradient-chip-large__code">+75</p>
          <p class="gradient-chip-large__name"></p>
        </div>        
      </div>            
    </div>
  </div>
  <div class="col-md-1">
    <div class="gradient-chip gradient-chip-large gradient-chip-large--accent-06">
      <div class="gradient-chip-large__gradient -threequarter-step--lighten">
        <div class="gradient-chip-large__gradient__label">
          <p class="gradient-chip-large__code">-75</p>
          <p class="gradient-chip-large__name"></p>
        </div>        
      </div>
      <div class="gradient-chip-large__gradient -half-step--lighten">
        <div class="gradient-chip-large__gradient__label">
          <p class="gradient-chip-large__code">-50</p>
          <p class="gradient-chip-large__name"></p>
        </div>        
      </div>      
      <div class="gradient-chip-large__gradient -quarter-step--lighten">
        <div class="gradient-chip-large__gradient__label">
          <p class="gradient-chip-large__code">-25</p>
          <p class="gradient-chip-large__name"></p>
        </div>        
      </div>
      <div class="gradient-chip-large__gradient -step--lighten">
        <div class="gradient-chip-large__gradient__label">
          <p class="gradient-chip-large__code">-00</p>
          <p class="gradient-chip-large__name"></p>
        </div>
      </div>
      <div class="gradient-chip-large__gradient -quarter-step--darken">
        <div class="gradient-chip-large__gradient__label">
          <p class="gradient-chip-large__code">+25</p>
          <p class="gradient-chip-large__name"></p>
        </div>        
      </div>     
      <div class="gradient-chip-large__gradient -half-step--darken">
        <div class="gradient-chip-large__gradient__label">
          <p class="gradient-chip-large__code">+50</p>
          <p class="gradient-chip-large__name"></p>
        </div>        
      </div>
      <div class="gradient-chip-large__gradient -threequarter-step--darken">
        <div class="gradient-chip-large__gradient__label">
          <p class="gradient-chip-large__code">+75</p>
          <p class="gradient-chip-large__name"></p>
        </div>        
      </div>            
    </div>
  </div>
  <div class="col-md-1">
    <div class="gradient-chip gradient-chip-large gradient-chip-large--accent-07">
      <div class="gradient-chip-large__gradient -threequarter-step--lighten">
        <div class="gradient-chip-large__gradient__label">
          <p class="gradient-chip-large__code">-75</p>
          <p class="gradient-chip-large__name"></p>
        </div>        
      </div>
      <div class="gradient-chip-large__gradient -half-step--lighten">
        <div class="gradient-chip-large__gradient__label">
          <p class="gradient-chip-large__code">-50</p>
          <p class="gradient-chip-large__name"></p>
        </div>        
      </div>      
      <div class="gradient-chip-large__gradient -quarter-step--lighten">
        <div class="gradient-chip-large__gradient__label">
          <p class="gradient-chip-large__code">-25</p>
          <p class="gradient-chip-large__name"></p>
        </div>        
      </div>
      <div class="gradient-chip-large__gradient -step--lighten">
        <div class="gradient-chip-large__gradient__label">
          <p class="gradient-chip-large__code">-00</p>
          <p class="gradient-chip-large__name"></p>
        </div>
      </div>
      <div class="gradient-chip-large__gradient -quarter-step--darken">
        <div class="gradient-chip-large__gradient__label">
          <p class="gradient-chip-large__code">+25</p>
          <p class="gradient-chip-large__name"></p>
        </div>        
      </div>     
      <div class="gradient-chip-large__gradient -half-step--darken">
        <div class="gradient-chip-large__gradient__label">
          <p class="gradient-chip-large__code">+50</p>
          <p class="gradient-chip-large__name"></p>
        </div>        
      </div>
      <div class="gradient-chip-large__gradient -threequarter-step--darken">
        <div class="gradient-chip-large__gradient__label">
          <p class="gradient-chip-large__code">+75</p>
          <p class="gradient-chip-large__name"></p>
        </div>        
      </div>            
    </div>
  </div>
  <div class="col-md-1">
    <div class="gradient-chip gradient-chip-large gradient-chip-large--accent-08">
      <div class="gradient-chip-large__gradient -threequarter-step--lighten">
        <div class="gradient-chip-large__gradient__label">
          <p class="gradient-chip-large__code">-75</p>
          <p class="gradient-chip-large__name"></p>
        </div>        
      </div>
      <div class="gradient-chip-large__gradient -half-step--lighten">
        <div class="gradient-chip-large__gradient__label">
          <p class="gradient-chip-large__code">-50</p>
          <p class="gradient-chip-large__name"></p>
        </div>        
      </div>      
      <div class="gradient-chip-large__gradient -quarter-step--lighten">
        <div class="gradient-chip-large__gradient__label">
          <p class="gradient-chip-large__code">-25</p>
          <p class="gradient-chip-large__name"></p>
        </div>        
      </div>
      <div class="gradient-chip-large__gradient -step--lighten">
        <div class="gradient-chip-large__gradient__label">
          <p class="gradient-chip-large__code">-00</p>
          <p class="gradient-chip-large__name"></p>
        </div>
      </div>
      <div class="gradient-chip-large__gradient -quarter-step--darken">
        <div class="gradient-chip-large__gradient__label">
          <p class="gradient-chip-large__code">+25</p>
          <p class="gradient-chip-large__name"></p>
        </div>        
      </div>     
      <div class="gradient-chip-large__gradient -half-step--darken">
        <div class="gradient-chip-large__gradient__label">
          <p class="gradient-chip-large__code">+50</p>
          <p class="gradient-chip-large__name"></p>
        </div>        
      </div>
      <div class="gradient-chip-large__gradient -threequarter-step--darken">
        <div class="gradient-chip-large__gradient__label">
          <p class="gradient-chip-large__code">+75</p>
          <p class="gradient-chip-large__name"></p>
        </div>        
      </div>            
    </div>
  </div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/jesgs/color-scheme-vpowzm */
body {
  background-color: #00171d;
  padding: 15px;
  font-family: "Roboto", sans-serif;
  color: #657b83;
}

.row {
  margin: 0;
  padding-bottom: 30px;
}

.color-chip {
  color: #161c1e;
  position: relative;
  border-radius: 2.5px;
  overflow: hidden;
  width: 20%;
  background-color: #43c9eb;
  display: inline-block;
  transition-timing-function: ease-out;
}
.color-chip + .color-chip {
  margin-left: 30px;
}
.color-chip:hover {
  color: #7d959d;
}
.color-chip__meta {
  padding: 0 15px;
  text-align: left;
  font-size: 12px;
  line-height: 1.15;
  position: absolute;
  top: 12px;
}
.color-chip__name {
  font-weight: 700;
}
.color-chip__color {
  width: 100%;
  height: 150px;
}
.color-chip__color--base-03 {
  background-color: #657b83;
}
.color-chip__color--base-02 {
  background-color: #586e75;
}
.color-chip__color--base-01 {
  background-color: #073642;
}
.color-chip__color--base-00 {
  background-color: #002b36;
}
.color-chip__color--accent-01 {
  background-color: #b58900;
}
.color-chip__color--accent-02 {
  background-color: #cb4b16;
}
.color-chip__color--accent-03 {
  background-color: #dc322f;
}
.color-chip__color--accent-04 {
  background-color: #d33682;
}
.color-chip__color--accent-05 {
  background-color: #6c71c4;
}
.color-chip__color--accent-06 {
  background-color: #268bd2;
}
.color-chip__color--accent-07 {
  background-color: #2aa198;
}
.color-chip__color--accent-08 {
  background-color: #859900;
}

.gradient-chip {
  overflow: hidden;
  position: relative;
}
.gradient-chip + .gradient-chip {
  margin-top: 20px;
}
.gradient-chip-large {
  width: 100%;
  border-radius: 50px;
  background-color: white;
}
.gradient-chip-large__code {
  font-weight: 700;
  text-transform: capitalize;
}
.gradient-chip-large__gradient {
  height: 150px;
  position: relative;
}
.gradient-chip-large__gradient + .gradient-chip-large__gradient {
  margin-top: 15px;
}
.gradient-chip-large__gradient__label {
  color: black;
  line-height: 1;
  position: absolute;
  left: 10px;
  bottom: 10px;
}
.gradient-chip-large--accent-01 .-step--lighten {
  background-color: #b58900;
}
.gradient-chip-large--accent-01 .-quarter-step--lighten {
  background-color: #ffce36;
}
.gradient-chip-large--accent-01 .-half-step--lighten {
  background-color: #ffedb5;
}
.gradient-chip-large--accent-01 .-threequarter-step--lighten {
  display: none;
}
.gradient-chip-large--accent-01 .-quarter-step--darken {
  background-color: #362800;
}
.gradient-chip-large--accent-01 .-half-step--darken {
  display: none;
}
.gradient-chip-large--accent-01 .-threequarter-step--darken {
  display: none;
}
.gradient-chip-large--accent-02 .-step--lighten {
  background-color: #cb4b16;
}
.gradient-chip-large--accent-02 .-quarter-step--lighten {
  background-color: #f09671;
}
.gradient-chip-large--accent-02 .-half-step--lighten {
  background-color: #fcebe4;
}
.gradient-chip-large--accent-02 .-threequarter-step--lighten {
  display: none;
}
.gradient-chip-large--accent-02 .-quarter-step--darken {
  background-color: #58210a;
}
.gradient-chip-large--accent-02 .-half-step--darken {
  display: none;
}
.gradient-chip-large--accent-02 .-threequarter-step--darken {
  display: none;
}
.gradient-chip-large--accent-03 .-step--lighten {
  background-color: #dc322f;
}
.gradient-chip-large--accent-03 .-quarter-step--lighten {
  background-color: #ee9e9c;
}
.gradient-chip-large--accent-03 .-half-step--lighten {
  background-color: white;
}
.gradient-chip-large--accent-03 .-threequarter-step--lighten {
  display: none;
}
.gradient-chip-large--accent-03 .-quarter-step--darken {
  background-color: #771614;
}
.gradient-chip-large--accent-03 .-half-step--darken {
  background-color: #0a0202;
}
.gradient-chip-large--accent-03 .-threequarter-step--darken {
  display: none;
}
.gradient-chip-large--accent-04 .-step--lighten {
  background-color: #d33682;
}
.gradient-chip-large--accent-04 .-quarter-step--lighten {
  background-color: #ea9fc3;
}
.gradient-chip-large--accent-04 .-half-step--lighten {
  background-color: white;
}
.gradient-chip-large--accent-04 .-threequarter-step--lighten {
  display: none;
}
.gradient-chip-large--accent-04 .-quarter-step--darken {
  background-color: #711943;
}
.gradient-chip-large--accent-04 .-half-step--darken {
  background-color: #080205;
}
.gradient-chip-large--accent-04 .-threequarter-step--darken {
  display: none;
}
.gradient-chip-large--accent-05 .-step--lighten {
  background-color: #6c71c4;
}
.gradient-chip-large--accent-05 .-quarter-step--lighten {
  background-color: #c7c9e9;
}
.gradient-chip-large--accent-05 .-half-step--lighten {
  background-color: white;
}
.gradient-chip-large--accent-05 .-threequarter-step--lighten {
  display: none;
}
.gradient-chip-large--accent-05 .-quarter-step--darken {
  background-color: #33377e;
}
.gradient-chip-large--accent-05 .-half-step--darken {
  background-color: #0e0f23;
}
.gradient-chip-large--accent-05 .-threequarter-step--darken {
  display: none;
}
.gradient-chip-large--accent-06 .-step--lighten {
  background-color: #268bd2;
}
.gradient-chip-large--accent-06 .-quarter-step--lighten {
  background-color: #8dc4ea;
}
.gradient-chip-large--accent-06 .-half-step--lighten {
  background-color: #f9fcfe;
}
.gradient-chip-large--accent-06 .-threequarter-step--lighten {
  display: none;
}
.gradient-chip-large--accent-06 .-quarter-step--darken {
  background-color: #124466;
}
.gradient-chip-large--accent-06 .-half-step--darken {
  display: none;
}
.gradient-chip-large--accent-06 .-threequarter-step--darken {
  display: none;
}
.gradient-chip-large--accent-07 .-step--lighten {
  background-color: #2aa198;
}
.gradient-chip-large--accent-07 .-quarter-step--lighten {
  background-color: #71dad2;
}
.gradient-chip-large--accent-07 .-half-step--lighten {
  background-color: #d6f4f2;
}
.gradient-chip-large--accent-07 .-threequarter-step--lighten {
  display: none;
}
.gradient-chip-large--accent-07 .-quarter-step--darken {
  background-color: #103c39;
}
.gradient-chip-large--accent-07 .-half-step--darken {
  display: none;
}
.gradient-chip-large--accent-07 .-threequarter-step--darken {
  display: none;
}
.gradient-chip-large--accent-08 .-step--lighten {
  background-color: #859900;
}
.gradient-chip-large--accent-08 .-quarter-step--lighten {
  background-color: #e1ff1a;
}
.gradient-chip-large--accent-08 .-half-step--lighten {
  background-color: #f2ff99;
}
.gradient-chip-large--accent-08 .-threequarter-step--lighten {
  display: none;
}
.gradient-chip-large--accent-08 .-quarter-step--darken {
  background-color: #161a00;
}
.gradient-chip-large--accent-08 .-half-step--darken {
  display: none;
}
.gradient-chip-large--accent-08 .-threequarter-step--darken {
  display: none;
}

Comments