SassでRGB->HSLに変換してみる

何かと計算しやすいHSLを扱いたい、でも色はRGBで管理してる、というわけでコンバーターを作ってみた。
RGB->HSLの変換式は下記を参照。

• HLS色空間 - Wikipedia
• RGBとHSLの相互変換ツールと変換計算式 - PEKO-STEP

Wikipediaは最小値基準の式で少し分かりにくい。
最大値で解説してるサイトが多かった印象。

@function RGBtoHSL($color){
  //rgbを分解し
  $r: red($color);
  $g: green($color);
  $b: blue($color);
  
  //最大値と最小値を探す
  $max: max($r, $g, $b);
  $min: min($r, $g, $b);
  
  $h: 0; 
  $s: 0;
  $l: ($max + $min) / 2;//輝度L

  @if($max == $min) {
    //最大と最小が同じ（=rgb３つとも同じ値）なら色相・彩度は0
    $h: 0;
    $s: 0;
  }
  @else {

    //色相H(度): 赤・緑・青がそれぞれ最大の場合の色相
    @if($max == $r){ $h : 60 * (($g - $b) / ($max - $min))}
    @if($max == $g){ $h : 60 * (($b - $r) / ($max - $min)) + 120}
    @if($max == $b){ $h : 60 * (($r - $g) / ($max - $min)) + 240}
    
    //彩度S(%)
    @if($l < 127){
      //収束値が127以下の時の彩度
      $s: ($max - $min) / ($max + $min);
    }
    @else {
      //収束値が128以上の時の彩度
      $s: ($max - $min) / (510 - $max - $min); 
    }
  }
  
  // 色相がマイナス値になってたら360足して0-360の範囲にする
  @if($h < 0){
    $h: $h + 360;
  }
  
  @return $h, $s * 100, $l / 255 * 100;
}

//ex) RGBtoHSL(#d24678);
// -> 338.57142857, 60.86956522, 54.90196078
// 小数点第２位以下は丸めても良いかも。

感想

• 誰得と聞かれると私得。某案件でcolorhexaを使って手作業でrgb->hsl変換するの大変だった。
• JSでやろうとする場合、すでにTinyColorなどの洗練されたライブラリがある。
• sin()やcos()も欲しい…。