Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <header class="site-header">
  <h1>WordPress Colors</h1>
  <p>The official color palette repository for WordPress (core, .org, and related projects). More information available on the <a href="https://make.wordpress.org/design/handbook/">Design&nbsp;Handbook&nbsp;pages</a>.</p>
</header>


<div class="colors-wrapper wrapper">
  
  <section class="colors-blue color-group">
    <h2>Blues</h2>
    <div class="wp-blue color value">
      <div class="name">WordPress Blue</div>
      <div class="rgb value-code">rgb(0,115,170)</div>
      <div class="hex value-code">#0073aa</div>
    </div>
    <div class="medium-blue color value">
      <div class="name">Medium Blue</div>
      <div class="rgb value-code">rgb(0,160,210)</div>
      <div class="hex value-code">#00a0d2</div>
    </div>
    <!--
    <div class="light-blue color value">
      <div class="name">Light Blue</div>
      <div class="rgb value-code">rgb(0,185,235)</div>
      <div class="hex value-code">#00b9eb </div>
    </div>
    -->
  </section><!-- .blue.hue -->

  <section class="colors-gray color-group">
    <h2>Grays</h2>
    
    <section class="colors-darkgray color-group">
    
    <h3>Dark Grays</h3>
    
    <div class="dark-gray-900 color value">
      <div class="name">Dark Gray 900 <span>(Ultra Dark Gray)</span></div>
      <div class="rgb value-code">rgb(25,30,35)</div>
      <div class="hex value-code">#191e23</div>
    </div>
    <div class="dark-gray-800 color value">
      <div class="name">Dark Gray 800 <span>(Dark Gray)</span></div>
      <div class="rgb value-code">rgb(35,40,45)</div>
      <div class="hex value-code">#23282d</div>
    </div>
    <div class="dark-gray-700 color value">
      <div class="name">Dark Gray 700 <span>(Base Gray)</span></div>
      <div class="rgb value-code">rgb(50,55,60)</div>
      <div class="hex value-code">#32373c</div>
    </div>
    
    <div class="dark-gray-600 color value">
      <div class="name">Dark Gray 600</div>
      <div class="rgb value-code">rgb(64,70,77)</div>
      <div class="hex value-code">#40464d</div>
    </div>
    <div class="dark-gray-500 color value">
      <div class="name">Dark Gray 500</div>
      <div class="rgb value-code">rgb(85,93,102)</div>
      <div class="hex value-code">#555d66</div>
    </div>
    <div class="dark-gray-400 color value">
      <div class="name">Dark Gray 400</div>
      <div class="rgb value-code">rgb(96,106,115)</div>
      <div class="hex value-code">#606a73</div>
    </div>
    <div class="dark-gray-300 color value">
      <div class="name">Dark Gray 300</div>
      <div class="rgb value-code">rgb(108,119,129)</div>
      <div class="hex value-code">#6c7781</div>
    </div>
    <div class="dark-gray-200 color value">
      <div class="name">Dark Gray 200</div>
      <div class="rgb value-code">rgb(120,132,143)</div>
      <div class="hex value-code">#7e8993</div>
    </div>
    <div class="dark-gray-100 color value">
      <div class="name">Dark Gray 100</div>
      <div class="rgb value-code">rgb(143,144,155)</div>
      <div class="hex value-code">#8f98a1</div>
    </div>
    
  </section><!-- .dark-gray.hue -->
  
  <section class="colors-lightgray color-group">
    
    <h3>Light Grays</h3>
    
    <div class="light-gray-900 color value">
      <div class="name">Light Gray 900</div>
      <div class="rgb value-code">rgb()</div>
      <div class="hex value-code">#</div>
    </div>
    <div class="light-gray-800 color value">
      <div class="name">Light Gray 800</div>
      <div class="rgb value-code">rgb()</div>
      <div class="hex value-code">#</div>
    </div>
    <div class="light-gray-700 color value">
      <div class="name">Light Gray 700</div>
      <div class="rgb value-code">rgb()</div>
      <div class="hex value-code">#</div>
    </div>
    <div class="light-gray-600 color value">
      <div class="name">Light Gray 600</div>
      <div class="rgb value-code">rgb()</div>
      <div class="hex value-code">#</div>
    </div>
    <div class="light-gray-500 color value">
      <div class="name">Light Gray 500</div>
      <div class="rgb value-code">rgb()</div>
      <div class="hex value-code">#</div>
    </div>
    <div class="light-gray-400 color value">
      <div class="name">Light Gray 400</div>
      <div class="rgb value-code">rgb()</div>
      <div class="hex value-code">#</div>
    </div>
    <div class="light-gray-300 color value">
      <div class="name">Light Gray 300</div>
      <div class="rgb value-code">rgb()</div>
      <div class="hex value-code">#</div>
    </div>
    <div class="light-gray-200 color value">
      <div class="name">Light Gray 200</div>
      <div class="rgb value-code">rgb()</div>
      <div class="hex value-code">#</div>
    </div>
    <div class="light-gray-100 color value">
      <div class="name">Light Gray 100</div>
      <div class="rgb value-code">rgb()</div>
      <div class="hex value-code">#</div>
    </div>
    
  </section><!-- .lightgray.hue -->
    
  </section><!-- .gray.hue -->

  <section class="colors-accent color-group">
    <h2>Accent Hues</h2>
    
    <div class="accent-red color">
      <div class="value value-shade value-shade3">
        <div class="name">Shade 30%</div>
        <div class="hex value-code">#9a2323</div>
      </div>
      <div class="value value-shade value-shade2">
        <div class="name">Shade 20%</div>
        <div class="hex value-code">#b02828</div>
      </div>
      <div class="value value-shade value-shade1">
        <div class="name">Shade 10%</div>
        <div class="hex value-code">#c62d2d</div>
      </div>
      <div class="value value-base">
        <div class="name">Acccent Red</div>
        <div class="rgb value-code">rgb(220,50,50)</div>
        <div class="hex value-code">#dc3232</div>
      </div>
      <div class="value value-tint value-tint1">
        <div class="name">Tint 20%</div>
        <div class="hex value-code">#e35b5b</div>
      </div>
      <div class="value value-tint value-tint2">
        <div class="name">Tint 40%</div>
        <div class="hex value-code">#ea8484</div>
      </div>
      <div class="value value-tint value-tint3">
        <div class="name">Tint 60%</div>
        <div class="hex value-code">#f1adad</div>
      </div>
      <div class="value value-tint value-tint4">
        <div class="name">Tint 90%</div>
        <div class="hex value-code">#fbeaea</div>
      </div>
    </div>
    <div class="accent-orange color">
      <div class="value value-shade value-shade3">
        <div class="name">(Fire) Shade 10%</div>
        <div class="hex value-code">#bf461d</div>
      </div>
      <div class="value value-shade value-shade2">
        <div class="name">(Fire) Shade 5%</div>
        <div class="hex value-code">#ca4a1f</div>
      </div>
      <div class="value value-shade value-shade1">
        <div class="name">Fire Orange</div>
        <div class="hex value-code">#d54e21</div>
      </div>
      <div class="value value-base">
        <div class="name">Acccent Orange</div>
        <div class="rgb value-code">rgb(245,110,40)</div>
        <div class="hex value-code">#f56e28</div>
      </div>
      <div class="value value-tint value-tint1">
        <div class="name">Tint 20%</div>
        <div class="hex value-code">#f78b53</div>
      </div>
      <div class="value value-tint value-tint2">
        <div class="name">Tint 40%</div>
        <div class="hex value-code">#f9a87e</div>
      </div>
      <div class="value value-tint value-tint3">
        <div class="name">Tint 60%</div>
        <div class="hex value-code">#fbc5a9</div>
      </div>
      <div class="value value-tint value-tint4">
        <div class="name">Tint 90%</div>
        <div class="hex value-code">#fef0e9</div>
      </div>
    </div>
    <div class="accent-yellow color">
      <div class="value value-shade value-shade2">
        <div class="name">Tone (Fire 40%)</div>
        <div class="hex value-code">#ee8e0d</div>
      </div>
      <div class="value value-shade value-shade1">
        <div class="name">Tone (Fire 20%)</div>
        <div class="hex value-code">#f6a306</div>
      </div>
      <div class="value value-base">
        <div class="name">Acccent Yellow</div>
        <div class="rgb value-code">rgb(255,185,0)</div>
        <div class="hex value-code">#ffb900</div>
      </div>
      <div class="value value-tint value-tint1">
        <div class="name">Tint 20%</div>
        <div class="hex value-code">#ffc733</div>
      </div>
      <div class="value value-tint value-tint2">
        <div class="name">Tint 40%</div>
        <div class="hex value-code">#ffd566</div>
      </div>
      <div class="value value-tint value-tint3">
        <div class="name">Tint 60%</div>
        <div class="hex value-code">#ffe399</div>
      </div>
      <div class="value value-tint value-tint4">
        <div class="name">Tint 90%</div>
        <div class="hex value-code">#fff8e5</div>
      </div>
    </div>
    
    <div class="accent-green color">
      <div class="value value-shade value-shade2">
        <div class="name">Tone (WP Blue) 5% / Shade 25%</div>
        <div class="hex value-code">#31843f</div>
      </div>
      <div class="value value-shade value-shade1">
        <div class="name">Tone (WP Blue) 5% / Shade 15%</div>
        <div class="hex value-code">#389547</div>
      </div>
      <div class="value value-base">
        <div class="name">Acccent Green</div>
        <div class="rgb value-code">rgb(70, 180, 80)</div>
        <div class="hex value-code">#46b450</div>
      </div>
      <div class="value value-tint value-tint1">
        <div class="name">Tint 20%</div>
        <div class="hex value-code">#6bc373</div>
      </div>
      <div class="value value-tint value-tint2">
        <div class="name">Tint 40%</div>
        <div class="hex value-code">#90d296</div>
      </div>
      <div class="value value-tint value-tint3">
        <div class="name">Tint 60%</div>
        <div class="hex value-code">#b5e1b9</div>
      </div>
      <div class="value value-tint value-tint4">
        <div class="name">Tint 70%</div>
        <div class="hex value-code">#c7e8ca</div>
      </div>
      <div class="value value-tint value-tint5">
        <div class="name">Tint 90%</div>
        <div class="hex value-code">#ecf7ed</div>
      </div>
    </div>
    
    <div class="accent-blue color">
      <div class="value value-shade value-shade4">
        <div class="name">Shade (WP Blue) 10%</div>
        <div class="hex value-code">#006799</div>
      </div>
      <div class="value value-shade value-shade3">
        <div class="name">Tone (80% WordPress Blue)</div>
        <div class="hex value-code">#007cb2</div>
      </div>
      <div class="value value-shade value-shade2">
        <div class="name">Tone (60% WordPress Blue)</div>
        <div class="hex value-code">#0085ba</div>
      </div>
      <div class="value value-shade value-shade1">
        <div class="name">Tone (40% WordPress Blue)</div>
        <div class="hex value-code">#008ec2</div>
      </div>
      <div class="value value-base">
        <div class="name">Medium Blue</div>
        <div class="rgb value-code">rgb(0,160,210)</div>
        <div class="hex value-code">#00a0d2</div>
      </div>
      <div class="value value-tint value-tint1">
        <div class="name">Tint 20%</div>
        <div class="hex value-code">#33b3db</div>
      </div>
      <div class="value value-tint value-tint2">
        <div class="name">Tint 40%</div>
        <div class="hex value-code">#66c6e4</div>
      </div>
      <div class="value value-tint value-tint3">
        <div class="name">Tint 60%</div>
        <div class="hex value-code">#99d9ed</div>
      </div>
      <div class="value value-tint value-tint4">
        <div class="name">Tint 75%</div>
        <div class="hex value-code">#bfe7f3</div>
      </div>
      <div class="value value-tint value-tint5">
        <div class="name">Tint 90%</div>
        <div class="hex value-code">#e5f5fa</div>
      </div>
    </div>
    
    <div class="accent-purple color value-group">
      <div class="value value-shade value-shade2">
        <div class="name">Shade 40%</div>
        <div class="hex value-code">#4e426c</div>
      </div>
      <div class="value value-shade value-shade1">
        <div class="name">Shade 20%</div>
        <div class="hex value-code">#685890</div>
      </div>
      <div class="value value-base">
        <div class="name">Acccent Purple</div>
        <div class="rgb value-code">rgb(130,110,180)</div>
        <div class="hex value-code">#826eb4</div>
      </div>
      <div class="value value-tint value-tint1">
        <div class="name">Tint 20%</div>
        <div class="hex value-code">#9b8bc3</div>
      </div>
      <div class="value value-tint value-tint2">
        <div class="name">Tint 40%</div>
        <div class="hex value-code">#b4a8d2</div>
      </div>
      <div class="value value-tint value-tint3">
        <div class="name">Tint 60%</div>
        <div class="hex value-code">#cdc5e1</div>
      </div>
      <div class="value value-tint value-tint4">
        <div class="name">Tint 90%</div>
        <div class="hex value-code">#f2f0f7</div>
      </div>
    </div>
  </section><!-- .accent.hue -->
  
