cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

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.

Quick-add: + add another resource

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.

Quick-add: + add another resource

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.

            
               <header class="header"><h1><a href="https://codepen.io/atelierbram/pen/JnbIt">Colorscheme Template <span class="small">: &#36;Variables;</span></a></h1>
  <!-- <h2>code syntax highlighter builder</h2> -->
</header>

<div class="cf wrap container">

  <div class="row">
    <h3 id="demo-tiles">Sixteen colors</h3>
    <div class="demo-tiles">
      <div class="unit bg-base00">  base00  </div>
      <div class="unit bg-base01">  base01  </div>
      <div class="unit bg-base02">  base02  </div>
      <div class="unit bg-base03">  base03  </div>
      <div class="unit bg-base04">  base04  </div>
      <div class="unit bg-base05">  base05  </div>
      <div class="unit bg-base06">  base06  </div>
      <div class="unit bg-base07">  base07  </div>
      <div class="unit bg-yellow">  yellow  </div>
      <div class="unit bg-orange">  orange  </div>
      <div class="unit bg-red">     red     </div>
      <div class="unit bg-magenta"> magenta </div>
      <div class="unit bg-violet">  violet  </div>
      <div class="unit bg-blue">    blue    </div>
      <div class="unit bg-cyan">    cyan    </div>
      <div class="unit bg-green">   green   </div>
    </div>

    <div class="block-list">
      <h3>Extended color variables</h3>
      <ul>
        <li class="bg-dark01">dark01</li>
        <li class="bg-dark02">dark02</li>
        <li class="bg-dark03">dark03</li>
        <li class="bg-dark04">dark04</li>
        <li class="bg-dark05">dark05</li>
        <li class="bg-dark06">dark06</li>
        <li class="bg-dark07">dark07</li>
        <li class="bg-dark08">dark08</li>
        <li class="bg-light08">light08</li>
        <li class="bg-light07">light07</li>
        <li class="bg-light06">light06</li>
        <li class="bg-light05">light05</li>
        <li class="bg-light04">light04</li>
        <li class="bg-light03">light03</li>
        <li class="bg-light02">light02</li>
        <li class="bg-light01">light01</li>

        <li class="bg-dark_yellow">dark_yellow</li>
        <li class="bg-dark_yellow-orange">dark_yellow-orange</li>
        <li class="bg-dark_orange">dark_orange</li>
        <li class="bg-dark_orange-red">dark_orange-red</li>
        <li class="bg-dark_red">dark_red</li>
        <li class="bg-dark_red-magenta">dark_red-magenta</li>
        <li class="bg-dark_magenta">dark_magenta</li>
        <li class="bg-dark_magenta-violet">dark_magenta-violet</li>
        <li class="bg-dark_violet">dark_violet</li>
        <li class="bg-dark_violet-blue">dark_violet-blue</li>
        <li class="bg-dark_blue">dark_blue</li>
        <li class="bg-dark_blue-cyan">dark_blue-cyan</li>
        <li class="bg-dark_cyan">dark_cyan</li>
        <li class="bg-dark_cyan-green">dark_cyan-green</li>
        <li class="bg-dark_green">dark_green</li>
        <li class="bg-dark_green-yellow">dark_green-yellow</li>

        <li class="bg-yellow">yellow</li>
        <li class="bg-yellow-orange">yellow-orange</li>
        <li class="bg-orange">orange</li>
        <li class="bg-orange-red">orange-red</li>
        <li class="bg-red">red</li>
        <li class="bg-red-magenta">red-magenta</li>
        <li class="bg-magenta">magenta</li>
        <li class="bg-magenta-violet">magenta-violet</li>
        <li class="bg-violet">violet</li>
        <li class="bg-violet-blue">violet-blue</li>
        <li class="bg-blue">blue</li>
        <li class="bg-blue-cyan">blue-cyan</li>
        <li class="bg-cyan">cyan</li>
        <li class="bg-cyan-green">cyan-green</li>
        <li class="bg-green">green</li>
        <li class="bg-green-yellow">green-yellow</li>

        <li class="bg-light_yellow">light_yellow</li>
        <li class="bg-light_yellow-orange">light_yellow-orange</li>
        <li class="bg-light_orange">light_orange</li>
        <li class="bg-light_orange-red">light_orange-red</li>
        <li class="bg-light_red">light_red</li>
        <li class="bg-light_red-magenta">light_red-magenta</li>
        <li class="bg-light_magenta">light_magenta</li>
        <li class="bg-light_magenta-violet">light_magenta-violet</li>
        <li class="bg-light_violet">light_violet</li>
        <li class="bg-light_violet-blue">light_violet-blue</li>
        <li class="bg-light_blue">light_blue</li>
        <li class="bg-light_blue-cyan">light_blue-cyan</li>
        <li class="bg-light_cyan">light_cyan</li>
        <li class="bg-light_cyan-green">light_cyan-green</li>
        <li class="bg-light_green">light_green</li>
        <li class="bg-light_green-yellow">light_green-yellow</li>

      </ul>
    </div>
  </div> <!-- /.row -->

