カラーコード変換: HEX、RGB、HSL の解説

Webでの色は複数の形式で表現できます。それぞれを見ていきましょう。

HEXカラー

HEXカラーは16進数値を使用します：

• 形式: #RRGGBB または #RGB
• 範囲: 各チャンネル 00-FF

例：

• #FF0000 = 赤
• #00FF00 = 緑
• #0000FF = 青
• #FFF = 白（省略形）

RGBカラー

RGBは赤、緑、青の値を使用します：

• 形式: rgb(r, g, b) または rgba(r, g, b, a)
• 範囲: 各チャンネル 0-255
• アルファ: 透明度のために 0-1

例：

• rgb(255, 0, 0) = 赤
• rgba(0, 0, 0, 0.5) = 50%透明の黒

HSLカラー

HSLは色相、彩度、明度を使用します：

• 色相: 0-360（カラーホイールの角度）
• 彩度: 0-100%
• 明度: 0-100%

例：

• hsl(0, 100%, 50%) = 赤
• hsl(120, 100%, 50%) = 緑
• hsl(240, 100%, 50%) = 青

カラーホイール（色相値）

• 0° = 赤
• 60° = 黄
• 120° = 緑
• 180° = シアン
• 240° = 青
• 300° = マゼンタ

変換式

HEXからRGBへ

const hex = "#FF5733";

const r = parseInt(hex.slice(1, 3), 16);
const g = parseInt(hex.slice(3, 5), 16);
const b = parseInt(hex.slice(5, 7), 16);

いつ使うか

• HEX: CSS、デザインツール、簡潔な表記
• RGB: アルファ透明度が必要な場合
• HSL: プログラムで色を調整する場合

カラー変換ツールを使用して、形式間を簡単に切り替えられます。