カラーコンバーター
16進数のカラーコードを入力すると、赤、緑、青の各チャンネル値を含むRGBおよびHSLの対応値が表示されます。
このカラーコンバーターの使い方
- 16進数カラーコードを入力
16進数カラーコード欄に6桁のコード（例：FF6B35 または 00FF88）を入力してください。# 記号は不要です。
- RGB値を読み取る
赤（Red）、緑（Green）、青（Blue）の各チャンネルの結果に、各成分の0〜255の値が表示されます。
- HSL出力を確認する
色相（0〜360°）、彩度、輝度のHSL結果を確認します。色の調整に便利です。
このカラーコンバーターの仕組み
このツールは、16進数カラーコードをRGB（赤、緑、青）およびHSL（色相、彩度、明度）形式に変換します。各16進数のペアは8ビットのチャンネル値（0〜255）に対応し、HSL変換には標準的な色空間の数式が使用されます。
R = hex[0:2] → 10進数; G = hex[2:4] → 10進数; B = hex[4:6] → 10進数 Hex #FF6B35 → RGB(255, 107, 53) → HSL(16, 100%, 60%)。
Hex 000000 → RGB(0, 0, 0) → HSL(0, 0%, 0%) — 純粋な黒。
Hex FFFFFF → RGB(255, 255, 255) → HSL(0, 0%, 100%) — 純粋な白。Hex 808080 → RGB(128, 128, 128) → HSL(0, 0%, 50%) — 中間的なグレー。
- ✓ 入力は有効な6桁の16進数カラーコードです。
- ✓ このバージョンではアルファチャンネルはサポートされていません。
- CMYK変換にはカラープロファイルが必要なため、ここには含まれていません。
カラーモデルについて
HEX、RGB、HSLは、同じ色を表現するための異なる方法です。HEXはRGBを6桁の16進数文字列としてエンコードしたもので、2文字ずつのペアが各8ビットチャンネル（0〜255）に対応します。RGBは、画面が発光する加法混色の三原色を3つの数値で表したものです。HSL（色相、彩度、輝度）は円柱モデルです。色相は色相環上の角度（0°が赤、120°が緑、240°が青）、彩度は色の鮮やかさ、輝度は明るさを表します。プログラムで色を調整する場合、デザイナーはHSLを好むことが多いです。輝度だけを変更すれば色相を変えずに明暗を調整でき、彩度を微調整すれば鮮やかさを変更できるからです。
開発者における色変換の活用例
開発者は、デザインシステムの構築、テーマの実装、カラーパレットの生成、CSSのデバッグなどの際に色を変換します。デザイントークンでは色が16進数で保存されることが多いですが、RGBやHSLに変換することで、不透明度のオーバーレイやアクセシビリティのためのコントラストチェックなどの実行時計算が可能になります。テーマ切り替え機能では、HSLを使用してベースカラーから明るいバリエーションや暗いバリエーションを派生させる必要がある場合があります。自動アクセシビリティツールは、輝度やコントラスト比を計算するために色を変換します。レイアウトやテーマのバグをデバッグする際、16進数の値をRGBやHSLとして確認することで、どのチャンネルに問題があるかを特定しやすくなります。色変換は、データ視覚化、チャートライブラリ、動的なUIテーマ設定などでも使用されます。
よくある質問
3桁のHexコードを入力できますか？
現在、このツールは6桁のコードを想定しています。F60のような3桁の短縮形の場合は、まずFF6600に展開してください。
HSLとは何ですか？
HSLは、色相（Hue）、彩度（Saturation）、輝度（Lightness）の略称です。RGBよりも直感的であると感じるデザイナーも多い、色を表現する別の手法です。