css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

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.

            
              <article>
                <h2> Input your own color into the $color-main variable</h2>
                <div class="swatch-grid main">
                  <ul>
                    <h3>Main Color</h3>
                    <li>
                      <span>500</span>
                    </li>
                    <li>
                      <span>100</span>
                    </li>
                    <li>
                      <span>200</span>
                    </li>
                    <li>
                      <span>300</span>
                    </li>
                    <li>
                      <span>400</span>
                    </li>
                    <li>
                      <span>500</span>
                    </li>
                    <li>
                      <span>600</span>
                    </li>
                    <li>
                      <span>700</span>
                    </li>
                    <li>
                      <span>800</span>
                    </li>
                    <li>
                      <span>900</span>
                    </li>
                  </ul>
                </div>
                <h4> or check out these swatches I've generated</h4>
                <div class="generated-swatches">
                  <div class="swatch-grid red">
                    <ul>
                      <h3>Red</h3>
                      <li>
                        <span>500</span>
                      </li>
                      <li>
                        <span>100</span>
                      </li>
                      <li>
                        <span>200</span>
                      </li>
                      <li>
                        <span>300</span>
                      </li>
                      <li>
                        <span>400</span>
                      </li>
                      <li>
                        <span>500</span>
                      </li>
                      <li>
                        <span>600</span>
                      </li>
                      <li>
                        <span>700</span>
                      </li>
                      <li>
                        <span>800</span>
                      </li>
                      <li>
                        <span>900</span>
                      </li>
                    </ul>
                  </div>
                  <div class="swatch-grid pink">
                    <ul>
                      <h3>Pink</h3>
                      <li>
                        <span>500</span>
                      </li>
                      <li>
                        <span>100</span>
                      </li>
                      <li>
                        <span>200</span>
                      </li>
                      <li>
                        <span>300</span>
                      </li>
                      <li>
                        <span>400</span>
                      </li>
                      <li>
                        <span>500</span>
                      </li>
                      <li>
                        <span>600</span>
                      </li>
                      <li>
                        <span>700</span>
                      </li>
                      <li>
                        <span>800</span>
                      </li>
                      <li>
                        <span>900</span>
                      </li>
                    </ul>
                  </div>
              
                  <div class="swatch-grid purple">
                    <ul>
                      <h3>Purple</h3>
                      <li>
                        <span>500</span>
                      </li>
                      <li>
                        <span>100</span>
                      </li>
                      <li>
                        <span>200</span>
                      </li>
                      <li>
                        <span>300</span>
                      </li>
                      <li>
                        <span>400</span>
                      </li>
                      <li>
                        <span>500</span>
                      </li>
                      <li>
                        <span>600</span>
                      </li>
                      <li>
                        <span>700</span>
                      </li>
                      <li>
                        <span>800</span>
                      </li>
                      <li>
                        <span>900</span>
                      </li>
                    </ul>
                  </div>
                  <div class="swatch-grid deep-purple">
                    <ul>
                      <h3>Deep Purple</h3>
                      <li>
                        <span>500</span>
                      </li>
                      <li>
                        <span>100</span>
                      </li>
                      <li>
                        <span>200</span>
                      </li>
                      <li>
                        <span>300</span>
                      </li>
                      <li>
                        <span>400</span>
                      </li>
                      <li>
                        <span>500</span>
                      </li>
                      <li>
                        <span>600</span>
                      </li>
                      <li>
                        <span>700</span>
                      </li>
                      <li>
                        <span>800</span>
                      </li>
                      <li>
                        <span>900</span>
                      </li>
                    </ul>
                  </div>
                  <div class="swatch-grid indigo">
                    <ul>
                      <h3>Indigo</h3>
                      <li>
                        <span>500</span>
                      </li>
                      <li>
                        <span>100</span>
                      </li>
                      <li>
                        <span>200</span>
                      </li>
                      <li>
                        <span>300</span>
                      </li>
                      <li>
                        <span>400</span>
                      </li>
                      <li>
                        <span>500</span>
                      </li>
                      <li>
                        <span>600</span>
                      </li>
                      <li>
                        <span>700</span>
                      </li>
                      <li>
                        <span>800</span>
                      </li>
                      <li>
                        <span>900</span>
                      </li>
                    </ul>
                  </div>
                  <div class="swatch-grid blue">
                    <ul>
                      <h3>Blue</h3>
                      <li>
                        <span>500</span>
                      </li>
                      <li>
                        <span>100</span>
                      </li>
                      <li>
                        <span>200</span>
                      </li>
                      <li>
                        <span>300</span>
                      </li>
                      <li>
                        <span>400</span>
                      </li>
                      <li>
                        <span>500</span>
                      </li>
                      <li>
                        <span>600</span>
                      </li>
                      <li>
                        <span>700</span>
                      </li>
                      <li>
                        <span>800</span>
                      </li>
                      <li>
                        <span>900</span>
                      </li>
                    </ul>
                  </div>
                  <div class="swatch-grid light-blue">
                    <ul>
                      <h3>Light Blue</h3>
                      <li>
                        <span>500</span>
                      </li>
                      <li>
                        <span>100</span>
                      </li>
                      <li>
                        <span>200</span>
                      </li>
                      <li>
                        <span>300</span>
                      </li>
                      <li>
                        <span>400</span>
                      </li>
                      <li>
                        <span>500</span>
                      </li>
                      <li>
                        <span>600</span>
                      </li>
                      <li>
                        <span>700</span>
                      </li>
                      <li>
                        <span>800</span>
                      </li>
                      <li>
                        <span>900</span>
                      </li>
                    </ul>
                  </div>
                  <div class="swatch-grid cyan">
                    <ul>
                      <h3>Cyan</h3>
                      <li>
                        <span>500</span>
                      </li>
                      <li>
                        <span>100</span>
                      </li>
                      <li>
                        <span>200</span>
                      </li>
                      <li>
                        <span>300</span>
                      </li>
                      <li>
                        <span>400</span>
                      </li>
                      <li>
                        <span>500</span>
                      </li>
                      <li>
                        <span>600</span>
                      </li>
                      <li>
                        <span>700</span>
                      </li>
                      <li>
                        <span>800</span>
                      </li>
                      <li>
                        <span>900</span>
                      </li>
                    </ul>
                  </div>
                  <div class="swatch-grid teal">
                    <ul>
                      <h3>Teal</h3>
                      <li>
                        <span>500</span>
                      </li>
                      <li>
                        <span>100</span>
                      </li>
                      <li>
                        <span>200</span>
                      </li>
                      <li>
                        <span>300</span>
                      </li>
                      <li>
                        <span>400</span>
                      </li>
                      <li>
                        <span>500</span>
                      </li>
                      <li>
                        <span>600</span>
                      </li>
                      <li>
                        <span>700</span>
                      </li>
                      <li>
                        <span>800</span>
                      </li>
                      <li>
                        <span>900</span>
                      </li>
                    </ul>
                  </div>
                  <div class="swatch-grid green">
                    <ul>
                      <h3>Green</h3>
                      <li>
                        <span>500</span>
                      </li>
                      <li>
                        <span>100</span>
                      </li>
                      <li>
                        <span>200</span>
                      </li>
                      <li>
                        <span>300</span>
                      </li>
                      <li>
                        <span>400</span>
                      </li>
                      <li>
                        <span>500</span>
                      </li>
                      <li>
                        <span>600</span>
                      </li>
                      <li>
                        <span>700</span>
                      </li>
                      <li>
                        <span>800</span>
                      </li>
                      <li>
                        <span>900</span>
                      </li>
                    </ul>
                  </div>
                  <div class="swatch-grid light-green">
                    <ul>
                      <h3>Light Green</h3>
                      <li>
                        <span>500</span>
                      </li>
                      <li>
                        <span>100</span>
                      </li>
                      <li>
                        <span>200</span>
                      </li>
                      <li>
                        <span>300</span>
                      </li>
                      <li>
                        <span>400</span>
                      </li>
                      <li>
                        <span>500</span>
                      </li>
                      <li>
                        <span>600</span>
                      </li>
                      <li>
                        <span>700</span>
                      </li>
                      <li>
                        <span>800</span>
                      </li>
                      <li>
                        <span>900</span>
                      </li>
                    </ul>
                  </div>
                  <div class="swatch-grid lime">
                    <ul>
                      <h3>Lime</h3>
                      <li>
                        <span>500</span>
                      </li>
                      <li>
                        <span>100</span>
                      </li>
                      <li>
                        <span>200</span>
                      </li>
                      <li>
                        <span>300</span>
                      </li>
                      <li>
                        <span>400</span>
                      </li>
                      <li>
                        <span>500</span>
                      </li>
                      <li>
                        <span>600</span>
                      </li>
                      <li>
                        <span>700</span>
                      </li>
                      <li>
                        <span>800</span>
                      </li>
                      <li>
                        <span>900</span>
                      </li>
                    </ul>
                  </div>
                  <div class="swatch-grid yellow">
                    <ul>
                      <h3>Yellow</h3>
                      <li>
                        <span>500</span>
                      </li>
                      <li>
                        <span>100</span>
                      </li>
                      <li>
                        <span>200</span>
                      </li>
                      <li>
                        <span>300</span>
                      </li>
                      <li>
                        <span>400</span>
                      </li>
                      <li>
                        <span>500</span>
                      </li>
                      <li>
                        <span>600</span>
                      </li>
                      <li>
                        <span>700</span>
                      </li>
                      <li>
                        <span>800</span>
                      </li>
                      <li>
                        <span>900</span>
                      </li>
                    </ul>
                  </div>
                  <div class="swatch-grid amber">
                    <ul>
                      <h3>Amber</h3>
                      <li>
                        <span>500</span>
                      </li>
                      <li>
                        <span>100</span>
                      </li>
                      <li>
                        <span>200</span>
                      </li>
                      <li>
                        <span>300</span>
                      </li>
                      <li>
                        <span>400</span>
                      </li>
                      <li>
                        <span>500</span>
                      </li>
                      <li>
                        <span>600</span>
                      </li>
                      <li>
                        <span>700</span>
                      </li>
                      <li>
                        <span>800</span>
                      </li>
                      <li>
                        <span>900</span>
                      </li>
                    </ul>
                  </div>
                  <div class="swatch-grid orange">
                    <ul>
                      <h3>Orange</h3>
                      <li>
                        <span>500</span>
                      </li>
                      <li>
                        <span>100</span>
                      </li>
                      <li>
                        <span>200</span>
                      </li>
                      <li>
                        <span>300</span>
                      </li>
                      <li>
                        <span>400</span>
                      </li>
                      <li>
                        <span>500</span>
                      </li>
                      <li>
                        <span>600</span>
                      </li>
                      <li>
                        <span>700</span>
                      </li>
                      <li>
                        <span>800</span>
                      </li>
                      <li>
                        <span>900</span>
                      </li>
                    </ul>
                  </div>
                  <div class="swatch-grid deep-orange">
                    <ul>
                      <h3>Orange</h3>
                      <li>
                        <span>500</span>
                      </li>
                      <li>
                        <span>100</span>
                      </li>
                      <li>
                        <span>200</span>
                      </li>
                      <li>
                        <span>300</span>
                      </li>
                      <li>
                        <span>400</span>
                      </li>
                      <li>
                        <span>500</span>
                      </li>
                      <li>
                        <span>600</span>
                      </li>
                      <li>
                        <span>700</span>
                      </li>
                      <li>
                        <span>800</span>
                      </li>
                      <li>
                        <span>900</span>
                      </li>
                    </ul>
                  </div>
                  <div class="swatch-grid brown">
                    <ul>
                      <h3>Brown</h3>
                      <li>
                        <span>500</span>
                      </li>
                      <li>
                        <span>100</span>
                      </li>
                      <li>
                        <span>200</span>
                      </li>
                      <li>
                        <span>300</span>
                      </li>
                      <li>
                        <span>400</span>
                      </li>
                      <li>
                        <span>500</span>
                      </li>
                      <li>
                        <span>600</span>
                      </li>
                      <li>
                        <span>700</span>
                      </li>
                      <li>
                        <span>800</span>
                      </li>
                      <li>
                        <span>900</span>
                      </li>
                    </ul>
                  </div>
                  <div class="swatch-grid grey">
                    <ul>
                      <h3>Grey</h3>
                      <li>
                        <span>500</span>
                      </li>
                      <li>
                        <span>100</span>
                      </li>
                      <li>
                        <span>200</span>
                      </li>
                      <li>
                        <span>300</span>
                      </li>
                      <li>
                        <span>400</span>
                      </li>
                      <li>
                        <span>500</span>
                      </li>
                      <li>
                        <span>600</span>
                      </li>
                      <li>
                        <span>700</span>
                      </li>
                      <li>
                        <span>800</span>
                      </li>
                      <li>
                        <span>900</span>
                      </li>
                    </ul>
                  </div>
                  <div class="swatch-grid blue-grey">
                    <ul>
                      <h3>Blue Grey</h3>
                      <li>
                        <span>500</span>
                      </li>
                      <li>
                        <span>100</span>
                      </li>
                      <li>
                        <span>200</span>
                      </li>
                      <li>
                        <span>300</span>
                      </li>
                      <li>
                        <span>400</span>
                      </li>
                      <li>
                        <span>500</span>
                      </li>
                      <li>
                        <span>600</span>
                      </li>
                      <li>
                        <span>700</span>
                      </li>
                      <li>
                        <span>800</span>
                      </li>
                      <li>
                        <span>900</span>
                      </li>
                    </ul>
                  </div>
                </div>
              </article>
            
          
