私たちはすべて、色が何でもであることを知っています。それがウェブサイトのレイアウト、画像、ビデオ、またはその他のグラフィカル要素であっても同様です。色は、光、目、および脳の間の相互作用の結果として、主観的な経験になります。ウェブサイトに色を加えることは、レイアウトやグラフィカル要素に新たな命を与えます。誰も白、黒、グレーの色を持つウェブページを訪れたくありません。色は、人の目にとってより現実的で魅力的な要素を見せます。
色をウェブサイト上に使用する際には、理論的なものだけでなく、心理学的な要素も考慮する必要があります。科学に基づいて、特定の色のセットが人間の脳に特有意義の感情を引き起こすことは、确认されています。例えば、秋の色、オレンジや黄色は喜びや幸福を表し、赤色は節句の色、青色は calm and trustworthy です。また、多くの食料企業が彼らのウェブサイトに赤と黄を使うことがあり、製薬企業がそれらのサイトで緑を使うことがあり、健身企業が時々オレンジを使うなど、よく見られます。
ユーザーインターフェースを作成するためには、CSSウェブレイアウト、要素、CSS位置、ナビゲーション、テキストなどを含むいろいろなことがあります。また、UIに影響を与えるものとして、CSSのHSL色もあります。CSS色は、UIにおける重要な要因であり、多くの人が避ける要因の一つです。
ウェブサイト開発者だけでなく、プロの写真家とビデオ編集者も色のゲームを可使います。完璧な画像を作成するのが彼らの仕事ですが、それには色の対比を多用します。したがって、要素に最適な色のセットを選ぶことは非常に重要です。
CSSにはbackground-color、color、linear-gradientなど多くのプロパティがあり、これらはユーザーに要素に必要な色を追加または塗りつぶすことができます。これらのプロパティは、文字や要素に彩られたフォントを作成することも、テキストや要素に美しい色のパターンを追加することもできます。
CSSのすべての色のプロパティは、色を定義する色方法を要求し、その色を指定された要素に塗りつぶす必要があります。CSSは、HSL、RGB、HSLA、Hexadecimalなどの内置の色方法を持っています。しかし、これらの色方法は色を取得するために、異なる単位の整数値のコレクションを要求します。
多くのブログやチュートリアルがRGBおよびHexadecimalの方法に焦点を置いているにも関わらず、HSL方法の主要な側面をカバーする必要があります。このブログでは、CSSでHSLカラーの役割について深く探讨し、HSL方法の特徴や他の方法との違いを説明します。
HSL方法に直接飛び込む前に、他の2つのCSS色方法——RGBとHexadecimalについて話し、CSSでHSLカラーが必要な理由を説明しましょう。
RGBとHexの違い
RGB方法は、すべての色が赤、緑、青の色の混合であると考えることで機能します。この方法は、rgb()関数で0から255の範囲の3つの小数値を割り当てることで、要求します。これらの値は、それぞれの色の強さレベルを指定します。0は最低の強さ、255は最高の強さを表します。
以下は、異なる強度のRGB色の組み合わせのいくつかの例です。
RGB方法の動作を理解するために、一つの例を見てみましょう。
.container {
background-color: rgb(0, 200, 120);
width: 100%;
height: 100px;
}出力:
次に、Hexadecimal方法について。これも、それぞれの色は赤、緑、青の混合物であるという考えに基づいて機能します。Hexadecimal方法は、三つの两位数のHEX数値を必要とし、‘#’記号で始まります。これらの三つのHex値は、それぞれ赤、緑、青の強度レベルを指定します。
Hexadecimal値が涉及されるため、Hexの基数が0から15の範囲にあり、10から15の範囲の値はAからFの文字で表現されます。したがって、00は最も低い強度の色を与え、FFは最高の強度レベルを結果とします。
以下は、一般的なHex色のコードと一緒にいくつかの一般的なHex色です。
Hex方法の動作を理解するために、一つの例を見てみましょう。
.container1{
background-color:#91D8E4;
}出力:
RGBとHexadecimal方法で作成することは方便で、私たちが求めるすべてを提供できます。しかし、それは真実ではありません。これらの二つの方法で作成することは、そう思われるように簡単ではありません。どのように機能するかを見てみましょう。
RGBとHex色コードに関連した問題
これらの2つの方法が持ち合わせる重要な問題の1つは、直观性がないことです。つまり、人間の脳が色を認識する方法に沿わないためです。人間が色を見たとき、人間の脳はその色を赤、緑、青を分割することはありません。したがって、私たちはRGB数や16進数や10進数を通じて色を認識することが困難になります。
そうした困難の中で、開発者やテスト者の日常生活において、RGBから16進数の変換やその逆で人間がより理解しやすく、コミュニケーションがしやすいようにする必要が生じる場合があるでしょう。
UI設計者やウェブ開発者は、UIに一貫性のあるテーマを維持するために特定の色のいくつかの影を作る必要があります。たとえば、色々な要求に応じて、青の30色、緑の20色、オレンジの10色などです。CSS変数を使用してこれらの多くの色の変化を保持すると混乱が生じます。私たちが気づいたことは、これらの変化する色のRGB値は関連性のないことです。それにより悪影響が出てきます。
しかし、RGBと16進数の方法の欠点は、CSSでのHSL色で除去できます。今はHSL方法が何を意味するか、その動作方法を説明し、RGBと16進数の方法の欠点を克服する方法について話しましょう。
HSLは何でしょう?
HSLは色の三要素である彩度、明度、以及に包まれています。つまり、HSLは彩度、明度という3つの測定要因からなるということです。前述の2つの方法と同様に、HSL方法も赤、緑、青3色である色の混合を観察して機能します。
HSLのフォーマットの主色は赤、緑、青であるため、RGBカラーWheelはHSLカラーにおける中心概念です。
RGB(赤绿青)カラーWheelは圆形内に填まれた色を主に表しており、このWheelは主色、副色、そして三色との関係を表示します。しかし、3種類の色Wheelがありますが、RGB(赤绿青)、CMY(青むき黄)、RYB(赤黄青)です。
上の図はRGBカラーWheelの圆形を表しています。赤が0度、緑が120度、青が240度になるのを観察できます。HSLカラーをCSSで使用する際にはどのように背后の作用が起こるのか、これらの3つの特性に深く取り組むことで理解できます。
Hue
HSLカラーをCSSで使用する際には、この方法で最初に割り当てられる値が彩度です。色の角度を測る量で、定義された角度の値は正のx軸から時計回りに算出され、その角度の色が返されます。角度の測定であるため、デフォルトの値は度で指定されますが、この方法は度以外の値を定義することができ、それにはラジアン、グラデーション、ターンが含まれます。
角度の単位の値は0～360度の範囲に入ります。0度で赤、120度で緑、240度で青です。また、radでの値の範囲は0～6.28 radです。CSSでのHSLカラーの最も一般的に使用される単位の値は度の値です。
以下はHueの機能を理解するための例です。
div {
border: 2px solid;
height: 100px;
background-color: hsl(123deg, 39%, 49%);
}出力:
角度の値は0～360度の間だけでなく、0度以下や360度以上の値も受け付けます。値が360度を超える場合、それを360度から引くことで範囲内の値に変換されます。0度以下や負の値の場合、360度に加え、結果の値はその後色を取得するために使用されます。
background-color: hsl(400deg, 39%, 49%);出力:
background-color: hsl(-120deg, 39%, 49%);出力:
<div class="container1">Container 1</div>
<div class="container2">Container 2</div>
div {
border: 2px solid;
height: 100px;
text-align: center;
font-size: 80px;
margin-bottom: 10px;
}
.container1 {
background-color: hsl(60, 39%, 49%);
}
.container2 {
background-color: hsl(420, 39%, 49%);
}出力:
角度の値を考えると、60度和420度（420度 – 360度 = 60度）の両方は同じ値です。したがって、先の例においては、どちらのコンテナにも同じ背景色が表示されます。
.container1 {
background-color: hsl(90, 39%, 49%);
}
.container2 {
background-color: hsl(-270, 39%, 49%);
}出力:
ここでも、先の例と同様に、90度和-270度が同じ結果を返すことがわかります。90度和-270度は、角度の値として同じになります。
次に、HSL方法の2番目の特性、つまり彩度について見ていきましょう。
彩度
饱和度は色の純度を定義し、色が饱和または非饱和になる程度を決める。つまり、饱和度特性は色の強度レベルを操作します。饱和度の衡量は、饱和度を定義するために比率単位の整数値を受け入れます。
饱和度の動作を理解するために、例を見ていきましょう。
.container{
background-color:hsl(60, 45%,49%);
}出力:
饱和度特性の値が高い場合、色の強度も高く、その色には灰色の影が少ないです。したがって、饱和度の100%の値は purity 色を与え、50%の値は半分の色と半分の灰色の影を結果として、0%は完全な灰色の影を結果とします。
.container1{
background-color:hsl(60, 0%,49%);
}
.container2{
background-color:hsl(420, 25%,49%);
}
.container3{
background-color:hsl(420, 50%,49%);
}
.container4{
background-color:hsl(420, 75%,49%);
}
.container5{
background-color:hsl(420, 100%,49%);
}出力:
上の例で、饱和度特性の値を0%から100%に増やすことで、コンテナの背景色にどのような違いが生じるかを見ることができます。0%の値では、コンテナ1には完全な灰色が生じ、値が増えていくにつれて、色の強度も増えていきます。最後に、強度はコンテナ5で最高の100%になります。
饱和度特性は比率値を受け入れるため、取得される値は0%から100%の範囲に属します。しかしながら、ユーザーは饱和度特性に100%を超える値や0%未満の値を渡すこともできます。
ただし、色相特性と同様に、限界を超えた値を渡すことは意味がないです。なぜなら、ユーザーが100%を超える値を渡すと、色の強度は常に100%になります。0%未満の値(負の値)を渡すと、強度は常に0%になります。
.container1 {
background-color: hsl(60, 0%, 49%);
}
.container2 {
background-color: hsl(420, -25%, 49%);
}出力:
ここで、私たちは饱和度特性に0%と-25%の値を割り当てたことがわかります。そして、どちらのコンテナも同じ背景色を取得しています。
.container1 {
background-color: hsl(60, 100%, 49%);
}
.container2 {
background-color: hsl(420, 200%, 49%);
}出力:
この例で、饱和度特性に100%と200%の初期値を設定しました。これらの2つの異なる値に対して、どちらのコンテナも同じ背景色を取得しています。
今、CSSで使用されるHSLカラーのHSL方法の最後の特性、すなわち亮度に移ります。
亮度
名前が示すように、亮度特性は色の光量を制御します。言い換えれば、亮度は、色が明るいか暗かったかを制御する特性です。饱和度特性と同様に、亮度特性も百分比単位の整数値を要求します。
亮度的な動作を理解するための例を考えてください。
.container {
background-color: hsl(60, 39%, 49%);
}出力:
.container1 {
background-color: hsl(60, 39%, 0%);
color: white;
}
.container2 {
background-color: hsl(420, 39%, 25%);
}
.container3 {
background-color: hsl(420, 39%, 50%);
}
.container4 {
background-color: hsl(420, 39%, 75%);
}
.container5 {
background-color: hsl(420, 39%, 100%);
}
出力:
ここで、0%の亮度でコンテナ1の背景色が黒い色になり、亮度の値が増えるにつれて色の亮度が増加し、100%の亮度では完全に白い色になり、因此、コンテナ5の背景色が完全に白くなります。
饱和度特性と同様に、亮度特性も100%を超える値や0%未満の値を受け付けます。しかし、100%を超える値は100%と同様に機能し、0%未満の値(マイナス値)は0%と同様に機能します。これを行動から見てみましょう。
.container1 {
background-color: hsl(60, 39%, 0%);
}
.container2 {
background-color: hsl(420, 39%, -25%);
}出力:
.container1 {
background-color: hsl(60, 39%, 100%);
}
.container2 {
background-color: hsl(420, 39%, 250%);
}出力:
この例では、Container 1に100%の亮度値、Container 2に200%の値を割り当てたとしても、背景色は同一の結果をもたらしています。
CSSでHSLカラーの3つの特性について話してきましたが、それだけではありません。HSLカラーのCSSにおけるもう一つの特性は「A」と呼ばれ、「alpha」の略です。これは4番目の特性です。アルファ特性は色の不透明度を指定します。つまり、アルファ特性は色の透過率を調整します。HSLでは、アルファ特性を使用するには、HSLAメソッドを使用する必要があります。
CSSでHSLカラーの他の特性に比べ、単位を含む値を要求する必要があるが、アルファ特性は単位を要求しません。アルファ特性は0から1の単位を持たない値を要求します。0では色は不可視または隠されています；1ではアルファ特性が最も高い値になり、色は完全に可见です。
.container{
background-color:hsla(60, 39%,49%, 0);
}出力:
.container{
background-color:hsla(60, 39%,49%, 1);
}出力:
ここで、アルファ特性を1で割り当てたため、Containerの背景色が表示され、背景色を始めることができます。
単位を持たない値を要求するだけでは、アルファ特性を区別するのではなく、アルファ特性は0から1の間の任意の値を受け入れます（0.1、0.2、0.01など），他のHSLカラーのCSSの特性には适用できません。
.container {
background-color: hsla(60, 39%, 49%, 0.5);
}出力:
この例で、ご覧のように、私たちはアルファ特性に0.5（半分）の値を割り当てました。したがって、結果として、コンテナに半透明の背景色が得られます。小数点の1桁だけでなく、アルファ特性は2桁の小数も受け入れます。これにより、色の透明度レベルを完全に制御できます。
以下は、これを示す例です。
.container {
background-color: hsla(60, 39%, 49%, 0.25);
}出力：
ここで、私たちはアルファ特性に0.25という2桁の小数の値を渡しました。
CSSでHSLカラーを使用する利点
HSL（色相、彩度、亮度）カラーは、CSSカラーモジュールにのみ新しい追加となったもので、ウェブ開発中で色を指定するためにより直観的で柔軟な方法を提供します。传统のRGBまたは16進数カラーコードと比較して、CSS内のHSLカラーは、デザイン者や開発者にとって幅広い利点を提供します。
この節で、CSS内でHSLカラーを使用する利点を详しく調査し、ウェブページやアプリケーションに対して視覚的に吸引力のあるとてもアクセス可能なデザインを作成する方法を讨论します。
実用的な適用において、CSS内のHSLカラーは、利点が多いため、プロの阶层でもよく使われています。
以下に、HSLカラーを使用する利点のいくつかの例があります：
- 全体のワークフローを改善し、非常にスムーズにする
- 標準的な基本色を保持して異なる色を得る際には非常に便利です
- 幅広い色の可能性を提供する強力で簡潔な方法です
- 人々が色を観察する実践的な方法に基づいていて、学習しやすく、速く読むことができる
- HSL方法によって生成される色は明瞭に表現されており、結果を簡単に想像できる。
CSSでHSL色を使用する另一の重要な利点は、RGBとして代替手段として機能し、RGBに簡単に変換できることです。RGBとHSL方法はどちらも数字の値を集めて機能する必要がありますので、HSL色の数字的値をRGB方法の分数の値に簡単に変換する方法を利用できます。
もっと簡単にするために、いくつかのオンラインの色変換器は、色の方法を一つの他のものに変換することができます。これらの利点は、CSS内のHSL色を色の定義に使用する際の首选の方法として、HSL色をCSS内で定義することにより多くの利点をもたらします。そして、CSSの専門家でもまだHEXまたはRGB方法をHSLより使用することを好みますが、日々にHSLが注目を集めています。
CSS内のHSL色の使用における応用
CSS内のHSL色は色の指定を簡単にするために多様で、直観的な方法を提供し、Web開発において多くの応用があります。以下は、CSS内のHSL色の使用の主要な応用のいくつかです:
色の薄い色
プロのレベルで、インターフェースの中で一貫したテーマを作成するために、特定の色の異なるショーンでインターフェースの各部分で色の影を作成します。このようなシーンではHSL方法はとても便利です。
この例では、2つの基本的なウェブサイトレイアウトを考慮しました。どちらの場合も、ヘッダー部分は背景色を塗りつぶし、コンテンツ部分は同じ背景色ですがより明るい濃淡である。この効果を得るために、ヘッダー部分で光度特性値を低く、コンテンツ部分で光度特性値を高くしました。
光度特性値を異なる値で実験することで、同じ色の暗きと明るい濃淡をウェブサイトテーマに使用できます。
Hover 時の暗き濃淡の色
ウェブサイトのインターフェースのいくつかの要素が、ユーザーがそれを上に mouseover したときに色が変わることがあるかもしれません。彼らの色は明るい濃淡から暗き濃淡に変わります。この所で、CSS 内の HSL 色が一般的な色の明るくて暗くての濃淡を与える役割を果たします。
button {
padding: 10px;
border-radius: 20px;
background-color: hsl(240, 39%, 70%);
color: white;
font-size: 20px;
}
button:hover {
background-color: hsl(240, 39%, 50%);
cursor: pointer;
}
ここで、上のボタンの色が明るい濃淡であることに注意してください。これには、光度特性値を70%に設定しました。Hover した後、ボタンの色が下のボタンのように暗い濃淡に変わります。この効果を得るために、光度特性値を50%に割り当てましたが、上のボタンよりも低いです。
白の濃淡
ほとんどの場合、ウェブサイトのインターフェースから少しでも文字を区切るために文字色として白を使用する必要があります。しかし、すべての文字に同じ白の濃淡を使用すると、ユーザーの経験が钝化します。これを避けるために、異なる白の濃淡を使用して、文字を際立たせ、面白く保ちます。
HSLカラーをCSSで使用することで、私たちは様々な濃淡の白の色を得ることができます。HSL方法の亮度特性に異なる値を追加することで、異なる濃淡の白の色を得ることができます。
.container1 {
color: hsl(30, 49%, 100%);
}
.container2 {
color: hsl(30, 49%, 90%);
}
.container3 {
color: hsl(30, 49%, 95%);
}
.container4 {
color: hsl(30, 49%, 85%);
}出力:
この例で、4つのコンテナすべてにおいて、テキストは基本の白とは異なる色で表示されています。私たちはそれらに刺激的な外見を付け、白として维持するために異なる濃淡の白を使用しました。それには、フォント色の亮度特性の値を操作することでした。
Button Types
CSS内のHSLカラーは、ボタンに2つの異なる濃淡の同色を使用する際にも非常に便利です。共通色の異なる濃淡を割り当てることで、用户がすぐに主要なボタンと副要なボタンを识別することができます。
実生活では、ダークな濃淡の色が主要なボタンに使用され、濃淡の色が副要な色に使用されます。共通色の軽いと暗い濃淡を得るために、HSL方法で亮度特性に高い値や低い値を渡すことです。
例を見てみましょう。
.primary {
color: white;
background-color: hsl(10, 49%, 55%);
}
.secondary {
background-color: hsl(10, 49%, 80%);
}出力:
上の例では、上のボタンが主要なもので、下のボタンが副要なものです。主要なボタンにはダークな濃淡の色が使用され、低い亮度値であり、副要なボタンには軽い濃淡の色が使用され、高い亮度値であります。
Dark Theme Colors
UIにおいて正しい色の对比度の使用は非常に重要です。特に用户がウェブサイト上でダークテーマを有効にしている場合。2022年の研究によると、81.9%のユーザーがスマートフォン上でダークテーマを使用しています。これから、ダークテーマのUIにおける色の对比度の重要性を想象することができます。
WCAGのアクセシビリティー標準に基づいて、暗い面に対する本文の色の对比度が少なくとも4:5:1を维持する必要があります。このルールに従うために、ダークテーマで饱和色の使用は避けられます。饱和色を使用すると、暗い背景に合わせて使用すると目の疲劳を増やす可能性があります。
上の図によると、低饱和度の値を使用したテキストを高饱和度の値を使用したテキストよりももっと読むのが容易です。したがって、常に暗い色の背景に対して非饱和色を使用することが推奨されます。
最適な色指定子を選ぶ方法
私たちが讨議した3つの方法にはそれぞれの利点と欠点があります。使用案例に応じて、どの色指定子が最も効果的か決定しなくてはなりません。3つの色指定子を比較する共通基準は存在しないですが、それぞれを检討しましょう。
ヘキサデシュメンタル
デザインやプロジェクト作成にはない場合、ヘキサデシュメンタル方法を使用して色を指定することが必要かもしれません。多くの開発者は、CSSのRGBとHSL色としてはあまり复杂でないため、ヘキサデシュメンタル方法を好むことがあります。
hexという言葉を含むコードを選択して、プログラムに埋め込みます。しかし、色の不透明度を操作する必要がある場合、hexのメソッドは使用者に色の不透明度を制御することができないという課題が発生します。
RGB
RGB法を選ぶべき時は、この法が、フォトエディットィングとデザイン域のすべてのプロフェッショナル開発者とデザイン者に役立つということから始まります。また、RGB法は、コアルドラウ、フォトショップ、イラストリアターなどの多くの人気のあるデザインソフトウェアで最も一般的に使用されている色指定子であるという理由もあります。しかし、同色の異なる影を提供するためには簡単にはならず、RGB法は失敗します。
HSL
今は、HSL法を考慮してください。プロのウェブ開発者とUIデザイン者は、UI全体に一貫性のあるテーマを維持する傾向があります。このような状況では、CSSでHSLカラーの使用が助けになります。これは、饱和度と亮度の特性の値を変更して色の影を変更することができるからです。結局、これらの3つの指定子のどれを選ぶかは個人の好みによるのです。あなたは、自分の作业を行うためにこれらの3つの指定子のいずれかを選ぶことができます。
ブラウザの互換性
色を指定したとしても、定義した色がブラウザで意図した出力を返さないときは役に立てません。そのため、UI設計で使用される色指定子は、すべてのブラウザと互換性がある必要があります。
幸いなことに、HSLカラーのCSSの動作はブラウザに依存しないです。HSL法は完全にブラウザ互換性を持っています。すでに、使用者が何を使っても、正しく定義された色でWebページに到着することが保証されます。
しかし、CSSでHSL色を使用して意図した結果を各ブラウザ上で得ることを保証するために、クロスブラウザテストを行うことができます。连续の品質テストプラットフォーム（つまりLambdaTest）は、異なるリアルブラウザ、デバイス、OSの組み合わせにおいてクロスブラウザ互換性テストを実行することを助けます。指定されたCSS色がブラウザやデバイスで正しく機能しているかを確認します。
終わりの言葉
このブログは、HSL色在CSSの役割と、それが他の色方法とどのように異なるかを教えました。また、HSL色在CSSの適用とその利点についても議論しました。また、HSL色在CSSを使用することで、ウェブデザインで色を指定する際のより多くのフレキシビリティと精密度を提供する方法について学びました。
HSL色在CSSを使用することで、デザイン者は色の饱和度と明るさをより詳細にコントロールすることができます。その結果、ウェブサイトやアプリケーションで品牌の标识や美学的なビジョンに合わせて使用することができる更なる色の彩と阴影が提供されます。
HSL色在CSSは、特殊能力を持つ人々により多くのアクセシビリティを提供します。色の明るさと饱和度を簡単に調整することで、テキストや他のデザイン要素により広い对比と可读性を作成し、ユーザーがコンテンツを操作し、理解することをより簡単にする。総じて、CSSのHSL色は、ウェブデザイン者や開発者にとって、サイトのデザインに vibrant 且つ アクセスIBLEな色スキームを作成する強力なツールを提供します。
Source:
https://dzone.com/articles/create-cohesive-ux-using-hsl-colors-in-css