CSS HSL Formulas

mas.scss

$value: 100;
$value2: $value + 24;

$A: 100 / 12;
$B: 360 / 12;

$bgcolor: hsl($value, $A * 12, $A * 10 - ($A / 4) * 1 );

$color-1: hsl($value, 72%, 83%);
$color-2: hsl($value2 + $B, $A * 8, $A * 8);
$color-3: hsl($value2 + $B - 12, $A * 8, $A * 9);
$color-4: hsl($value2 + $B - 6,  $A * 11, $A * 8);

BODY {
  background-color: $color-1;
}

#main {
  color: $color-2;
  font-size: 32px;
  
  height: 128px;
  width: 128px;
  
  background-color: $bgcolor;
  
  a {
    font-weight: bold;
    color: $color-3;
    
    &:hover { color: $color-4; }
  }
}