Playing with Color swatches

_color-swatches-input-HTML.jade

.wrapper
  h1
    |Playing with Color swatches
  ul.color-swatch
    li
    li
    li
    li
    li
    li
  footer
    p
      |Inspirated from this article 
      |<a href="https://colorhunt.co/blog/february-2016-color-palettes/">6 Killer Color Palettes by ColorHunt</a> 
      |and this palette :  
      |<a href="https://colorhunt.co/c/4802">https://colorhunt.co/c/4802</a>

browserslist

> 1%
last 2 versions

color-swatches-input.scss

// ----
// libsass (v3.5.0.beta.2)
// ----

@import "bourbon/bourbon";



$base-font-family: sans-serif !default;
$base: pink !default ;


@function monochromatic-scheme($base){
  $sheme: (
    'primary': $base,
    'secondary': tint($base,40%),
    'tertiary': tint($base,70%),
    'complementary': complement($base)
  );
  @return $sheme;
}

@function shades($base){
  $shades: (
    xlight: tint($base, 60%),
    lighter: tint($base, 40%),
    light: tint($base, 20%),
    base: $base ,
    dark: shade($base, 20%) ,
    darker: shade($base, 40%),
    xdark: shade($base, 60%)
  );
  @return $shades;
}

// Analogous
// before and after in the color wheel, with +/- 30deg
// @param $distance 30!default
@function analogous_scheme($base,$distance: 30){
  $complementary: complement($base);
  $scheme: (
    'primary': $base,
    'secondary': adjust_hue($complementary, $distance*1deg),
    'tertiary': adjust_hue($complementary, -$distance*1deg ),
    'complementary': $complementary,
  );
  
  @return $scheme;
}
// Triadic
// 240, 120
@function triadic-scheme($base){
  $scheme: (
    'primary': $base,
    'secondary': adjust_hue($base,240deg),
    'tertiary': adjust_hue($base,120deg),
    'complementary': complement($base)
  );
  @return $scheme;
}
// Tetradic color scheme
// 180, 240, 60 degrees
@function tetradic-scheme($base){
  $sheme:(
    'primary': $base,
    'secondary': adjust_hue($base,90deg),
    'tertiary': adjust_hue(complement($base), 90deg),
    'complementary': complement($base),
  );
  @return $sheme;
}