</div><!-- \.cf wrap -->
<footer class="footer cf">
  Accessible <a href="https://codepen.io/MadeByMike/pen/sDpxg/">contrast mixins</a> by <a href="https://madebymike.com.au/writing/accessible-contrast-with-less-and-sass/">MadeByMike</a>
</footer> 
            
          
!
            
              // Edit the values of the sixteen variables, and make your own colorscheme.
// https://atelierbram.github.io/syntax-highlighting/atelier-schemes/cave/

$base00: hsl(265, 10%, 10%);  /* #19171c */
$base01: hsl(265, 9%, 15%);   /* #26232a */
$base02: hsl(265, 8%, 35%);   /* #585260 */
$base03: hsl(265, 7%, 40%);   /* #655f6d */
$base04: hsl(265, 6%, 50%);   /* #7e7887 */
$base05: hsl(265, 5%, 55%);   /* #8b8792 */
$base06: hsl(265, 15%, 89%);  /* #e2dfe7 */
$base07: hsl(265, 25%, 94%);  /* #efecf4 */
$base08: hsl(335, 48%, 51%);  /* #be4678 */
$base09: hsl(15, 48%, 45%);   /* #aa573c */
$base0A: hsl(30, 46%, 43%);   /* #a06e3b */
$base0B: hsl(180, 55%, 37%);  /* #2a9292 */
$base0C: hsl(205, 55%, 50%);  /* #398bc6 */
$base0D: hsl(230, 65%, 60%);  /* #576ddb */
$base0E: hsl(265, 75%, 63%);  /* #955ae7 */
$base0F: hsl(300, 50%, 50%);  /* #bf40bf */

$red:     $base08;
$orange:  $base09;
$yellow:  $base0A;
$green:   $base0B;
$cyan:    $base0C;
$blue:    $base0D;
$violet:  $base0E;
$magenta: $base0F; 

// https://codepen.io/MadeByMike/pen/sDpxg/ 
// Adapted from: https://gist.github.com/voxpelli/6304812
@function luma($color){ 
  $rgba: red($color), green($color), blue($color);
  $rgba2: ();
  @for $i from 1 through 3 {
    $rgb: nth($rgba, $i);
    $rgb: $rgb / 255;
    $rgb: if($rgb < .03928, $rgb / 12.92, pow(($rgb + .055) / 1.055, 2.4));
    $rgba2: append($rgba2, $rgb);
  }
  @return (.2126 * nth($rgba2, 1) + .7152 * nth($rgba2, 2) + 0.0722 * nth($rgba2, 3))*100;
}
@function contrast_ratio($color1, $color2) {
  $luma1: luma($color1) + 5;
  $luma2: luma($color2) + 5;
  $ratio: $luma1 / $luma2;
  @if $luma1 < $luma2 {
    $ratio: 1 / $ratio;
  } 
  @return $ratio;
}
 