</div><!-- .wrapper -->
              
            
!

CSS

              
                @import "bourbon";

//Colors
$color-wp-blue: #0073aa;
$color-medium-blue: #00a0d2;
$color-light-blue: #00b9eb;

$color-ultra-dark-gray: #191e23;
$color-dark-gray: #23282d;
$color-base-gray: #32373c;
$color-dark-medium-gray: lighten($color-base-gray,15%);
$color-dark-silver-gray: #82878c;
$color-silver-gray: #a0a5aa;
$color-light-silver-gray: #b4b9be;
$color-medium-gray: mix($color-base-gray,$color-dark-silver-gray,20%);

$color-gray-900: $color-ultra-dark-gray;
$color-gray-800: $color-dark-gray;
$color-gray-700: $color-base-gray;
$color-gray-600: lighten($color-base-gray,6%);
$color-gray-500: lighten($color-base-gray,15%);
$color-gray-400: lighten($color-base-gray,20%);
$color-gray-300: lighten($color-base-gray,25%);
$color-gray-200: lighten($color-base-gray,32%);
$color-gray-100: lighten($color-base-gray,38%);

$color--gray-light-900: lighten($color-base-gray,45%);
$color--gray-light-800: lighten($color-base-gray,52%);
$color--gray-light-700: lighten($color-base-gray,60%);
$color--gray-light-600: lighten($color-base-gray,64%);
$color--gray-light-500: lighten($color-base-gray,68%);
$color--gray-light-400: lighten($color-base-gray,70%);
$color--gray-light-300: lighten($color-base-gray,72%);
$color--gray-light-200: lighten($color-base-gray,74%);
$color--gray-light-100: lighten($color-base-gray,77%);