!
            
              // Variables 
$color-red:rgb(244,67,54);
$color-pink:rgb(233,30,99);
$color-purple:rgb(156,39,176);
$color-deep-purple:rgb(103,58,183);
$color-indigo:rgb(63,81,181);
$color-blue:rgb(63,81,181);
$color-light-blue:rgb(3,169,244);
$color-cyan:rgb(0,188,212);
$color-teal:rgb(0,150,136);
$color-green:rgb(76,175,80);
$color-light-green:rgb(139,195,74);
$color-lime:rgb(205,220,57);
$color-yellow:rgb(255,235,59);
$color-amber:rgb(255,193,7);
$color-orange:rgb(255,152,0);
$color-deep-orange:rgb(255,87,34);
$color-brown:rgb(121,85,72);
$color-grey:rgb(158,158,158);
$color-blue-grey:rgb(96,125,139);

$color-scales: (
    red: $color-red ,
    pink: $color-pink,
    purple:$color-purple,
    deep-purple:$color-deep-purple,
    indigo:$color-indigo,
    blue:$color-blue,
    light-blue:$color-light-blue,
    cyan:$color-cyan,
    teal:$color-teal,
    green:$color-green,
    light-green:$color-light-green,
    lime:$color-lime,
    yellow:$color-yellow,
    amber:$color-amber,
    orange:$color-orange,
    deep-orange:$color-deep-orange,
    brown:$color-brown,
    grey:$color-grey,
    blue-grey:$color-blue-grey
);


