.hoge { background-color: hsl(0, 100%, 50%) // 純色の赤 color: hsl(60, 100%, 80%) // 明るい黄色 } rgbによる色指定では、「ちょっと色を明るくしたい、もうちょっと赤を強くしたい」などといったときに、直感的に修正しにくいため、カラーピッカー等を用いてrgb値を確認する必要があったのですが、HSLによる色指定であれば、色相、彩度、明度を調節することで簡単に色を調節することができます。 CSS3による新機能のため、使える場面が限られるのですが、使える場合には是非使ってみていただければと思います。 ちなみに、HSLについて調べている中で、RGBからHSLに変換する変換式とHSLからRGBに変換する変換式を見つけたので、javascriptで実装してみました。 以下のサンプルページで変換を試すことができるので、ぜひ触って
![【CSS3】HSL色空間による色指定のすゝめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/fb82e018058b1db46e904d436ec4d1ed4e27d2c4/height=288;version=1;width=512/https%3A%2F%2Fblog.asial.co.jp%2Fwp-content%2Fuploads%2F2022%2F07%2Fdefault.png)