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>50 Shades of WordPress</h1>
  <p>This codepen serves as a playground to analyse and improve the use of colors (specifically the numerous shades of gray) in the WordPress Admin. There are currently 174 colors in the Admin. The right column is a proposal do merge multiple values together for consistency and brevity.</p>
</header>

<div class="wrapper">
  
  <table class='color-list'>    
    
    
    
    <tr>
      <td class="section-title" colspan="2">Black</td>
    </tr>
    <tr>
      <td class="section-count">Current: 2</td>
      <td class="section-count">Proposed: 1</td>
    </tr>
    
    <tr>
      <td class="hex-000">#000</td>
      <td class="hex-000" rowspan="2">#000</td>
    </tr>
    <tr>
      <td class="hex-black">black</td>
    </tr>

    

    <tr>
      <td class="section-title" colspan="2">Dark Grays</td>
    </tr>
    <tr>
      <td class="section-count">Current: 20</td>
      <td class="section-count">Proposed: 9</td>
    </tr>
    
    <tr>
      <td class="hex-191e23">#191e23</td>
      <td class="dark-gray-900">dark-gray-900 (#191e23)</td>
    </tr>
    
    <tr>
      <td class="hex-222">#222</td>
      <td class="dark-gray-800" rowspan="2">dark-gray-800 (#23282d)</td>
    </tr>
    <tr>
      <td class="hex-23282d">#23282d</td>
    </tr>
    <tr>
      <td class="hex-333">#333</td>
      <td class="dark-gray-700" rowspan="2">dark-gray-700 (#32373c)</td>
    </tr>
    <tr>
      <td class="hex-32373c">#32373c</td>
    </tr>    
    
    <tr>
      <td class="hex-404040">#404040</td>
      <td class="dark-gray-600" rowspan="2">dark-gray-600 (#40464d)</td>
    </tr>
    <tr>
      <td class="hex-444">#444</td>
    </tr>
    <tr>
      <td class="hex-555">#555</td>
      <td class="dark-gray-500" rowspan="3">dark-gray-500 (#555d66)</td>
    </tr>
    <tr>
      <td class="hex-555d66">#555d66</td>
    </tr>
    <tr>
      <td class="hex-5A5A5A">#5A5A5A</td>
    </tr>
    <tr>
      <td class="hex-656a6f">#656a6f</td>
      <td class="dark-gray-400" rowspan="2">dark-gray-400 (#606a73)</td>
    </tr>
    <tr>
      <td class="hex-666">#666</td>
    </tr>
    <tr>
      <td class="hex-727272">#727272</td>
      <td class="dark-gray-300" rowspan="4">dark-gray-300 (#6c7781)</td>
    </tr>
    <tr>
      <td class="hex-727773">#727773</td>
    </tr>
    <tr>
      <td class="hex-72777c">#72777c</td>
    </tr>
    <tr>
      <td class="hex-72777C">#72777C</td>
    </tr>
    <tr>
      <td class="hex-82878c">#82878c</td>
      <td class="dark-gray-200">dark-gray-200 (#7e8993)</td>
    </tr>
    <tr>
      <td class="hex-929793">#929793</td>
      <td class="dark-gray-100" rowspan="3">dark-gray-100 (#8f98a1)</td>
    </tr>
    <tr>
      <td class="hex-999">#999</td>
    </tr>
    <tr>
      <td class="hex-rgb153153153">rgb(153,153,153)</td>
    </tr>
    
    
    
    <tr>
      <td class="section-title" colspan="2">Light Grays</td>
    </tr>
    <tr>
      <td class="section-count">Current: 35</td>
      <td class="section-count">Proposed: 9</td>
    </tr>
    
    <!-- .light-gray-900 -->
    <tr>
      <td class="hex-a0a5aa">#a0a5aa</td>
      <td class="light-gray-900" rowspan="2">light-gray-900 (#)</td>
    </tr>
    <tr>
      <td class="hex-9ea7af">#9ea7af</td>
    </tr>
    <!-- .light-gray-900 -->
    <!-- .light-gray-800 -->
    <tr>
      <td class="hex-b4b9be">#b4b9be</td>
      <td class="light-gray-800" rowspan="2">light-gray-800 (#)</td>
    </tr>
    <tr>
      <td class="hex-c4c4c4">#c4c4c4</td>
    </tr>
    <!-- .light-gray-800 -->
    <!-- .light-gray-700 -->
    <tr>
      <td class="hex-ccc">#ccc</td>
      <td class="light-gray-700" rowspan="5">light-gray-700 (#)</td>
    </tr>
    <tr>
      <td class="hex-cccccc">#cccccc</td>
    </tr>
    <tr>
      <td class="hex-d5d2ca">#d5d2ca</td>
    </tr>
    <tr>
      <td class="hex-d5d5d5">#d5d5d5</td>
    </tr>
    <tr>
      <td class="hex-d8d8d8">#d8d8d8</td>
    </tr>
    <!-- .light-gray-700 -->
    <!-- .light-gray-600 -->
    <tr>
      <td class="hex-ddd">#ddd</td>
      <td class="light-gray-600" rowspan="2">light-gray-600 (#)</td>
    </tr>
    <tr>
      <td class="hex-DDD">#DDD</td>
    </tr>
    <tr>
      <td class="hex-e1e1e1">#e1e1e1</td>
      <td class="light-gray-500" rowspan="4">light-gray-500 (#)</td>
    </tr>
    <tr>
      <td class="hex-rgb227227227">rgb(227,227,227)</td>
    </tr>
    <tr>
      <td class="hex-e5e5e5">#e5e5e5</td>
    </tr>
    <tr>
      <td class="hex-rgb229229229">rgb(229,229,229)</td>
    </tr>
    <tr>
      <td class="hex-e8e8e8">#e8e8e8</td>
      <td class="light-gray-400" rowspan="2">light-gray-400 (#)</td>
    </tr>
    <tr>
      <td class="hex-eaeaea">#eaeaea</td>
    </tr>
    <tr>
      <td class="hex-ededed">#ededed</td>
      <td class="light-gray-300" rowspan="4">light-gray-300 (#)</td>
    </tr>
    <tr>
      <td class="hex-eeeeee">#eeeeee</td>
    </tr>
    <tr>
      <td class="hex-eee">#eee</td>
    </tr>
    <tr>
      <td class="hex-EEE">#EEE</td>
    </tr>
    <tr>
      <td class="hex-e4f2fd">#e4f2fd</td>
      <td class="light-gray-200" rowspan="6">light-gray-200 (#)</td>
    </tr>
    <tr>
      <td class="hex-e5f5fa">#e5f5fa</td>
    </tr>
    <tr>
      <td class="hex-E9F5F9">#E9F5F9</td>
    </tr>
    
    <tr>
      <td class="hex-f1f1f1">#f1f1f1</td>
    </tr>
    <tr>
      <td class="hex-f3f3f3">#f3f3f3</td>
    </tr>
    <tr>
      <td class="hex-f5f5f5">#f5f5f5</td>
      
    </tr>
    <tr>
      <td class="hex-f7f7f7">#f7f7f7</td>
      <td class="light-gray-100" rowspan="8">light-gray-100 (#)</td>
    </tr>
    </tr>
    <tr>
      <td class="hex-f9f9f9">#f9f9f9</td>
    </tr>
    <tr>
      <td class="hex-fafafa">#fafafa</td>
    </tr>
    <tr>
      <td class="hex-f7fcfe">#f7fcfe</td>
    </tr>
    <tr>
      <td class="hex-f6fbfd">#f6fbfd</td>
    </tr>
    <tr>
      <td class="hex-fbfbfb">#fbfbfb</td>
    </tr>
    <tr>
      <td class="hex-fcfcfc">#fcfcfc</td>
    </tr>
    <tr>
      <td class="hex-fdfdfd">#fdfdfd</td>
    </tr>
 
    
    
    <tr>
      <td class="section-title" colspan="2">White</td>
    </tr>
    <tr>
      <td class="section-count">Current: 2</td>
      <td class="section-count">Proposed: 1</td>
    </tr>
    <tr>
      <td class="hex-fff">#fff</td>
      <td class="hex-fff" rowspan="2">#fff</td>
    </tr>
    <tr>
      <td class="hex-white">white</td>
    </tr>
    
    
    
    <tr>
      <td class="section-title" colspan="2">Blues</td>
    </tr>
    <tr>
      <td class="section-count">Current: 22</td>
      <td class="section-count">Proposed: ?</td>
    </tr>
    
    <tr>
      <td class="hex-124964">#124964</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-006799">#006799</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-20708e">#20708e</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-0073aa">#0073aa</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-0074a2">#0074a2</td>
      <td class="hex-">#</td>
    </tr>
    
    <tr>
      <td class="hex-0085ba">#0085ba</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-008ec2">#008ec2</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-008EC2">#008EC2</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-298CBA">#298CBA</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-2991b7">#2991b7</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-1e8cbe">#1e8cbe</td>
      <td class="hex-">#</td>
    </tr>
    
    <tr>
      <td class="hex-7190d3">#7190d3</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-rgb46162204">rgb(46,162,204)</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-00a0d2">#00a0d2</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-5b9dd9">#5b9dd9</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-00b9eb">#00b9eb</td>
      <td class="hex-">#</td>
    </tr>   
    <tr>
      <td class="hex-33b3db">#33b3db</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-99d">#99d</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-55acee">#55acee</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-83b4d8">#83b4d8</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-9FD0D5">#9FD0D5</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-ccf3fa">#ccf3fa</td>
      <td class="hex-">#</td>
    </tr>      

  
  
    <tr>
      <td class="section-title" colspan="2">Accent Colors</td>
    </tr>
    
    <tr>
      <td class="hex-green">green</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-006505">#006505</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-46b450">#46b450</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-79ba49">#79ba49</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-83c373">#83c373</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-afa">#afa</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-c1e1b9">#c1e1b9</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-ecf7ed">#ecf7ed</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-e9ffe9">#e9ffe9</td>
      <td class="hex-">#</td>
    </tr>
    
    <tr>
      <td class="hex-ff0">#ff0</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-ffb900">#ffb900</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-ffba00">#ffba00</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-ffc733">#ffc733</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-ffe399">#ffe399</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-f6e2ac">#f6e2ac</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-fff8e5">#fff8e5</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-ffffe0">#ffffe0</td>
      <td class="hex-">#</td>
    </tr>
    
    <tr>
      <td class="hex-orange">orange</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-ca4a1f">#ca4a1f</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-d54e21">#d54e21</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-d98500">#d98500</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-e29808">#e29808</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-d4b146">#d4b146</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-edc048">#edc048</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-ff7d44">#ff7d44</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-f78b53">#f78b53</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-fbc5a9">#fbc5a9</td>
      <td class="hex-">#</td>
    </tr>
    
    
    <tr>
      <td class="hex-red">red</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-f00">#f00</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-a00">#a00</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-ac1b1b">#ac1b1b</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-bb2a2a">#bb2a2a</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-c00">#c00</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-cd5a5a">#cd5a5a</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-dc3232">#dc3232</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-dd3d36">#dd3d36</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-e35b5b">#e35b5b</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-f66">#f66</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-ff8573">#ff8573</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-f1acb1">#f1acb1</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-f1adad">#f1adad</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-faa">#faa</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-faafaa">#faafaa</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-fecac2">#fecac2</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-f6c9cc">#f6c9cc</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-fbeaea">#fbeaea</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-ffe9e9">#ffe9e9</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-ffebe8">#ffebe8</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-fcf3ef">#fcf3ef</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-fef7f1">#fef7f1</td>
      <td class="hex-">#</td>
    </tr>
    
    <tr>
      <td class="hex-ef54b0">#ef54b0</td>
      <td class="hex-">#</td>
    </tr>
 
    
    
    <tr>
      <td class="section-title" colspan="2">RGBA's</td>
    </tr> 
    
    <tr>
      <td class="hex-rgba000002">rgba(0,0,0,0.02)</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-rgba0000025">rgba(0,0,0,.025)</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-rgba000003">rgba(0,0,0,0.03)</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-rgba000004">rgba(0,0,0,0.04)</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-rgba000005">rgba(0,0,0,0.05)</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-rgba000006">rgba(0,0,0,0.06)</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-rgba000007">rgba(0,0,0,0.07)</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-rgba00001">rgba(0,0,0,0.1)</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-rgba000015">rgba(0,0,0,0.15)</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-rgba00002">rgba(0,0,0,0.2)</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-rgba000025">rgba(0,0,0,0.25)</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-rgba00003">rgba(0,0,0,0.3)</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-rgba00004">rgba(0,0,0,0.4)</td>
      <td class="hex-rgba00004" rowspan="2">rgba(0,0,0,0.4)</td>
    </tr>
    <tr>
      <td class="hex-rgba0004">rgba(0,0,0,.4)</td>
    </tr>
    <tr>
      <td class="hex-rgba00005">rgba(0,0,0,0.5)</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-rgba00006">rgba(0,0,0,0.6)</td>
      <td class="hex-rgba00006" rowspan="2">rgba(0,0,0,0.6)</td>
    </tr>
    <tr>
      <td class="hex-rgba0006">rgba(0,0,0,.6)</td>
    </tr>
    <tr>
      <td class="hex-rgba00007">rgba(0,0,0,0.7)</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-rgba0000">rgba(0,0,0,0)</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-rgba15315315301">rgba(153,153,153,0.1)</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-rgba2040008">rgba(204,0,0,0.8)</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-rgba2137833095">rgba(213,78,33,0.95)</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-rgba222222222075">rgba(222,222,222,0.75)</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-rgba238238238075">rgba(238,238,238,0.75)</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-rgba23823823809">rgba(238,238,238,0.9)</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-rgba24024525007">rgba(240,245,250,0.7)</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-rgba24124124109">rgba(241,241,241,0.9)</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-rgba24424424407">rgba(244,244,244,0.7)</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-rgba25525525501">rgba(255,255,255,0.1)</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-rgba25525525502">rgba(255,255,255,0.2)</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-rgba25525525505">rgba(255,255,255,0.5)</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-rgba25525525506">rgba(255,255,255,0.6)</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-rgba255255255065">rgba(255,255,255,0.65)</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-rgba25525525507">rgba(255,255,255,0.7)</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-rgba25525525509">rgba(255,255,255,0.9)</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-rgba301401908">rgba(30,140,190,.8)</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-rgba3014019008">rgba(30,140,190,0.8)</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-rgba30303009">rgba(30,30,30,0.9)</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-rgba4616220401">rgba(46,162,204,0.1)</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-rgba49494907">rgba(49,49,49,0.7)</td>
      <td class="hex-">#</td>
    </tr>
    <tr>
      <td class="hex-rgba51515105">rgba(51,51,51,0.5)</td>
      <td class="hex-">#</td>
    </tr>
  </table>
  
</div>
            
          
!
            
              .color-list {
  width: 100%;
  border-collapse:collapse;
  border-spacing:0;
  margin: 0;
  td, th {
    width: 50%;
    padding: 2em 1em;
    text-align: center;
    vertical-align: middle;
    color: black;
  }
  .section-title,
  .section-count { 
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: bold;
    font-size: .8em;
    color: $color-dark-silver-gray;
    padding: 1em;
  }
  .section-title {
    padding-top: 5em;
  }
  
  
  //DELETE
  .hex-000 { background-color: #000; }
.hex-006505 { background-color: #006505; }
.hex-006799 { background-color: #006799; }
.hex-0073aa { background-color: #0073aa; }
.hex-0074a2 { background-color: #0074a2; }
.hex-0085ba { background-color: #0085ba; }
.hex-008ec2 { background-color: #008ec2; }
.hex-008EC2 { background-color: #008EC2; }
.hex-00a0d2 { background-color: #00a0d2; }
.hex-00b9eb { background-color: #00b9eb; }
.hex-124964 { background-color: #124964; }
.hex-1e8cbe { background-color: #1e8cbe; }
.hex-20708e { background-color: #20708e; }
.hex-222 { background-color: #222; }
.hex-23282d { background-color: #23282d; }
.hex-298CBA { background-color: #298CBA; }
.hex-2991b7 { background-color: #2991b7; }
.hex-32373c { background-color: #32373c; }
.hex-333 { background-color: #333; }
.hex-33b3db { background-color: #33b3db; }
.hex-404040 { background-color: #404040; }
.hex-444 { background-color: #444; }
.hex-46b450 { background-color: #46b450; }
.hex-555 { background-color: #555; }
.hex-555d66 { background-color: #555d66; }
.hex-55acee { background-color: #55acee; }
.hex-5A5A5A { background-color: #5A5A5A; }
.hex-5b9dd9 { background-color: #5b9dd9; }
.hex-656a6f { background-color: #656a6f; }
.hex-666 { background-color: #666; }
.hex-7190d3 { background-color: #7190d3; }
.hex-727272 { background-color: #727272; }
.hex-727773 { background-color: #727773; }
.hex-72777c { background-color: #72777c; }
.hex-72777C { background-color: #72777C; }
.hex-79ba49 { background-color: #79ba49; }
.hex-82878c { background-color: #82878c; }
.hex-83b4d8 { background-color: #83b4d8; }
.hex-83c373 { background-color: #83c373; }
.hex-99d { background-color: #99d; }
.hex-9FD0D5 { background-color: #9FD0D5; }
.hex-a00 { background-color: #a00; }

.hex-ac1b1b { background-color: #ac1b1b; }
.hex-afa { background-color: #afa; }
.hex-bb2a2a { background-color: #bb2a2a; }
.hex-c00 { background-color: #c00; }
.hex-c1e1b9 { background-color: #c1e1b9; }
.hex-c4c4c4 { background-color: #c4c4c4; }
.hex-b4b9be { background-color: #b4b9be; }
.hex-ca4a1f { background-color: #ca4a1f; }
.hex-ccc { background-color: #ccc; }
.hex-cccccc { background-color: #cccccc; }
.hex-ccf3fa { background-color: #ccf3fa; }
.hex-cd5a5a { background-color: #cd5a5a; }
.hex-d4b146 { background-color: #d4b146; }
.hex-d54e21 { background-color: #d54e21; }
.hex-d5d2ca { background-color: #d5d2ca; }
.hex-d5d5d5 { background-color: #d5d5d5; }
.hex-d8d8d8 { background-color: #d8d8d8; }
.hex-d98500 { background-color: #d98500; }
.hex-dc3232 { background-color: #dc3232; }
.hex-dd3d36 { background-color: #dd3d36; }
.hex-ddd { background-color: #ddd; }
.hex-DDD { background-color: #DDD; }
.hex-e1e1e1 { background-color: #e1e1e1; }
.hex-e29808 { background-color: #e29808; }
.hex-e35b5b { background-color: #e35b5b; }
.hex-e4f2fd { background-color: #e4f2fd; }
.hex-e5e5e5 { background-color: #e5e5e5; }
.hex-e5f5fa { background-color: #e5f5fa; }
.hex-e8e8e8 { background-color: #e8e8e8; }
.hex-E9F5F9 { background-color: #E9F5F9; }
.hex-e9ffe9 { background-color: #e9ffe9; }
.hex-eaeaea { background-color: #eaeaea; }
.hex-ecf7ed { background-color: #ecf7ed; }
.hex-edc048 { background-color: #edc048; }
.hex-ededed { background-color: #ededed; }
.hex-eee { background-color: #eee; }
.hex-EEE { background-color: #EEE; }
.hex-eeeeee { background-color: #eeeeee; }
.hex-ef54b0 { background-color: #ef54b0; }
.hex-f00 { background-color: #f00; }
.hex-f1acb1 { background-color: #f1acb1; }
.hex-f1adad { background-color: #f1adad; }
.hex-f1f1f1 { background-color: #f1f1f1; }
.hex-f3f3f3 { background-color: #f3f3f3; }
.hex-f5f5f5 { background-color: #f5f5f5; }
.hex-f66 { background-color: #f66; }
.hex-f6c9cc { background-color: #f6c9cc; }
.hex-f6e2ac { background-color: #f6e2ac; }
.hex-f6fbfd { background-color: #f6fbfd; }
.hex-f78b53 { background-color: #f78b53; }
.hex-f7f7f7 { background-color: #f7f7f7; }
.hex-f7fcfe { background-color: #f7fcfe; }
.hex-f9f9f9 { background-color: #f9f9f9; }
.hex-faa { background-color: #faa; }
.hex-faafaa { background-color: #faafaa; }
.hex-fafafa { background-color: #fafafa; }
.hex-fbc5a9 { background-color: #fbc5a9; }
.hex-fbeaea { background-color: #fbeaea; }
.hex-fbfbfb { background-color: #fbfbfb; }
.hex-fcf3ef { background-color: #fcf3ef; }
.hex-fcfcfc { background-color: #fcfcfc; }
.hex-fdfdfd { background-color: #fdfdfd; }
.hex-fecac2 { background-color: #fecac2; }
.hex-fef7f1 { background-color: #fef7f1; }
.hex-ff0 { background-color: #ff0; }
.hex-ff7d44 { background-color: #ff7d44; }
.hex-ff8573 { background-color: #ff8573; }
.hex-ffb900 { background-color: #ffb900; }
.hex-ffba00 { background-color: #ffba00; }
.hex-ffc733 { background-color: #ffc733; }
.hex-ffe399 { background-color: #ffe399; }
.hex-ffe9e9 { background-color: #ffe9e9; }
.hex-ffebe8 { background-color: #ffebe8; }
.hex-fff { background-color: #fff; }
.hex-fff8e5 { background-color: #fff8e5; }
.hex-ffffe0 { background-color: #ffffe0; }
.hex-black { background-color: black; }
.hex-f1f1f1 { background-color: f1f1f1; }
.hex-green { background-color: green; }
.hex-orange { background-color: orange; }
.hex-red { background-color: red; }
.hex-rgb227227227 { background-color: rgb(227,227,227); }
.hex-rgb229229229 { background-color: rgb(229,229,229); }
.hex-rgb46162204 { background-color: rgb(46,162,204); }
.hex-rgba0000025 { background-color: rgba(0,0,0,.025); }
.hex-rgba0004 { background-color: rgba(0,0,0,.4); }
.hex-rgba0006 { background-color: rgba(0,0,0,.6); }
.hex-rgba000002 { background-color: rgba(0,0,0,0.02); }
.hex-rgba000003 { background-color: rgba(0,0,0,0.03); }
.hex-rgba000004 { background-color: rgba(0,0,0,0.04); }
.hex-rgba000005 { background-color: rgba(0,0,0,0.05); }
.hex-rgba000006 { background-color: rgba(0,0,0,0.06); }
.hex-rgba000007 { background-color: rgba(0,0,0,0.07); }
.hex-rgba00001 { background-color: rgba(0,0,0,0.1); }
.hex-rgba000015 { background-color: rgba(0,0,0,0.15); }
.hex-rgba00002 { background-color: rgba(0,0,0,0.2); }
.hex-rgba000025 { background-color: rgba(0,0,0,0.25); }
.hex-rgba00003 { background-color: rgba(0,0,0,0.3); }
.hex-rgba00004 { background-color: rgba(0,0,0,0.4); }
.hex-rgba00005 { background-color: rgba(0,0,0,0.5); }
.hex-rgba00006 { background-color: rgba(0,0,0,0.6); }
.hex-rgba00007 { background-color: rgba(0,0,0,0.7); }
.hex-rgba0000 { background-color: rgba(0,0,0,0); }
.hex-rgba15315315301 { background-color: rgba(153,153,153,0.1); }
.hex-rgba2040008 { background-color: rgba(204,0,0,0.8); }
.hex-rgba2137833095 { background-color: rgba(213,78,33,0.95); }
.hex-rgba222222222075 { background-color: rgba(222,222,222,0.75); }
.hex-rgba238238238075 { background-color: rgba(238,238,238,0.75); }
.hex-rgba23823823809 { background-color: rgba(238,238,238,0.9); }
.hex-rgba24024525007 { background-color: rgba(240,245,250,0.7); }
.hex-rgba24124124109 { background-color: rgba(241,241,241,0.9); }
.hex-rgba24424424407 { background-color: rgba(244,244,244,0.7); }
.hex-rgba25525525501 { background-color: rgba(255,255,255,0.1); }
.hex-rgba25525525502 { background-color: rgba(255,255,255,0.2); }
.hex-rgba25525525505 { background-color: rgba(255,255,255,0.5); }
.hex-rgba25525525506 { background-color: rgba(255,255,255,0.6); }
.hex-rgba255255255065 { background-color: rgba(255,255,255,0.65); }
.hex-rgba25525525507 { background-color: rgba(255,255,255,0.7); }
.hex-rgba25525525509 { background-color: rgba(255,255,255,0.9); }
.hex-rgba301401908 { background-color: rgba(30,140,190,.8); }
.hex-rgba3014019008 { background-color: rgba(30,140,190,0.8); }
.hex-rgba30303009 { background-color: rgba(30,30,30,0.9); }
.hex-rgba4616220401 { background-color: rgba(46,162,204,0.1); }
.hex-rgba49494907 { background-color: rgba(49,49,49,0.7); }
.hex-rgba51515105 { background-color: rgba(51,51,51,0.5); }
.hex-white { background-color: white; }
  //DELETE ^
  
  
  
  
  
  // Grays
  .hex-000 { background: #000; color: #fff; }
  .hex-black { background: black; color: #fff; }
  
  .hex-191e23, .dark-gray-900 { background-color: #191e23; color: #fff; }
  .hex-222 { background: #222; color: #fff; }
  .hex-23282d, .dark-gray-800 { background: #23282d; color: #fff; }
  .hex-333 { background: #333; color: #fff; }
  .hex-32373c, .dark-gray-700 { background: #32373c; color: #fff; }
  .hex-404040 { background: #404040; color: #fff; }
  .hex-444 { background: #444; color: #fff; }
  .dark-gray-600 { background: #40464d; color: #fff; }
  .hex-555 { background: #555; color: #fff; }
  .hex-555d66 { background: #555d66; color: #fff; }
  .hex-5a5a5a { background: #5A5A5A; color: #fff; }
  .dark-gray-500 { background: #555d66; color: #fff; }
  .hex-656a6f { background: #656A6F; color: #fff; }
  .hex-666666 { background: #666666; color: #fff; }
  .dark-gray-400 { background: #606a73; color: #fff; }
  .hex-727272 { background: #727272; color: #fff; }
  .hex-727773 { background: #727773; color: #fff; }
  .hex-72777c { background: #72777c; color: #fff; }
  .hex-72777C { background: #72777C; color: #fff; }
  .dark-gray-300 { background: #6c7781; color: #fff; }
  .hex-82878c { background: #82878c; color: #fff; }
  .dark-gray-200 { background: #7e8993; color: #fff; }
  .hex-929793 { background: #929793; color: #fff; }
  .hex-999 { background: #999; color: #fff; }
  .hex-rgb153153153 { background-color: rgb(153,153,153); color: #fff; }
  .dark-gray-100 { background: #8f98a1; color: #fff; }
  
  
  
  
  .light-gray-900 { background: #a2aab2; }
  .light-gray-800 { background: #b5bcc2; }
  .light-gray-700 { background: #ccd0d4; }
  .light-gray-600 { background: #d7dade; }
  .light-gray-500 { background: #e2e4e7; }
  .light-gray-400 { background: #e8eaeb; }
  .light-gray-300 { background: #edeff0; }
  .light-gray-200 { background: #f3f4f5; }
  .light-gray-100 { background: #f8f9f9; }
  
  
  .hex-9ea7af { background-color: #9ea7af; }
  .hex-a0a5aa { background-color: #a0a5aa; }
  .hex-b4b9be { background-color: #b4b9be; }
  
  .hex-rgba51515105 { background: rgba(51,51,51,0.5); color: #000; }  
  .hex-A0A5AA { background: #A0A5AA; color: #000; }
  .hex-9EA7AF { background: #9EA7AF; color: #000; }
  .hex-B4B9BE { background: #B4B9BE; color: #000; }
  .hex-CCCCCC { background: #CCCCCC; color: #000; }
  .hex-D5D5D5 { background: #D5D5D5; color: #000; }
  .hex-DDDDDD { background: #DDDDDD; color: #000; }
  .hex-EDEDED { background: #EDEDED; color: #000; }
  .hex-EEEEEE { background: #EEEEEE; color: #000; }
  .hex-rgba24024525007 { background: rgba(240,245,250,0.7); color: #000; } 
  .hex-ffffff { background: #ffffff; color: #000; }
  .hex-white { background: white; color: #000; }
  
  .hex-010101 { background: #fff; color: #000; }
  
  // Blues
  .hex-1E8CBE { background: #1E8CBE; color: #fff; }
  .hex-124964 { background: #124964; color: #fff; }
  .hex-0073AA { background: #0073AA; color: #fff; }
  .hex-0074A2 { background: #0074A2; color: #fff; }
  .hex-00A0D2 { background: #00A0D2; color: #fff; }
  .hex-00B9EB { background: #00B9EB; color: #000; }
  .hex-191E23 { background: #191E23; color: #fff; }
  .hex-7190D3 { background: #7190D3; color: #fff; }
  .hex-9FD0D5 { background: #9FD0D5; color: #000; }
  .hex-010101 { background: #fff; color: #000; }
  
  // Others
  .hex-EF54B0 { background: #EF54B0; color: #fff; }
  .hex-AA0000 { background: #AA0000; color: #fff; }
  .hex-CC0000 { background: #CC0000; color: #fff; }
  .hex-FF0000 { background: #FF0000; color: #fff; }
  .hex-red { background: red; color: #fff; }
  .hex-BB2A2A { background: #BB2A2A; color: #fff; }
  .hex-DC3232 { background: #DC3232; color: #000; }
  .hex-D54E21 { background: #D54E21; color: #000; }

  .hex-D98500 { background: #D98500; color: #000; }
  .hex-D4B146 { background: #D4B146; color: #000; }
  .hex-orange { background: orange; color: #000; }
  .hex-FFB900 { background: #FFB900; color: #000; }
  
  .hex-006505 { background: #006505; color: #fff; }
  .hex-green { background: green; color: #fff; }
  .hex-79BA49 { background: #79BA49; color: #fff; }
}



            
          
!
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