CSSでHSLおよびHSLaカラーを使用する方法

CSSでHSLおよびHSLa色を使用する方法と、それらがRGB/RGBaおよびHexと異なる点を学びます。

HSLとHSLaはCSSのカラーメソッドであり、HexまたはRGB / RGBaの代わりに使用して、より多くの実世界を適用できます。 あなたのウェブサイトへの色。

HSLとHSLaはCSSの世界ではやや新しいものですが、一般的な色の世界では、1970年代から存在しています。

HSL対HSLa：

• HSLはHueSaturationLightnessの略です
• HSLaはHueSaturationLightnessAlphaの略です

HSLaはHSLの拡張であり、透明度の値（または不透明度）を指定するために使用できるアルファチャネルを備えています。 HSLとHSLaは、RGBとRGBaが互いに異なるのと同じように異なります。

HSL/HSLaの使用法

HSLとHSLaを使用するために、CSSは2つのカラー関数hsl()を提供します およびhsla() 。

基本的なHSLの使用法：

div {
    background-color:hsl(0, 100%, 50%); /* Red */
}

HSLaの基本的な使用法：

div {
    background-color:hsla(0, 100%, 50%, 0.6);
}

HSLは16進数やRGBよりも優れていますか？

HSLがRGBやHexよりも優れているかどうか疑問に思われるかもしれません。 HSLがCSS言語に追加されたのには理由があるはずですよね？

HSLが優れているとは言い難い 16進数やRGBよりも（一部の人はその点を指摘しますが）。何をしたいかによります。

HSLの背後にある考え方は、現実の世界を模倣した直感的なカラーフォーマットを提供することです。 HSLを使用すると、色の明暗を調整して、表現を変更できます。 色自体を変更せずに色の。

16進数とRGBではそれができません。

たとえば、今部屋の色を見ると、それらの正確な色を認識する方法は、次のようなものからの光の結果です。

• ウィンドウズ
• ランプ
• キャンドル
• 光源の組み合わせ

現在、窓から自然光が差し込んでいるとしましょう。

さあ、カーテンを下ろしてください。これはあなたの部屋から明るさを取り除き、あなたの部屋のすべての色の知覚を変えます。

部屋のすべてのアイテムの色は、カーテンを下ろす前と比べて、それらの色の暗いバージョンのように見えます。

ただし、これが要点です：

明度を削除しても、部屋にあるものの実際の色は変わりません。知覚が変わります。 それらの色の明るいバージョンから暗いバージョンへ。

ここで、前後に部屋の写真を撮ると カーテンを引き下げてから、RGB形式の前/後の色の値を取得すると、前/後の色は2つの異なる色になります。同じことが16進色にも当てはまります。

ただし、HSLでは2つの異なる色は提供されませんが、同じ色で明度の値が異なります（HSLのL）。

それで、あなたの部屋に茶色のクルミ色のテーブルがあるとしましょう。ここで、カーテンを引き上げた状態で1枚、カーテンを引き下げた状態で1枚の写真を撮ります。

前/後の画像の16進値とRGB値は、それぞれ2つの異なるカラー値になります。

前/後の写真のHSL値は同じ色になりますが、明度の値は異なります。

ある人はそれを主張するでしょう：

• HexとRGBはより機械可読です
• HSLは人間が読める形式です

上記は、3つのカラー方法すべてをすでに理解し、経験しているほとんどの人におそらく当てはまりますが、あなたの経験は異なる可能性があります。

私はいつも、人々は彼らが最もすることを最もよく行うと言います。したがって、HexまたはRGBの使用経験が長年あり、HSLの経験がゼロの場合、HSLを最初に読むのはおそらく難しいでしょう。

HSLの違いを要約すると：

• HSLを使用すると、色自体を変更せずに、色の明るさと暗さを変更できます。
• RGBとHexは、色自体も変更せずに、色の明るさと暗さを変更することはできません。