WEBデザインに用いるカラーコードについて【ウェブデザイン技能検定 1級学科範囲】

ウェブデザイン色の表現は重要なスキルですのでウェブデザイン技能検定の過去問にも多々出てきています。
HexカラーコードとHSLカラーコードのについて改めて見直すとともに変換方法を理解することで、色の管理がより簡単になります。

変換方法をできるようにするというよりは、理解をすることだけでウェブデザイン技能検定の対策にもなりますし、普段の作業の効率なども上がりますので、是非目を通していただけたら嬉しいです。

Hexカラーコードとは

「Hex」という名前は、16進数（hexadecimal）を意味しています。
16進数は0から9までの数字とAからFまでの文字を使用して、合計16種類の値を表現するシステムです。

例えば、#ff0000は赤色を表すなど、6桁のコードで各2桁がそれぞれ赤（R）、緑（G）、青（B）の強度を示します。

16進数を使用

色の各成分（赤、緑、青）を16進数で表すため、例えば、赤色の成分が255（最大値）の場合、それは16進数で「FF」となります。

※赤(R)、緑(G)、青(B)は光の三原色です。

HSLカラーコードとは

HSLは色相（Hue）、彩度（Saturation）、輝度（Lightness）の3つの要素で色を表現します。

• Hue（色相）: 0度から360度までの値で、色相環の位置を表します。0度は赤、120度は緑、240度は青を示します。
• Saturation（彩度）: 色の鮮やかさを0%から100%の範囲で表します。
• Lightness（輝度）: 明るさを0%から100%の範囲で表し、0%は黒、100%は白を示します。

色相環の理解

色相環は0度から360度の範囲で色を表します。0度と360度は赤色です。
ペイントソフトやイラストソフトでは、この色相環に基づいてパレットがグラデーションしており、色選択が直感的に行えるようになっていますが、このことを理解しているだけでも効率よくパレットの中から目的の色を見つけるのが容易になります。

HexをHSLに変換してみます。

手順

1. HexをRGBに変換: #ff0000をRGB値に変換すると、R=255, G=0, B=0です。
2. RGBを正規化: 0から1の範囲に正規化すると、R=1, G=0, B=0です。
3. 最大値・最小値を計算: 最大値=max=1、最小値=min=0、差=delta=1です。
4. 明度(L)を計算: L = (max + min) / 2 = 0.5 = 50%。
5. 彩度(S)を計算: S = delta / (max + min) = 1 / 1 = 100%。
6. 色相(H)を計算: 赤色なのでH = 0度です。

結果、赤色 #ff0000 は hsl(0, 100%, 50%) となります。

HSLをHexに変換する方法

手順

1. HSLを正規化: HSL値を正規化します。
   • H = H / 360
   • S = S / 100
   • L = L / 100
2. RGBの中間値を計算
   • HSLをRGBに変換するための補助関数を定義し、中間値を計算します。
   • RGB値を0から255の範囲にスケーリングします。
3. RGBをHexに変換
   • RGB値を16進数に変換し、Hexカラーコードを生成します。

例えば、hsl(120, 100%, 50%) をHexに変換する場合：

1. HSLを正規化
   • H = 120 / 360 = 0.333
   • S = 100 / 100 = 1
   • L = 50 / 100 = 0.5
2. RGBに変換
   • q = 1
   • p = 0
   • R = 0, G = 1, B = 0（スケーリングしてR = 0, G = 255, B = 0）
3. Hexに変換
   • Hex: #00ff00

代表的な色の例

赤色

• Hex: #ff0000
• HSL: hsl(0, 100%, 50%)

緑色

• Hex: #00ff00
• HSL: hsl(120, 100%, 50%)

青色

• Hex: #0000ff
• HSL: hsl(240, 100%, 50%)

まとめ

HexカラーコードとHSLカラーコードの基本を理解することで、WEB制作にはデザインの段階でもコーディングの段階でも役に立つ瞬間があります。
変換方法は理解していなかったとしても概要だけをしっていれば応用を効かせることなどもできますので是非知識としてもっておいていただければと思います。

ウェブデザイン技能検定の為の知識として持っておくのもいいと思います。