/// YOU CAN CHANGE THIS VALUE
$color-main: #333366;
// GO FOR IT, GRAB THAT MOON


@function color-scale($color, $scale){
  @if $color == grey {
    @return greyscale($color);
  }
    @if $scale == 100 {
        @return saturate(mix($color, rgb(255,255,255), 10%), 20%);
    }
    @if $scale == 200 {
        @return saturate(mix($color, rgb(255,255,255), 30%), 20%);
    }
    @if $scale == 300 {
        @return saturate(mix($color, rgb(255,255,255), 50%), 20%);
    }
    @if $scale == 400 {
        @return saturate(mix($color, rgb(255,255,255), 70%), 20%);
    }
    @if $scale == 500 {
        @return $color;
    }
    @if $scale == 600 {
        @return saturate(mix($color, rgb(0,0,0), 80%), 20%);
    }
    @if $scale == 700 {
        @return saturate(mix($color, rgb(0,0,0), 60%), 20%);
    }
    @if $scale == 800 {
        @return saturate(mix($color, rgb(0,0,0), 40%), 20%);
    }
    @if $scale == 900 {
        @return saturate(mix($color, rgb(0,0,0), 20%), 20%);
    }
    @else{
        @error "The value you have put into the color-scale is not valid, you can only put values, 100-900";
    }

}

