RGBからHexへの色変換：完全リファレンスガイド

RGBからHexへの変換は、赤、緑、青の各コンポーネントで定義された色を、Web開発で広く使用される6桁の16進数表現に変換するプロセスです。これらの形式の関係を理解することで、CSS、デザインツール、コードでの色操作をより効果的に行えます。

カラーモデルの解説

RGB（赤、緑、青）

RGBは加法混色のカラーモデルで、各色コンポーネントは0〜255の整数です。3つの値の組み合わせにより、1600万色以上の色が表現できます。

rgb(255, 0, 0)    → 純粋な赤
rgb(0, 255, 0)    → 純粋な緑
rgb(0, 0, 255)    → 純粋な青
rgb(255, 255, 255) → 白
rgb(0, 0, 0)      → 黒
rgb(128, 128, 128) → 中間グレー

16進数（Hex）

Hexカラーコードは、RRGGBBとしてグループ化された6桁の16進数を使用します。各ペアは、赤、緑、または青の強度を16進数表記で表し、00が最小、FFが最大です。

#FF0000 → 赤
#00FF00 → 緑
#0000FF → 青
#FFFFFF → 白
#000000 → 黒
#808080 → グレー

HSL（色相、彩度、明度）

HSLは、色相環上の角度（0〜360度）に加えて、彩度と明度のパーセンテージで色を表現します。明度や彩度を独立して調整できるため、人間にとってより直感的です。

hsl(0, 100%, 50%)    → 赤
hsl(120, 100%, 50%)  → 緑
hsl(240, 100%, 50%)  → 青
hsl(0, 0%, 50%)      → 中間グレー

CMYK（シアン、マゼンタ、イエロー、キー/ブラック）

CMYKは印刷に使用される減法混色のカラーモデルです。各コンポーネントの値は0%〜100%の範囲です。RGBの逆で、インクを追加すると反射光が減少します。

cmyk(0%, 100%, 100%, 0%)   → 赤
cmyk(100%, 0%, 100%, 0%)   → 緑
cmyk(0%, 0%, 0%, 100%)     → 黒
cmyk(0%, 0%, 0%, 0%)       → 白

変換式

RGBからHex

各RGBコンポーネントを2桁の16進数値に変換し、連結します：

R = 255 → FF
G = 128 → 80
B = 64  → 40
結果： #FF8040

function rgbToHex(r, g, b) {
  const toHex = (n) => {
    const hex = Math.max(0, Math.min(255, n)).toString(16);
    return hex.length === 1 ? '0' + hex : hex;
  };
  return `#${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase();
}

console.log(rgbToHex(255, 128, 64)); // #FF8040

function rgbToHex(int $r, int $g, int $b): string {
    $r = max(0, min(255, $r));
    $g = max(0, min(255, $g));
    $b = max(0, min(255, $b));
    return sprintf('#%02X%02X%02X', $r, $g, $b);
}

echo rgbToHex(255, 128, 64); // #FF8040

HexからRGB

6桁の16進数文字列を3つのペアに解析し、各ペアを16進数から10進数に変換します：

function hexToRgb(hex) {
  const clean = hex.replace('#', '');
  const r = parseInt(clean.substring(0, 2), 16);
  const g = parseInt(clean.substring(2, 4), 16);
  const b = parseInt(clean.substring(4, 6), 16);
  return { r, g, b };
}

console.log(hexToRgb('#FF8040')); // { r: 255, g: 128, b: 64 }

def hex_to_rgb(hex_color: str) -> tuple:
    clean = hex_color.lstrip('#')
    return tuple(int(clean[i:i+2], 16) for i in (0, 2, 4))

print(hex_to_rgb('#FF8040'))  # (255, 128, 64)

RGBからHSL

HSL変換では、支配的な色成分と副次的な色成分を見つけて色相角を決定します：

function rgbToHsl(r, g, b) {
  r /= 255; g /= 255; b /= 255;
  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  const l = (max + min) / 2;

  if (max === min) return { h: 0, s: 0, l: Math.round(l * 100) };

  const d = max - min;
  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
  let h = 0;
  if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) * 60;
  else if (max === g) h = ((b - r) / d + 2) * 60;
  else h = ((r - g) / d + 4) * 60;

  return { h: Math.round(h), s: Math.round(s * 100), l: Math.round(l * 100) };
}

console.log(rgbToHsl(255, 128, 64)); // { h: 20, s: 100, l: 63 }

クイックリファレンス表

CSSカラー関数

モダンCSSは、基本的なHexコードを超えたカラー関数をサポートしています：

/* 従来のHex */
.element { color: #FF8040; }

/* アルファ付きRGB */
.element { color: rgba(255, 128, 64, 0.5); }

/* アルファ付きHSL */
.element { color: hsla(20, 100%, 63%, 0.5); }

/* モダンな相対色構文 */
.element { color: hsl(from #FF8040 h s calc(l + 10%)); }

/* OKLCH — 知覚的に均一な色空間 */
.element { color: oklch(0.7 0.15 45); }

一般的なユースケース

• Web開発 — デザインモックアップ（RGB/HSL）をCSS（Hex）に変換
• データ可視化 — プログラムによるカラースケールの生成
• 画像処理 — RGBのピクセルデータを読み取り、Hexとして保存
• ブランドガイドライン — 形式間で一貫した色の維持
• カラーアクセシビリティ — 色間のコントラスト比の計算

オンラインツール

Help2CodeのRGB to HEXコンバーターは、RGB、HEX、RGBA、HSL、CMYK間の色変換をライブプレビュー付きで行います。色を選択したり、Hexコードを貼り付けたり、ランダムな色を生成して4つの形式すべてを即座に確認できます。カラープレビューはリアルタイムで更新され、任意の形式をワンクリックでコピーできます。カラーパレット抽出ツールも、画像からカラースキームを抽出するのに便利です。

結論

RGBからHexへの変換、およびカラーモデル間の関係を理解することは、Web開発者やデザイナーにとって不可欠です。変換は簡単です。各RGBチャンネルが2桁のHexペアに変換されます。パターンを理解すれば、RGB、Hex、HSL、CMYK間の移動は自然に行えるようになります。RGB to HEXコンバーターツールで即座に変換し、上記のコード例を使用してプロジェクトに色ロジックを統合してください。