フーノページTOP

Vectorator使い方TOP

SVGアニメーションTOP

WEBサイト作り方TOP

「ふ」のtwitter。記事を更新するとつぶやきます。

コメント・お問い合わせはこちら。

• SVGアニメーション、作り方。
  

  2020.06.30
  静的コンテンツの枠を飛び出す。

• CSSアニメーション、作り方。
  

  2021.04.17
  webアニメーションを１から学ぼう♪

⬆︎SVGついてのまとめページ、CSSアニメーションの基本コーナーはこちら。

hslとは？

RGBが光の３原色（r,g,b）と言われる各成分を機械的に配合するのに対し、HSLは人の見た目で受ける印象「hue（色相）、saturate（彩度）、luminance（輝度）」の３つを指標に色を構成します。

hue（色相）は色合いを決定します。「赤系」「緑系」といった感じです。
色相は「色相環」という輪のような形でイメージされ、値は0〜360°の範囲で指定します。

saturate（彩度）は色の鮮やかさ。0〜100%の範囲で指定され、100%が純色で最も鮮やかとなり、0%になると完全な白黒に成増。

luminance（輝度）は見た目の明るさです。
50%が純色。それより値が大きくなると徐々に明るくなり、100%で完全な白に。50%より小さくなるにつれ暗くなり、0%で完全な黒に成増。

ご覧のとおり、HSLの各パラメーターは「視覚化」することができます。つまり直感的に色調整が行えるということですね。

ちなみにCGソフトを扱う方にとっては「HSB」のほうが親しみがあるかと思います。
HSBもRGBに比べると人間の感覚に近いパラメータで構成されていますが、CSSでそのまま指定することができません。

• HSL、HSBの違いについて〜Vectornator外伝。
  

  2020.05.15
  〽️ 未知のパラメータを理解してブレンドモードに臨む。

「HSB」と「HSL」の違いは、⬆︎の記事で詳しく紹介しています。

変換コード。

RGB値からHSL値を求めるJavaScriptの関数を以下に示します。
コーディングする方であれば、いちいち外部の変換ツールにアクセスするよりも、自身のHTML内でこの関数をいつでも呼び出せるようにしておいたほうが楽ちんです。

function to_hsl(red,green,blue) { 「「３//rgbを0〜1の範囲（float）に変換」」 const r = red/255; const g = green/255; const b = blue/255; 「「３//rgbの最大値と最小値を求める」」 const max = Math.max(r,g,b); const min = Math.min(r,g,b); 「「３//(max-min)、(max+min)の値は計算時によく使うので、」」 「「３//それらを定数にぶち込んでおく」」 const sa = max-min; const wa = max+min; 「「３//出力する変数」」 let h; let s; let l; 「「３//輝度 l」」 l = 100*wa/2; 「「３//彩度sはlが50以下か否かで決まる。」」 if(l <= 50) { s = 100*(sa)/wa; } else { s = 100*(sa)/(1.992185-wa); } 「「３//色相hはrgbのうちどれがmax値なのかで算出方法が変わる」」 switch(max) { case r: h = 60*(g-b)/sa; break; case g: h = (60*(b-r)/sa)+120; break; case b: h = (60*(r-g)/sa)+240; } 「「３// hが負の値になった場合、色相環を１周させる。」」 if(h<0) { h = h+360; } console.log(h); console.log(s); console.log(l); }

引数にRGB値を10進数表記で入力すると、HSL値がconsoleに表示されます。
CYAN（0,160,233）で試してみましょう。

to_hsl(0,160,233);

結果がconsoleに表示されました。
hslでCYANを指定するには、

色相：198 彩度：100% 輝度：45%

ということに成増。小数点以下は切り捨てています。

ちなみにグレーや白など、モノトーン色の値を入力すると、色相（hue）にはNaNが返ります。
モノトーン色はrgbの各値が全く同じなのが原因です。算出式の中で除算の分子が0になってしまうためです。

しかし問題はありません。モノトーン色は彩度が「0」で固定されているため、色相の影響を受けません。輝度の値のみが結果に影響します。
実際に色指定する際には「hue = 0」とでもしておけば良いでしょう。

HSLでの色指定。

取得したHSL値を使って、配色してみましょう。
hslでの色指定は⬇︎のように記述します。

#element { background-color:「「１hsl(100,50%,50%)」」; }

hslの後ろにある( )の中には色相（数値のみで単位なし）、彩度（%) 、輝度（%)の順に指定します。

背景色がマットな緑のdiv要素が３つ。
現在RGB値は（133,162,0）です。このマットな感じを保ったまま、色合いだけを変えてみましょう。

to_hsl(133,162,0); 　「「４>> 70 100 31」」

はじめにto_hsl関数を使ってHSL値を出力しました。

３つのdiv要素の彩度と輝度はそのまま。
「div2」以外の色相を変化させてみます。

#div1 { background-color:hsl(「「１0」」,100%,31%); } #div2 { background-color:hsl(70,100%,31%); } #div3 { background-color:hsl(「「１200」」,100%,31%); }

マットな感じをもたせたまま、色合いを変化させることができました。
調和の取れたカラーバリエーションの完成です、簡単ですね♪

今度は左の赤基調を固定、右に行くにつれ明るくしたい。
色相と彩度は固定で、輝度を変化させてみましょう。

#div1 { background-color:hsl(0,100%,31%); } #div2 { background-color:hsl(0,100%,「「１51%」」); } #div3 { background-color:hsl(0,100%,「「１71%」」); }

左から暗→明とすることができました。

「補色」は、色相環において対角の位置にある関係の色です。コントラストが最も大きくなります。
補色を作るのもhslなら秒殺です。現在の色相を180°回転させればいいのですね。

ついでに彩度を0にしてモノクロカラーも作ってみましょう。「div1」の色を基準とします。

#div1 { background-color:hsl(0,100%,31%); } #div2 { background-color:hsl(「「１180」」,100%,31%); } #div3 { background-color:hsl(0,「「１0%」」,31%); }

はい、できました。
RGB値をHSL値に変換するだけで、配色作業がこんなにも便利に！