article{
  font-size:16px;
  font-family: sans-serif;
  display:flex;
  flex-direction:column;
  align-content: center;
  border-top:2rem solid $color-indigo;
  h2, h4{  
      margin:2rem auto;
      color:color-scale($color-grey, 900);
  }
}

.generated-swatches {
    display:flex;
    justify-content: space-around;
    flex-wrap:wrap;
}


@each $color-name, $color-value in $color-scales {
    .swatch-grid.#{$color-name} {
        width:20rem;
        box-shadow: 0 2px 4px 0 rgba(0,0,0,0.50);
        display:flex;
        flex-direction:column;
        margin-bottom:1rem;
        ul{
            list-style: none;
            margin:0;
            padding:0;
            h3{
                color:white;
                background:color-scale($color-value, 500);
                margin:0;
                padding:1rem;
            }
            li{
                height:2rem;
                display:flex;
                justify-content: space-between;
                padding:1rem;
                color:white;
                &:hover{
                    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.48);
                }
            }
            li:nth-of-type(1){
                background:color-scale($color-value, 500);
                span:after {
                content: "#{color-scale($color-value, 500)}";
                text-transform:uppercase;
                margin-left:12rem;
                }
                
            }
            li:nth-of-type(2){
                background:color-scale($color-value, 100);
                color:black;
                
                span:after {
                content: "#{color-scale($color-value, 100)}";
                text-transform:uppercase;
                margin-left:12rem;
                }
            }
            li:nth-of-type(3){
                background:color-scale($color-value, 200);
                color:black;
                span:after {
                content: "#{color-scale($color-value, 200)}";
                text-transform:uppercase;
                margin-left:12rem;
                }
            }
            li:nth-of-type(4){
                background:color-scale($color-value, 300);
                color:black;
                
                span:after {
                content: "#{color-scale($color-value, 300)}";
                text-transform:uppercase;
                margin-left:12rem;
                }
            }
            li:nth-of-type(5){
                background:color-scale($color-value, 400);
                span:after {
                content: "#{color-scale($color-value, 400)}";
                text-transform:uppercase;
                margin-left:12rem;
                }
                
            }
            li:nth-of-type(6){
                background:color-scale($color-value, 500);
            span:after {
                content: "#{color-scale($color-value, 500)}";
                text-transform:uppercase;
                margin-left:12rem;
                }
            }
            li:nth-of-type(7){
                background:color-scale($color-value, 600);
            span:after {
                content: "#{color-scale($color-value, 600)}";
                text-transform:uppercase;
                margin-left:12rem;
                }
            }
            li:nth-of-type(8){
                background:color-scale($color-value, 700);
                span:after {
                content: "#{color-scale($color-value, 700)}";
                text-transform:uppercase;
                margin-left:12rem;
                }
            }
            li:nth-of-type(9){
                background:color-scale($color-value, 800);
                span:after {
                content: "#{color-scale($color-value, 800)}";
                text-transform:uppercase;
                margin-left:12rem;
                }
            }
            li:nth-of-type(10){
                background:color-scale($color-value, 900);
                span:after {
                content: "#{color-scale($color-value, 900)}";
                text-transform:uppercase;
                margin-left:12rem;
                }
            }
        }
    }
}

