1. m-shinozaki

    Posted

    m-shinozaki
Changes in title
+SassでRGB->HSLに変換してみる
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,69 @@
+何かと計算しやすい[HSL](http://cweb.canon.jp/camera/picturestyle/editor/matters05.html)を扱いたい、でも色はRGBで管理してる、というわけでコンバーターを作ってみた。
+RGB->HSLの変換式は下記を参照。
+
+- [HLS色空間](https://ja.wikipedia.org/wiki/HLS%E8%89%B2%E7%A9%BA%E9%96%93) - Wikipedia
+- [RGBとHSLの相互変換ツールと変換計算式](http://www.peko-step.com/tool/hslrgb.html) - PEKO-STEP
+
+Wikipediaは最小値基準の式で少し分かりにくい。
+最大値で解説してるサイトが多かった印象。
+
+
+
+```scss
+@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) {
+ //最大と最小が同じ(=rgb3つとも同じ値)なら色相・彩度は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
+// 小数点第2位以下は丸めても良いかも。
+```
+
+# 感想
+
+- 誰得と聞かれると私得。某案件でcolorhexaを使って手作業でrgb->hsl変換するの大変だった。
+- JSでやろうとする場合、すでに[TinyColor](https://github.com/bgrins/TinyColor)などの洗練されたライブラリがある。
+- `sin()`や`cos()`も欲しい…。
+
+