@mixin background-gradient($colors, $deg:50){
  $_colors-stops: ();
  @each $name,$value in $colors{
    $_colors-stops: append(unquote($value),$_colors-stops,'comma')
  }
  @include linear-gradient(#{$deg}deg,$_colors-stops);
}

@mixin color-swatch($colors){
  $i: 1;
  @each $name,$value in $colors {

    &:nth-child(#{$i}){
      background-color: unquote($value);
      &::after {
        content: '#{$i} #{$name} : #{$value}';
        color: white;
        background-color: rgba(black, .6);
        top: .5em;
        right: -5000px;
        padding: .3em;
        transition: all 0.5s ease-out;
      }
      &:hover{
        &:after {
          right: -1em;
        }
      }
    }
    

    $i: $i+1;
  }
}

$debug:'';
@function debug($map,$var_name: 'colors'){
  $pre: '$#{$var_name}: (\A';
  $indent: '  ';
  @each $key, $value in $map {
    $type: type-of($key);
  	$debug: $debug + '#{$indent}#{$key} : #{$value}, \A' !global;
  }
  $post: ');';
  @return quote($pre+$debug+$post);
}
@mixin debug($map,$var_name: 'colors'){
  text-decoration: none;
  $debug: debug($map,$var_name);
  
  &:before {
    content: '#{$debug}';
    position: relative;
    z-index: 5;
    
    top:0;
    left:0;
    margin:0;
    width: 100%;
    height: auto;
    padding: 2rem;
    background: white;
    display: block;
    color: #C93900;
    font-family: 'Andale Mono',monospace;
    opacity: .8;
    white-space: pre;
  }
}


// Predefine color schemes
$shades: shades($base);
$monochromatic: monochromatic-scheme($base);
$analogous: analogous_scheme($base);
$triadic: triadic-scheme($base);
$tetradic: tetradic-scheme($base) ;


// User palettes
//http://colorhunt.co/c/4802
$colors: (
  'primary': #96CD39,
  'secondary': #F5FF65,
  'tertiary': #FFBA47,
  'quad': #FF5B44
);
// http://colorhunt.co/c/62260
$colors2: (
  '1': #2A363B,
  '2': #E84A5F,
  '3': #FF847B,
  '4': #FECEA8
);



// USE
// $swatch: shades($base);
// $swatch: $colors;
// $swatch: $colors2;
// $swatch: $monochromatic;
// $swatch: $triadic;
// $swatch: $tetradic;
// $swatch: $analogous; 
// $swatch: analogous_scheme($base); 
// $swatch: analogous_scheme($base, 40);

$swatch: map-merge($tetradic, ('accent': blue ) );


body {
  font-family: $helvetica ;
  height:100vh;
  padding: 3rem;
  margin:0;
  @include background-gradient($swatch,-45);
  //@include debug($swatch);
}

.wrapper{
  max-width:600px;
  margin: 0 auto;
  
}

h1,p {
  font-family: $lucida-grande;
  text-align: center;
  margin: 2rem 0;
  
}

ul {
  list-style-type: none;
  margin:0;
  padding:0;
}

.color-swatch{
  
  li {
    display:block;
    position:relative;
    width:100%;
    height:100px;
    background-color: silver;
    /* offset-x | offset-y | blur-radius | color */
    box-shadow: 5px 5px 5px rgba(black, .8);

    @include color-swatch($swatch);
    
    &:nth-child(1){
      @include border-top-radius(10px);
    }
    
    &:nth-last-child(1){
      @include border-bottom-radius(10px);
    }
    
    &::after {
      //color: white;
      display:block;
      padding: 10px;
      position: absolute;
      top: 0;
      right: 0;
    }

  }
}

color-swatches-output.css

body {
  font-family: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
  height: 100vh;
  padding: 3rem;
  margin: 0;
  background-color: blue;
  background-image: -webkit-linear-gradient(-45deg, blue, #c0fff4, #d5c0ff, #ebffc0, pink);
  background-image: -webkit-linear-gradient(to, blue, #c0fff4, #d5c0ff, #ebffc0, pink, );
  background-image: linear-gradient(to ,blue, #c0fff4, #d5c0ff, #ebffc0, pink, );
}

.wrapper {
  max-width: 600px;
  margin: 0 auto;
}

h1, p {
  font-family: "Lucida Grande", "Tahoma", "Verdana", "Arial", sans-serif;
  text-align: center;
  margin: 2rem 0;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.color-swatch li {
  display: block;
  position: relative;
  width: 100%;
  height: 100px;
  background-color: silver;
  /* offset-x | offset-y | blur-radius | color */
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.8);
}

.color-swatch li:nth-child(1) {
  background-color: pink;
}

.color-swatch li:nth-child(1)::after {
  content: "1 primary : pink";
  color: white;
  background-color: rgba(0, 0, 0, 0.6);
  top: .5em;
  right: -5000px;
  padding: .3em;
  -webkit-transition: all 0.5s ease-out;
          transition: all 0.5s ease-out;
}

.color-swatch li:nth-child(1):hover:after {
  right: -1em;
}

.color-swatch li:nth-child(2) {
  background-color: #ebffc0;
}

.color-swatch li:nth-child(2)::after {
  content: "2 secondary : #ebffc0";
  color: white;
  background-color: rgba(0, 0, 0, 0.6);
  top: .5em;
  right: -5000px;
  padding: .3em;
  -webkit-transition: all 0.5s ease-out;
          transition: all 0.5s ease-out;
}

.color-swatch li:nth-child(2):hover:after {
  right: -1em;
}

.color-swatch li:nth-child(3) {
  background-color: #d5c0ff;
}

.color-swatch li:nth-child(3)::after {
  content: "3 tertiary : #d5c0ff";
  color: white;
  background-color: rgba(0, 0, 0, 0.6);
  top: .5em;
  right: -5000px;
  padding: .3em;
  -webkit-transition: all 0.5s ease-out;
          transition: all 0.5s ease-out;
}

.color-swatch li:nth-child(3):hover:after {
  right: -1em;
}

.color-swatch li:nth-child(4) {
  background-color: #c0fff4;
}

.color-swatch li:nth-child(4)::after {
  content: "4 complementary : #c0fff4";
  color: white;
  background-color: rgba(0, 0, 0, 0.6);
  top: .5em;
  right: -5000px;
  padding: .3em;
  -webkit-transition: all 0.5s ease-out;
          transition: all 0.5s ease-out;
}

.color-swatch li:nth-child(4):hover:after {
  right: -1em;
}

.color-swatch li:nth-child(5) {
  background-color: blue;
}

.color-swatch li:nth-child(5)::after {
  content: "5 accent : blue";
  color: white;
  background-color: rgba(0, 0, 0, 0.6);
  top: .5em;
  right: -5000px;
  padding: .3em;
  -webkit-transition: all 0.5s ease-out;
          transition: all 0.5s ease-out;
}

.color-swatch li:nth-child(5):hover:after {
  right: -1em;
}

.color-swatch li:nth-child(1) {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.color-swatch li:nth-last-child(1) {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.color-swatch li::after {
  display: block;
  padding: 10px;
  position: absolute;
  top: 0;
  right: 0;
}

color-swatches-rendered.html

<div class="wrapper">
  <h1>Playing with Color swatches</h1>
  <ul class="color-swatch">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <footer>
    <p>
      Inspirated from this article 
      <a href="https://colorhunt.co/blog/february-2016-color-palettes/">6 Killer Color Palettes by ColorHunt</a> 
      and this palette :  
      <a href="https://colorhunt.co/c/4802">https://colorhunt.co/c/4802</a>
    </p>
  </footer>
</div>