.swatch-grid.main{
    width:20rem;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.50);
    display:flex;
    flex-direction:column;
    margin:0 auto;
    ul{
        list-style: none;
        margin:0;
        padding:0;
        h3{
            color:white;
            background:color-scale($color-main, 500);
            margin:0;
            padding:1rem;
        }
        li{
            height:2rem;
            display:flex;
            justify-content: space-between;
            padding:1rem;
            color:white;
            &:hover{
                box-shadow: 0 2px 4px 0 rgba(0,0,0,0.48);
            }
        }
        li:nth-of-type(1){
            background:color-scale($color-main, 500);
          span:after {
            content: "#{color-scale($color-main, 500)}";
            text-transform:uppercase;
            margin-left:12rem;
          }
            
        }
        li:nth-of-type(2){
            background:color-scale($color-main, 100);
            color:black;
          
          span:after {
            content: "#{color-scale($color-main, 100)}";
            text-transform:uppercase;
            margin-left:12rem;
          }
        }
        li:nth-of-type(3){
            background:color-scale($color-main, 200);
            color:black;
          span:after {
            content: "#{color-scale($color-main, 200)}";
            text-transform:uppercase;
            margin-left:12rem;
          }
        }
        li:nth-of-type(4){
            background:color-scale($color-main, 300);
          color:black;
          
          span:after {
            content: "#{color-scale($color-main, 300)}";
            text-transform:uppercase;
            margin-left:12rem;
          }
        }
        li:nth-of-type(5){
            background:color-scale($color-main, 400);
          span:after {
            content: "#{color-scale($color-main, 400)}";
            text-transform:uppercase;
            margin-left:12rem;
          }
            
        }
        li:nth-of-type(6){
            background:color-scale($color-main, 500);
        span:after {
            content: "#{color-scale($color-main, 500)}";
            text-transform:uppercase;
            margin-left:12rem;
          }
        }
        li:nth-of-type(7){
            background:color-scale($color-main, 600);
        span:after {
            content: "#{color-scale($color-main, 600)}";
            text-transform:uppercase;
            margin-left:12rem;
          }
        }
        li:nth-of-type(8){
            background:color-scale($color-main, 700);
          span:after {
            content: "#{color-scale($color-main, 700)}";
            text-transform:uppercase;
            margin-left:12rem;
          }
        }
        li:nth-of-type(9){
            background:color-scale($color-main, 800);
          span:after {
            content: "#{color-scale($color-main, 800)}";
            text-transform:uppercase;
            margin-left:12rem;
          }
        }
        li:nth-of-type(10){
            background:color-scale($color-main, 900);
          span:after {
            content: "#{color-scale($color-main, 900)}";
            text-transform:uppercase;
            margin-left:12rem;
          }
        }
    }
}
            
          
!
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.
Loading ..................

Console