$color-accent-red: #dc3232;
$color-accent-fire-orange: #d54e21;
$color-accent-orange: #f56e28;
$color-accent-yellow: #ffb900;
$color-accent-green: #46b450; //old #64b450;
$color-accent-blue: $color-medium-blue;
$color-accent-purple: #826eb4;


//Tints and Tones and Shades - Oh My!

$color-accent-red-shade30: shade($color-accent-red,30%);
$color-accent-red-shade20: shade($color-accent-red,20%);
$color-accent-red-shade10: shade($color-accent-red,10%);
$color-accent-red-tint20: tint($color-accent-red,20%);
$color-accent-red-tint40: tint($color-accent-red,40%);
$color-accent-red-tint60: tint($color-accent-red,60%);
$color-accent-red-tint90: tint($color-accent-red,90%);

$color-accent-fire-orange-shade10: shade($color-accent-fire-orange,10%);
$color-accent-fire-orange-shade5: shade($color-accent-fire-orange,5%);
$color-accent-orange-tint20: tint($color-accent-orange,20%);
$color-accent-orange-tint40: tint($color-accent-orange,40%);
$color-accent-orange-tint60: tint($color-accent-orange,60%);
$color-accent-orange-tint90: tint($color-accent-orange,90%);

$color-accent-yellow-tonefire40: mix($color-accent-fire-orange,$color-accent-yellow,40%);
$color-accent-yellow-tonefire20: mix($color-accent-fire-orange,$color-accent-yellow,20%);
$color-accent-yellow-tint20: tint($color-accent-yellow,20%);
$color-accent-yellow-tint40: tint($color-accent-yellow,40%);
$color-accent-yellow-tint60: tint($color-accent-yellow,60%);
$color-accent-yellow-tint90: tint($color-accent-yellow,90%);

