1. 概要

このチュートリアルでは、色をHSLからRGBに変換する方法について説明します。最初に、HSLおよびRGB色空間に焦点を当てたカラーモデルを簡単に紹介し、次に説明します。詳細な例とともに、HSLからRBGに変換する方法を示します。

2. カラーモデル

あらゆるコンピューティングデバイスで色を使用するには、それを数値のベクトルとして表す必要があります。これを行うには、色を整数のセットにマップする数学モデルであるカラーモデルを定義します。さまざまなアプリケーションに適した多くの提案されたカラーモデルです。 このチュートリアルでは、HSLとRGBカラーモデルに焦点を当てます。

2.1. HSL

HSLは、人間の視覚が色を認識する方法と非常に密接に連携しているために提案されたカラーモデルです。コンピュータグラフィックスで非常に人気があり、色相、彩度、明度の3つのコンポーネントで構成されています。

HSLカラーモデルは、色相が0°の赤色から始まり、120°の緑色と240°の青色を経る角度寸法である円柱として表すことができます。 縦軸は明度に対応し、下部では明度がゼロ(黒)、上部では完全な明度(白)になります。 最後の軸(水平)は彩度に対応し、彩度が1に等しい円柱の外縁の周りに純粋な色があります。

上記の表現は、下の画像に示されています。

2.2. RGB

RGB は、今日の電子機器で画像を表示および表現するために使用されるメインカラーモデルです。 赤、緑、青は、RGB色を表すために混合される原色であるため、これは赤、緑、青の略です。

RGBでは、色は0〜255の範囲の3つの整数値(各原色に1つ)を使用して定義されます。 ゼロの値は暗いことに対応し、255の値は明るいに対応します。

下の画像では、RGBキューブを見ることができます。

3. 方法

ここで、HSL色表現をRGB表現に変換する方法を紹介します。値がH、S、Lの色があるとします。ここで、

まず、次のように定義されるクロマを計算します。

次のステップは、と同じ色相値と彩度値を持つRBGキューブの3つの面の1つで点()を検索することです。 これを行うには、最初に次のように計算します。

ここで、2の除法の原理の剰余に対応します。 次に、検索するポイントは次のように定義されます。

最後のステップは、RGBカラーの適切な明度を見つけることです。 これを実現するために、各RGBコンポーネントに同じ値を追加します。

したがって、変換されたRGBカラーはに等しくなります。

4. 例

ここで、変換アルゴリズムをよりよく理解するために、簡単な例で上記の式を適用します。

前の一連の方程式を使用して色を付け、適用するとします。

したがって、それぞれのRBGカラーはに等しくなります。

5. 結論

この記事では、色をHSLからRGBに変換する方法を紹介しました。 まず、カラーモデルを紹介し、次に変換方法と簡単な例を紹介しました。