123

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <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 -->
            
          
!
            
              @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;
  }
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console