GgzXoV

GgzXoV.markdown

GgzXoV

A Pen by Chris Hurst on CodePen.

License.

index.html

<div class="palette">
  <div class="swatch swatchsgured"></div>
  <div class="swatch lightensgured"></div>
  <div class="swatch darkensgured"></div>
  <div class="swatch desaturatesgured"></div>  
  
  <div class="swatch swatchmedblue"></div>
  <div class="swatch lightenmedblue"></div>
  <div class="swatch darkenmedblue"></div>
  <div class="swatch desaturatemedblue"></div>  
  
  <div class="swatch swatchvetgreen"></div>
  <div class="swatch lightenvetgreen"></div>
  <div class="swatch darkenvetgreen"></div>
  <div class="swatch desaturatevetgreen"></div>
  
  <div class="swatch swatchartspurple"></div>
  <div class="swatch lightenartspurple"></div>
  <div class="swatch darkenartspurple"></div>
  <div class="swatch desaturateartspurple"></div>
 
  <div class="swatch swatchdefaultblue"></div>
  <div class="swatch lightendefaultblue"></div>
  <div class="swatch darkendefaultblue"></div>
  <div class="swatch desaturatedefaultblue"></div>
</div>

style.scss

@import "compass/css3";
$baseColor: (
  sgured: rgb(179,8, 56),
  medblue: rgb(0, 36, 93),
  vetgreen: rgb(120, 162, 47),
  artspurple: rgb(82, 36, 127),
  defaultblue: #455d77
);

body {
  margin:0;
}
* { 
  box-sizing:border-box;
}
.palette {
  width: 100%;
  margin: 0 auto; 
  font-family:sans-serif;
  background: #bcbcbc;
}

.swatch {
  position:relative;
  float:left;
  width: 5%;
  height:0;
  padding-bottom:20%;
}

@each $baseColor, $bgcolor in $baseColor {
  .swatch#{$baseColor} {
    background: $bgcolor;
  }
  .lighten#{$baseColor} {
    background: lighten($bgcolor, 10%);
  }
  .darken#{$baseColor} {
    background: darken($bgcolor, 10%);
  }
  .desaturate#{$baseColor} {
    background: desaturate($bgcolor, 10%);
  }
}