@function text-contrast($color, $bgcolor: $color) {
  $threshold: 4.5; // 4.5 = WCAG AA,7= WCAG AAA
  $list: 20 30 40 50 60 70 80 90 100;
  @each $percent in $list {
    $lighter: lighten($bgcolor, $percent);
    $darker: darken($bgcolor, $percent);
    $darker-ratio: contrast_ratio($color, $darker);
    $lighter-ratio: contrast_ratio($color, $lighter);
    @if($lighter-ratio > $darker-ratio){
      @if ($lighter-ratio > $threshold){
        @return $lighter;
      }
    }
    @if($darker-ratio > $lighter-ratio){
      @if ($darker-ratio > $threshold){
        @return $darker;
      }
    }
  }
  @return if(lightness($color) < 51, #FFF, #000)
}

$yellow-orange: mix($yellow,$orange,50%);
$orange-red: mix($orange,$red,50%);
$red-magenta: mix($red,$magenta,50%);
$magenta-violet: mix($magenta,$violet,50%);
$violet-blue: mix($violet,$blue,50%);
$blue-cyan: mix($blue,$cyan,50%);
$cyan-green: mix($cyan,$green,50%);
$green-yellow: mix($yellow,$green,60%);
 
$dark01: $base00;
$dark02: mix($base00,$base01,50%);
$dark03: $base01;
$dark04: mix($base01,$base02,66.66666%);
$dark05: mix($base01,$base02,50%);
$dark06: mix($base01,$base03,50%); 
$dark07: mix($base02,$base03,50%);
$dark08: $base03;

$light01 : $base07;
$light02 : adjust-color($base07,$lightness: -5%);
$light03 : $base06;
$light04 : adjust-color($base05,$lightness: 25%);
$light05 : adjust-color($base05,$lightness: 20%);
$light06 : adjust-color($base05,$lightness: 15%);
$light07 : adjust-color($base05,$lightness: 7.5%);
$light08:  $base05;

$dark_yellow          : adjust-color($yellow,$lightness:-20%);
$dark_yellow-orange   : adjust-color($yellow-orange,$lightness:-20%);
$dark_orange          : adjust-color($orange,$lightness:-20%);
$dark_orange-red      : adjust-color($orange-red,$lightness:-20%);
$dark_red             : adjust-color($red,$lightness:-28%);
$dark_red-magenta     : adjust-color($red-magenta,$lightness:-25%);
$dark_magenta         : adjust-color($magenta,$lightness:-23%);
$dark_magenta-violet  : adjust-color($magenta-violet,$lightness:-26%);
$dark_violet          : adjust-color($violet,$lightness:-30%);
$dark_violet-blue     : adjust-color($violet-blue,$lightness:-30%);
$dark_blue            : adjust-color($blue,$lightness:-30%);
$dark_blue-cyan       : adjust-color($blue-cyan,$lightness:-26%);
$dark_cyan            : adjust-color($cyan,$lightness:-20%);
$dark_cyan-green      : adjust-color($cyan-green,$lightness:-18%);
$dark_green           : adjust-color($green,$lightness:-18%);
$dark_green-yellow   : adjust-color($green-yellow,$lightness: -20%);

$light_yellow         : adjust-color($yellow,$lightness:20%);
$light_orange         : adjust-color($orange,$lightness:20%);
$light_yellow-orange  : mix($light_yellow,$light_orange,50%);
$light_red            : adjust-color($red,$lightness:20%);
$light_orange-red     : mix($light_orange,$light_red,50%);
$light_magenta        : adjust-color($magenta,$lightness:20%);
$light_red-magenta    : mix($light_red,$light_magenta,50%);
$light_violet         : adjust-color($violet,$lightness:20%);
$light_magenta-violet : mix($light_magenta,$light_violet,50%);
$light_blue           : adjust-color($blue,$lightness:20%);
$light_violet-blue    : mix($light_violet,$light_blue,50%);
$light_cyan           : adjust-color($cyan,$lightness:20%);
$light_blue-cyan      : mix($light_blue,$light_cyan,50%);
$light_green          : adjust-color($green,$saturation:-25%,$lightness:20%);
$light_cyan-green     : mix($light_cyan,$light_green,50%);
$light_green-yellow   : adjust-color($green-yellow,$lightness: 15%);

$purple: $violet-blue;
$dark_purple: $dark_violet-blue;
$light_purple: $light_violet-blue;


.base00  { color: $base00;  }
.base01  { color: $base01;  }
.base02  { color: $base02;  }
.base03  { color: $base03;  }
.base04  { color: $base04;  }
.base05  { color: $base05;  }
.base06  { color: $base06;  }
.base07  { color: $base07;  }
.base08,
.red     { color: $red;     }
.base09,
.orange  { color: $orange;  }
.base0A,
.yellow  { color: $yellow;  }
.base0B,
.green   { color: $green;   }
.base0C,
.cyan    { color: $cyan;    }
.base0D,
.blue    { color: $blue;    }
.base0E,
.violet  { color: $violet;  }
.base0F,
.magenta { color: $magenta; }

.bg-base00 { background-color: $base00; color: text-contrast($base00); }
.bg-base01 { background-color: $base01; color: text-contrast($base01); }
.bg-base02 { background-color: $base02; color: text-contrast($base02); }
.bg-base03 { background-color: $base03; color: text-contrast($base03); }
.bg-base04 { background-color: $base04; color: text-contrast($base04); }
.bg-base05 { background-color: $base05; color: text-contrast($base05); }
.bg-base06 { background-color: $base06; color: text-contrast($base06); }
.bg-base07 { background-color: $base07; color: text-contrast($base07); }
.bg-base08 { background-color: $base08; color: text-contrast($base08); }
.bg-base09 { background-color: $base09; color: text-contrast($base09); }
.bg-base0a { background-color: $base0A; color: text-contrast($base0A); }
.bg-base0b { background-color: $base0B; color: text-contrast($base0B); }
.bg-base0c { background-color: $base0C; color: text-contrast($base0C); }
.bg-base0d { background-color: $base0D; color: text-contrast($base0D); }
.bg-base0e { background-color: $base0E; color: text-contrast($base0E); }
.bg-base0f { background-color: $base0F; color: text-contrast($base0F); }

.bg-dark01 { background-color: $dark01; color: text-contrast($dark01); }
.bg-dark02 { background-color: $dark02; color: text-contrast($dark02); }
.bg-dark03 { background-color: $dark03; color: text-contrast($dark03); }
.bg-dark04 { background-color: $dark04; color: text-contrast($dark04); }
.bg-dark05 { background-color: $dark05; color: text-contrast($dark05); }
.bg-dark06 { background-color: $dark06; color: text-contrast($dark06); }
.bg-dark07 { background-color: $dark07; color: text-contrast($dark07); }
.bg-dark08 { background-color: $dark08; color: text-contrast($dark08); }

.bg-light01 { background-color: $light01; color: text-contrast($light01); }
.bg-light02 { background-color: $light02; color: text-contrast($light02); }
.bg-light03 { background-color: $light03; color: text-contrast($light03); }
.bg-light04 { background-color: $light04; color: text-contrast($light04); }
.bg-light05 { background-color: $light05; color: text-contrast($light05); }
.bg-light06 { background-color: $light06; color: text-contrast($light06); }
.bg-light07 { background-color: $light07; color: text-contrast($light07); }
.bg-light08 { background-color: $light08; color: text-contrast($light08); }

.bg-yellow          { background-color: $yellow         ; color: text-contrast($yellow         );}
.bg-yellow-orange   { background-color: $yellow-orange  ; color: text-contrast($yellow-orange  );}
.bg-orange          { background-color: $orange         ; color: text-contrast($orange         );}
.bg-orange-red      { background-color: $orange-red     ; color: text-contrast($orange-red     );}
.bg-red             { background-color: $red            ; color: text-contrast($red            );}
.bg-red-magenta     { background-color: $red-magenta    ; color: text-contrast($red-magenta    );}
.bg-magenta         { background-color: $magenta        ; color: text-contrast($magenta        );}
.bg-magenta-violet  { background-color: $magenta-violet ; color: text-contrast($magenta-violet );}
.bg-violet          { background-color: $violet         ; color: text-contrast($violet         );}
.bg-violet-blue     { background-color: $violet-blue    ; color: text-contrast($violet-blue    );}
.bg-blue            { background-color: $blue           ; color: text-contrast($blue           );}
.bg-blue-cyan       { background-color: $blue-cyan      ; color: text-contrast($blue-cyan      );}
.bg-cyan            { background-color: $cyan           ; color: text-contrast($cyan           );}
.bg-cyan-green      { background-color: $cyan-green     ; color: text-contrast($cyan-green     );}
.bg-green           { background-color: $green          ; color: text-contrast($green          );}
.bg-green-yellow    { background-color: $green-yellow   ; color: text-contrast($green-yellow   );}

.bg-dark_yellow          { background-color: $dark_yellow          ; color: text-contrast($dark_yellow          );}
.bg-dark_yellow-orange   { background-color: $dark_yellow-orange   ; color: text-contrast($dark_yellow-orange   );}
.bg-dark_orange          { background-color: $dark_orange          ; color: text-contrast($dark_orange          );}
.bg-dark_orange-red      { background-color: $dark_orange-red      ; color: text-contrast($dark_orange-red      );}
.bg-dark_red             { background-color: $dark_red             ; color: text-contrast($dark_red             );}
.bg-dark_red-magenta     { background-color: $dark_red-magenta     ; color: text-contrast($dark_red-magenta     );}
.bg-dark_magenta         { background-color: $dark_magenta         ; color: text-contrast($dark_magenta         );}
.bg-dark_magenta-violet  { background-color: $dark_magenta-violet  ; color: text-contrast($dark_magenta-violet  );}
.bg-dark_violet          { background-color: $dark_violet          ; color: text-contrast($dark_violet          );}
.bg-dark_violet-blue     { background-color: $dark_violet-blue     ; color: text-contrast($dark_violet-blue     );}
.bg-dark_blue            { background-color: $dark_blue            ; color: text-contrast($dark_blue            );}
.bg-dark_blue-cyan       { background-color: $dark_blue-cyan       ; color: text-contrast($dark_blue-cyan       );}
.bg-dark_cyan            { background-color: $dark_cyan            ; color: text-contrast($dark_cyan            );}
.bg-dark_cyan-green      { background-color: $dark_cyan-green      ; color: text-contrast($dark_cyan-green      );}
.bg-dark_green           { background-color: $dark_green           ; color: text-contrast($dark_green           );}
.bg-dark_green-yellow    { background-color: $dark_green-yellow    ; color: text-contrast($dark_green-yellow    );}

.bg-light_yellow         { background-color: $light_yellow         ; color: text-contrast($light_yellow         );}
.bg-light_yellow-orange  { background-color: $light_yellow-orange  ; color: text-contrast($light_yellow-orange  );}
.bg-light_orange         { background-color: $light_orange         ; color: text-contrast($light_orange         );}
.bg-light_orange-red     { background-color: $light_orange-red     ; color: text-contrast($light_orange-red     );}
.bg-light_red            { background-color: $light_red            ; color: text-contrast($light_red            );}
.bg-light_red-magenta    { background-color: $light_red-magenta    ; color: text-contrast($light_red-magenta    );}
.bg-light_magenta        { background-color: $light_magenta        ; color: text-contrast($light_magenta        );}
.bg-light_magenta-violet { background-color: $light_magenta-violet ; color: text-contrast($light_magenta-violet );}
.bg-light_violet         { background-color: $light_violet         ; color: text-contrast($light_violet         );}
.bg-light_violet-blue    { background-color: $light_violet-blue    ; color: text-contrast($light_violet-blue    );}
.bg-light_blue           { background-color: $light_blue           ; color: text-contrast($light_blue           );}
.bg-light_blue-cyan      { background-color: $light_blue-cyan      ; color: text-contrast($light_blue-cyan      );}
.bg-light_cyan           { background-color: $light_cyan           ; color: text-contrast($light_cyan           );}
.bg-light_cyan-green     { background-color: $light_cyan-green     ; color: text-contrast($light_cyan-green     );}
.bg-light_green          { background-color: $light_green          ; color: text-contrast($light_green          );}
.bg-light_green-yellow   { background-color: $light_green-yellow   ; color: text-contrast($light_green-yellow   );}

// generic demo styles
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}
html {
  font-family: sans-serif;
  font-size: 16px;
  background-color: $base07;
}
html,
body {
  height: 100%;
}
body {
  margin: 0;
  font: 100%/1.5 AvenirNext-Regular, "Lucida Grande", "Segoe Ui", "Trebuchet Ms", sans-serif;
  background: inherit;
  color: #111;
  min-height: 100%;
  box-sizing: border-box;
}
h1, h2, h3 {
  color: #222;
  margin: 0;
  padding: 1rem 0 0;
  font-family: AvenirNextCondensed-DemiBold, "Lucida Grande", "Segoe Ui", "Trebuchet Ms", sans-serif;
}

