HSB Color Palette

hsb-color-palette.markdown

HSB Color Palette

HSB Color palette generating color variations as described by https://medium.com/@erikdkennedy/color-in-ui-design-a-practical-framework-e18cacd97f9e

A Pen by HARUN PEHLİVAN on CodePen.

License.

index.pug

#c
  - var v = 5
  while v > 0
    - --v
    .v
      - var c = 5
      while c > 0
        - --c
        .c

style.scss

@import url('https://fonts.googleapis.com/css?family=Roboto');

// Based on: https://www.sitepoint.com/hsb-colors-with-sass/
@function hsb($h-hsb, $s-hsb, $b-hsb) {
  @if $b-hsb == 0 {
    @return hsl(0, 0, 0)
  } @else {
    $l-hsl: ($b-hsb/2) * (2 - ($s-hsb/100));
    $s-hsl: ($b-hsb * $s-hsb) / if($l-hsl < 50, $l-hsl * 2, 200 - $l-hsl * 2);
    @return hsl($h-hsb, $s-hsl, $l-hsl);
  }
}

// Based on: https://medium.com/@erikdkennedy/color-in-ui-design-a-practical-framework-e18cacd97f9e
@function hsb-variation($h, $s, $b, $variation: 0) {
  $variation: $variation - 3;
  // Hue adjustment
  // Lighten: move hue by 2 towards the high luminosity peak (0°, 120°, 240°)
  // Darken: move hue by 2 towards the low luminosity peak (60°, 180°, 300°)
  @if $variation != 0 {
    $h-delta: 2 * abs($variation);
    $slice: 0;
    @if $variation < 0 {   // Lighten
      $slice: $h % 120;
    } @else {              // Darken
      $slice: ($h + 60) % 120;
    }
    
    @if $slice - 60 < 0 {
      @if $slice - 60 - $h-delta < 0 {
        $h: $h + $h-delta;
      } @else {
        $h: $h + ($slice - 60);
      }
    } @else {
      @if $slice - 60 - $h-delta > 0 {
        $h: $h - $h-delta;
      } @else {
        $h: $h - ($slice - 60);
      }
    }
  }
  
  // Saturation adjustment
  // Lighten: reduce saturation by 10
  // Darken: increase saturation by 10
  $s-delta: 10 * $variation;
  $s: $s + $s-delta;
  $s: max($s, 0);
  $s: min($s, 100);
  
  // Brightness adjustment
  // Lighten: increase brightness by 10
  // Darken: reduce brightness by 10
  $b-delta: -20 * $variation;
  $b: $b + $b-delta;
  $b: max($b, 0);
  $b: min($b, 100);
  
  @return (h: $h, s: $s, b: $b);
}

body {
  font-size: 0;
  margin: 0;
  position: relative;
}

#c {
  position: relative;
  width: 100vw;
  height: 100vh;
}

.v {
  height: 20%;
}

.c {
  display: inline-block;
  width: 20%;
  height: 100%;
  vertical-align: top;
  white-space:pre; // Needed for line-breaks in the :after content 
  
  &:after {
    color: white;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    line-height: 12px;
    position: relative;
    top: 5px;
    left: 5px;
    mix-blend-mode: overlay;
  }
}

$v1: (h: 360/5*0, s: 70, b: 60);
$v2: (h: 360/5*1, s: 70, b: 60);
$v3: (h: 360/5*2, s: 70, b: 60);
$v4: (h: 360/5*3, s: 70, b: 60);
$v5: (h: 360/5*4, s: 70, b: 60);

$vs: ($v1, $v2, $v3,  $v4,  $v5);

// Go through each row
@for $i from 1 through length($vs) {
  $v: nth($vs, $i);
  .v:nth-of-type(#{$i}) {
    // Go through each cell
    @for $j from 1 through 5 {
      .c:nth-of-type(#{$j}) {
        $hsb: hsb-variation(map-get($v, h), map-get($v, s),map-get($v, b), $j);
        $h: map-get($hsb, h);
        $s: map-get($hsb, s);
        $b: map-get($hsb, b);
        background-color: hsb($h, $s, $b);
        &:after {
          content: "H: " + $h + "°\A S: " + $s + "\A B: " + $b + "";
        }
      }
    }
  }
}