A Pen by Luis Reis.

A-Pen-by-Luis-Reis.markdown

A Pen by Luis Reis

A Pen by Luis Reis on CodePen.

License.

index.html

<div class="block c1"></div>
<div class="block c2"></div>
<div class="block c3"></div>
<div class="block c4"></div>

style.scss

@import "compass";
$color: red;
$inverse: hsl(120deg, 100%, 100%);

.block {
  display: inline-block;
  width: 20px;
  height: 20px;
}

.c1 { background-color: $color; }
.c2 { background-color: adjust-hue($color, 0.33 * (hue($inverse) - hue($color))); }
.c3 { background-color: adjust-hue($color, 0.67 * (hue($inverse) - hue($color))); }
.c4 { background-color: adjust-hue($color, 1.00 * (hue($inverse) - hue($color))); }