カラー変換ツール (HEX/RGB/HSL)

HEX、RGB、HSL形式間でカラーを変換。ビジュアルカラーピッカーとプレビュー付き。

使い方

  1. 任意の形式（HEX、RGB、またはHSL）でカラー値を入力します
  2. 他のすべての形式に変換された値が即座に表示されます
  3. カラーピッカーを使って視覚的に色を選択します
  4. 「コピー」ボタンで任意の形式をコピーします

よくある質問

  • HEX、RGB、HSLの違いは何ですか？

    HEXは16進数表記を使用します（#FF5733）。RGBは赤・緑・青の値（0〜255）で色を定義します。HSLは色相（0〜360）、彩度（0〜100%）、明度（0〜100%）で色を定義します。

  • CSSではどのカラー形式を使うべきですか？

    3つの形式はすべてCSSで有効です。HEXが最もコンパクトで、RGBは色の混合に直感的、HSLは明度や彩度を調整してカラーバリエーションを作るのに最適です。

  • アルファ（透明度）はサポートされていますか？

    現在のバージョンは不透明な色を変換します。アルファチャンネル（RGBA、HSLA、8桁HEX）のサポートは将来のアップデートで予定されています。

  • モバイルでカラーピッカーを使用できますか？

    はい、カラー入力はモバイルブラウザを含むすべてのデバイスでネイティブカラーピッカーを使用します。

カラーモデルの基礎知識

デジタル色表現には複数の方法があり、用途によって使い分けることが重要です。

HEX（16進数カラー）

HEXはWeb開発で最も広く使われるカラー表現です。#RRGGBBの形式で、各チャンネル（赤・緑・青）を2桁の16進数（00〜FF）で表します。例えば#FF5733は赤成分255、緑成分87、青成分51の色です。

短縮形として#RGBも使えます（例：#F53は#FF5533と同じ）。コンパクトで、HTMLやCSSで最もよく使われます。

RGB（赤・緑・青）

RGBは光の三原色モデルで、各チャンネルを0〜255の整数または0〜100%のパーセンテージで指定します。CSS3ではrgb(255, 87, 51)またはrgb(100%, 34%, 20%)のように記述します。色の混合や計算を行うときに直感的で、プログラムで動的に色を生成する場合にも扱いやすいです。

HSL（色相・彩度・明度）

HSLはデザイナーにとって最も直感的なカラーモデルです。

  • 色相（Hue）：0〜360度の角度で色相環上の色を指定（0=赤、120=緑、240=青）
  • 彩度（Saturation）：0%（グレー）〜100%（純色）
  • 明度（Lightness）：0%（黒）〜100%（白）、50%が通常の色

HSLの利点は、色のバリエーションを作りやすいことです。同じ色相で明度だけを変えればグラデーション、彩度を下げればパステルカラー、と調整が直感的に行えます。

CSSでのカラー形式の選び方

実際のCSSコーディングでどの形式を選ぶべきかは、目的によって異なります。

HEXを選ぶ場面：デザインツールから色をコピーペーストする場合、チームで決まった色を共有する場合。シンプルで可読性が高い。

RGBを選ぶ場面：JavaScriptでCanvasや動的な色生成を行う場合。アルファ値（透明度）が必要な場合はrgba(255, 87, 51, 0.8)のように指定できる。

HSLを選ぶ場面：テーマカラーのバリエーション（ホバー時に少し明るく、など）を作る場合。CSSカスタムプロパティで動的テーマを実装する場合。

/* HSLで統一テーマを作る例 */
:root {
  --brand-hue: 220;
  --brand: hsl(var(--brand-hue), 70%, 50%);
  --brand-light: hsl(var(--brand-hue), 70%, 70%);
  --brand-dark: hsl(var(--brand-hue), 70%, 30%);
}

カラーアクセシビリティの重要性

色を選ぶ際は、WCAG（Web Content Accessibility Guidelines）のコントラスト比基準を満たすことが重要です。テキストと背景のコントラスト比は、通常テキストで4.5:1以上、大きなテキストで3:1以上が推奨されています。カラーコンバーターで変換した色のコントラスト比は、オンラインのアクセシビリティチェッカーで確認するとよいでしょう。

関連ツール

UTCTimestamp ConverterB64Base64 Converter