.container {
  max-width: 100%;
}
.header,
.footer {
  padding: .5em 0;
  // background: darken($blue,25);
  // background: $dark-blue;
  background: $blue-cyan;
  color: $base07;
  width: 100%;
  text-align: center;
  text-shadow: darken($blue,50) 1px 1px 1px;
}
.header {
  border-bottom: 2px solid darken($blue,35);
}
.footer {
  border-top: 2px solid $blue;
  padding-bottom: 2em;
  letter-spacing: 1px;
}
.header a,
.footer a {
  color: lighten($yellow,25);
  text-decoration: none;
}

.header h1 .small {
  color: $base06;
}
.demo-tiles {
  overflow: hidden;
}
.wrap {
  margin-top: 1em;
  padding: 0 2em;
}
.cf:before,
.cf:after {
  content: " ";
  display: table;
}
.cf:after,
.clear {
  clear: both;
}
.unit {
  float: left;
  width: 25%;
  padding: 4em 0;
  text-align: center;
}
h1 {
  font-size: 2.5rem;
}
h2 {
  font-size: 2.25rem;
}
h3 {
  font-size: 2rem;
  margin: 1em 0 0 .35em;
}
.block-list {
  margin-bottom: 1em;
}
.block-list li {
  list-style: none;
  padding: .5em 1em;
}
@media (min-width:750px) {
  .container {
    padding-right: 5%;
    padding-left: 5%;
  }
  h1 {
    font-size: 2.75rem;
  }
  h2 {
    font-size: 2.5rem;
  }
  h3 {
    font-size: 2.25rem;
  }
  p {
    font-size: 1.25em;
  }
}

            
          
!
999px
Loading ..................

Console