$color-accent-green-toneblue5shade25: shade(mix($color-wp-blue, $color-accent-green,5%),25%);
$color-accent-green-toneblue5shade15: shade(mix($color-wp-blue, $color-accent-green,5%),15%);
$color-accent-green-tint20: tint($color-accent-green,20%);
$color-accent-green-tint40: tint($color-accent-green,40%);
$color-accent-green-tint60: tint($color-accent-green,60%);
$color-accent-green-tint70: tint($color-accent-green,70%);
$color-accent-green-tint90: tint($color-accent-green,90%);

$color-accent-wp-blue-shade10: shade($color-wp-blue,10%);
$color-accent-blue-toneblue80: mix($color-wp-blue,$color-accent-blue,80%);
$color-accent-blue-toneblue60: mix($color-wp-blue,$color-accent-blue,60%);
$color-accent-blue-toneblue40: mix($color-wp-blue,$color-accent-blue,40%);
$color-accent-blue-tint20: tint($color-accent-blue,20%);
$color-accent-blue-tint40: tint($color-accent-blue,40%);
$color-accent-blue-tint60: tint($color-accent-blue,60%);
$color-accent-blue-tint75: tint($color-accent-blue,75%);
$color-accent-blue-tint90: tint($color-accent-blue,90%);

$color-accent-purple-shade40: shade($color-accent-purple,40%);
$color-accent-purple-shade20: shade($color-accent-purple,20%);
$color-accent-purple-tint20: tint($color-accent-purple,20%);
$color-accent-purple-tint40: tint($color-accent-purple,40%);
$color-accent-purple-tint60: tint($color-accent-purple,60%);
$color-accent-purple-tint90: tint($color-accent-purple,90%);


