hsb-hsl.scss

@function hsb($hue, $saturation, $brightness, $alpha: 1, $hsl-saturation: '') {
  @if $brightness == 0 {
    @return hsla(0, 0, 0, $alpha);
  } @else {
    $hsl-lightness:  (2 - $saturation / 100) * ($brightness / 2);
    $hsl-saturation: ($brightness * $saturation) / if($hsl-lightness < 50, $hsl-lightness * 2, 200 - $hsl-lightness * 2);
    @return hsla($hue, $hsl-saturation, $hsl-lightness, $alpha);
  }
}


@function hex-hsb($hex, $saturation:null, $brightness:null, $alpha:1) {
  $r: red($hex)   / 255;
  $g: green($hex) / 255;
  $b: blue($hex)  / 255;

  // Convert to RGB
  $rgb-max:   max($r, $g, $b);
  $rgb-min:   min($r, $g, $b);
  $rgb-delta: $rgb-max - $rgb-min;

  $hue: hue($hex);

  @if $saturation == null {
    @if $rgb-max == 0 {
    	$saturation: 0;
    } @else {
    	$saturation: $rgb-delta / $rgb-max;
    }
    $saturation: $saturation * 100;
  }

  @if $brightness == null {
    $brightness: $rgb-max * 100;
  }

  // Convert to HSLA
  $hsl-lightness:  (2 - $saturation / 100) * ($brightness / 2);
  $hsl-saturation: ($brightness * $saturation) / if($hsl-lightness < 50, $hsl-lightness * 2, 200 - $hsl-lightness * 2);

  @return hsla($hue, $hsl-saturation, $hsl-lightness, $alpha);
}