color-gen.scss

@use 'sass:color';
@use 'sass:math';



@function scaler($weight, $value, $minimum, $maximum) {
  $store-max: $maximum;

  @if ($maximum > 100) {
    $maximum: 100;
    $value: math.div(($value * $maximum), $store-max);
  }

  $interval: ($maximum - $value);
  $scaling: math.div(($weight * $interval), $maximum);
  $value: ($value + $scaling);

  $value: math.div(($value * $store-max), $maximum);
  $value: ($value % $store-max);

  @return $value;
}


@function create-color($color, $mod, $h, $s, $l, $hmin, $hmax) {
  $ch: color.hue($color);
  $h: scaler($h, $ch, $hmin, $hmax);

  $color: color.change($color, $hue: $h);
  $color: color.scale($color, $saturation: $s);
  $color: color.mix($mod, $color, $l);

  @return $color;
}

$cb: rgb(142, 142, 147);
$ct: rgb(255, 59, 48);

$cbh: color.hue($cb);
$cbs: color.saturation($cb);
$cbl: color.lightness($cb);

$cth: color.hue($ct);
$cts: color.saturation($ct);
$ctl: color.lightness($ct);

$co: create-color($cb, white, -0.44, 99.6%, 6.2%, 0, 30);

$coh: color.hue($co);
$cos: color.saturation($co);
$col: color.lightness($co);


#debug {
  /* color base */
  all: $cbh;
  all: $cbs;
  all: $cbl;
  /* color target */
  all: $cth;
  all: $cts;
  all: $ctl;
  /* color diffs */
  all: ($cth - $cbh);
  all: ($cts - $cbs);
  all: ($ctl - $cbl);
  /* color output */
  all: $coh;
  all: $cos;
  all: $col;
  /* color output pass */
  all: ($coh == $cth);
  all: ($cos == $cts);
  all: ($col == $ctl);
  /* more */
  color: $cb;
  color: $ct;
  color: $co;
  all: ($co == $ct);
}