//Text Colors
$textcolor-dark: rgba($color-base-gray,.8);
$textcolor-dark-mid: rgba($color-base-gray,.5);
$textcolor-light: rgba(#fff,.8);
$textcolor-light-mid: rgba(#fff,.5);




*, *:before, *:after {
  box-sizing: border-box;
}

.wrapper {
  margin: 0 auto;
  padding: 4% 5%;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.colors-wrapper {
  display: block;
  font-size: 16px;
  line-height: 1.618;
  background: #fff;
  color: $textcolor-dark-mid;
  
  .color-group {
    overflow: hidden;
    margin-bottom: 0.618em;
    padding: 0.618em 0;
    h2 {
      margin: 0 0 0.618em;
      font-size: 23px;
      line-height: 1.618;
    }
  }
  
  .color {
    //float: left;
    //width: 32.288%;
    min-width: 8.625em;
    margin-bottom: 1em;
  }
  
  .value {
    padding: 1.1em 0.8em 5em;
    border-radius: 0.236em;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.056em;
    line-height: 1.258;
    color: $textcolor-dark;
    .name {
      font-size: 0.778em;
      margin-bottom: 0.382em;
    }
    .value-code {
      color: $textcolor-dark-mid;
      font-size: 0.618em;
      margin-bottom: 0.236em;
    }

    //Reduced padding for tints and shades
    &.value-tint,
    &.value-shade {
      padding-bottom: 1em;
      overflow: hidden;
      .name,
      .value-code {
        float: left;
        font-size: 0.618em;
        opacity: .3;
      }
      .value-code {
        text-align: right;
        float: right;
      }
    }
  } //end .value
  
  //Light Text
  .dark-blue,
  .wp-blue,
  .medium-blue,
  .ultra-dark-gray,
  .dark-gray,
  .base-gray,
  .dark-medium-gray,
  .medium-gray,
  .dark-silver-gray,
  .dark-gray-900,
  .dark-gray-800,
  .dark-gray-700,
  .dark-gray-600,
  .dark-gray-500,
  .dark-gray-400,
  .dark-gray-300,
  .dark-gray-200,
  .dark-gray-100,
  .accent-red .value-base,
  .accent-red .value-shade,
  .accent-orange .value-base,
  .accent-orange .value-shade,
  .accent-green .value-base,
  .accent-green .value-shade,
  .accent-blue .value-base,
  .accent-blue .value-shade,
  .accent-purple .value-base,
  .accent-purple .value-shade {
    .name {
      color: $textcolor-light;
    }
    .value-code {
      color: $textcolor-light-mid;
    }
  }// end light text
  
  .color {
    //Blues
    &.wp-blue {
      background: $color-wp-blue;
    }
    &.medium-blue {
      background: $color-medium-blue;
    }
    &.light-blue {
      background: $color-light-blue;
    }
    //Grays
    &.dark-gray-900 {
      background: $color-gray-900;
    }
    &.dark-gray-800 {
      background: $color-gray-800;
    }
    &.dark-gray-700 {
      background: $color-gray-700;
    }
    &.dark-gray-600 {
      background: $color-gray-600;
    }
    &.dark-gray-500 {
      background: $color-gray-500;
    }
    &.dark-gray-400 {
      background: $color-gray-400;
    }
    &.dark-gray-300 {
      background: $color-gray-300;
    }
    &.dark-gray-200 {
      background: $color-gray-200;
    }
    &.dark-gray-100 {
      background: $color-gray-100;
    }
    
    &.light-gray-900 {
      background: $color--gray-light-900;
    }
    &.light-gray-800 {
      background: $color--gray-light-800;
    }
    &.light-gray-700 {
      background: $color--gray-light-700;
    }
    &.light-gray-600 {
      background: $color--gray-light-600;
    }
    &.light-gray-500 {
      background: $color--gray-light-500;
    }
    &.light-gray-400 {
      background: $color--gray-light-400;
    }
    &.light-gray-300 {
      background: $color--gray-light-300;
    }
    &.light-gray-200 {
      background: $color--gray-light-200;
    }
    &.light-gray-100 {
      background: $color--gray-light-100;
    }
    
    
    //Accent Hues
    
    //RED
    &.accent-red .value {
      &.value-base {
        background: $color-accent-red;
      }
      &.value-tint1 {
        background: $color-accent-red-tint20;
      }
      &.value-tint2 {
        background: $color-accent-red-tint40;
      }
      &.value-tint3 {
        background: $color-accent-red-tint60;
      }
      &.value-tint4 {
        background: $color-accent-red-tint90;
      }
      &.value-shade1 {
        background: $color-accent-red-shade10;
      }
      &.value-shade2 {
        background: $color-accent-red-shade20;
      }
      &.value-shade3 {
        background: $color-accent-red-shade30;
      }
    }
    
    //ORANGE
    &.accent-orange .value  {
      &.value-base {
        background: $color-accent-orange;
      }
      &.value-tint1 {
        background: $color-accent-orange-tint20;
      }
      &.value-tint2 {
        background: $color-accent-orange-tint40;
      }
      &.value-tint3 {
        background: $color-accent-orange-tint60;
      }
      &.value-tint4 {
        background: $color-accent-orange-tint90;
      }
      &.value-shade1 {
        background: $color-accent-fire-orange;
      }
      &.value-shade2 {
        background: $color-accent-fire-orange-shade5;
      }
      &.value-shade3 {
        background: $color-accent-fire-orange-shade10;
      }
    }
    
    //YELLOW
    &.accent-yellow .value  {
      &.value-base {
        background: $color-accent-yellow;
      }
      &.value-tint1 {
        background: $color-accent-yellow-tint20;
      }
      &.value-tint2 {
        background: $color-accent-yellow-tint40;
      }
      &.value-tint3 {
        background: $color-accent-yellow-tint60;
      }
      &.value-tint4 {
        background: $color-accent-yellow-tint90;
      }
      &.value-shade1 {
        background: $color-accent-yellow-tonefire20; 
      }
      &.value-shade2 {
        background: $color-accent-yellow-tonefire40;
      }
    }
    
    //GREEN
    &.accent-green .value  {
      &.value-base {
        background: $color-accent-green;
      }
      &.value-tint1 {
        background: $color-accent-green-tint20;
      }
      &.value-tint2 {
        background: $color-accent-green-tint40;
      }
      &.value-tint3 {
        background: $color-accent-green-tint60;
      }
      &.value-tint4 {
        background: $color-accent-green-tint70;
      }
      &.value-tint5 {
        background: $color-accent-green-tint90;
      }
      &.value-shade1 {
        background: $color-accent-green-toneblue5shade15;
      }
      &.value-shade2 {
        background: $color-accent-green-toneblue5shade25;
      }
    }
    
    //BLUE
    &.accent-blue .value  {
      &.value-base {
        background: $color-accent-blue;
      }
      &.value-tint1 {
        background: $color-accent-blue-tint20;
      }
      &.value-tint2 {
        background: $color-accent-blue-tint40;
      }
      &.value-tint3 {
        background: $color-accent-blue-tint60;
      }
      &.value-tint4 {
        background: $color-accent-blue-tint75;
      }
      &.value-tint5 {
        background: $color-accent-blue-tint90;
      }
      &.value-shade1 {
        background: $color-accent-blue-toneblue40;
      }
      &.value-shade2 {
        background: $color-accent-blue-toneblue60;
      }
      &.value-shade3 {
        background: $color-accent-blue-toneblue80;
      }
      &.value-shade4 {
        background: $color-accent-wp-blue-shade10;
      }
    }
    
    // PURPLE
    &.accent-purple .value {
      &.value-base {
        background: $color-accent-purple;
      }
      &.value-tint1 {
        background: $color-accent-purple-tint20;
      }
      &.value-tint2 {
        background: $color-accent-purple-tint40;
      }
      &.value-tint3 {
        background: $color-accent-purple-tint60;
      }
      &.value-tint4 {
        background: $color-accent-purple-tint90;
      }
      &.value-shade1 {
        background: $color-accent-purple-shade20;
      }
      &.value-shade2 {
        background: $color-accent-purple-shade40;
      }
    }
  } //end .color
  
} //end color-wrapper


///////////////////////////////
// Codepen Project Global Stuff

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
  // font-family: "Source Sans Pro", sans-serif;
  font-size: 16px;
  color: lighten($color-base-gray, 20%);
}

a {
  color: lighten($color-base-gray, 20%);
  &:hover {
      color: $color-base-gray;
  }
}

p {
    max-width: 32em;
}

.site-header {
  padding: 4% 5%;
  margin-bottom: 2em;
  background: lighten($color-base-gray, 73%);
  border-bottom: 4px solid lighten($color-base-gray, 70%);
  h1, p {
    //text-align: center;
    margin: 0;
  }
  h1 {
    color: $color-wp-blue;
    font-size: 2.5em;
    margin-bottom: 0.5em;
    font-weight: 600;
  }
}

.site-footer {
  width: 100%;
  text-align: center;
  p {
    width: 100%;
    max-width: 100%;
    font-size: 0.8em;
  }
}
              
            
!

JS

              
                
              
            
!
999px

Console