色コード変換・配色チェック
HEX・RGB・HSLの色コードをリアルタイム相互変換。
どの形式からでも入力するだけで他の形式に自動変換します
プレビュー Aa 123
The quick brown fox jumps over the lazy dog
おすすめ配色
クイックカラーパレット
色コード（カラーコード）とは
色コード（カラーコード）とは、コンピュータ上で色を数値で表現するための記法です。 WebデザインやCSS、グラフィックソフトなどで色を指定する際に使用されます。 代表的な表現形式にはHEX（16進数）、RGB（赤・緑・青）、HSL（色相・彩度・明度）の3つがあります。
同じ色を異なる形式で表現することが可能で、用途に応じて使い分けることで 効率的なデザイン作業が行えます。
HEX（16進数カラーコード）
HEXは「#」に続けて6桁の16進数で色を表す形式です（例: #FF5722）。 最初の2桁が赤（R）、次の2桁が緑（G）、最後の2桁が青（B）を表します。 各色は00（0）からFF（255）の範囲で指定します。
3桁の短縮形（例: #F00 = #FF0000）も使用可能です。 CSSで最も広く使われている色指定方法で、デザインツールやカラーピッカーでも 標準的に表示されます。
RGB（赤・緑・青）
RGBは光の三原色（赤・緑・青）の各チャンネルの強さを0から255の整数で表す形式です。 CSSでは rgb(255, 87, 34) のように記述します。
ディスプレイは赤・緑・青の光を混ぜ合わせて色を表現する「加法混色」を使うため、 RGBはディスプレイの仕組みに直接対応しています。 3色すべてが0なら黒、すべてが255なら白になります。
HSL（色相・彩度・明度）
HSLは人間の色の知覚に基づいた表現形式です。 H（Hue: 色相）は色相環上の角度（0-360度）、 S（Saturation: 彩度）は色の鮮やかさ（0-100%）、 L（Lightness: 明度）は明るさ（0-100%）を表します。
HSLでは色相を変えずに明るさだけを調整でき、同じトーンで色味だけを変更できます。 デザインシステムやテーマカラーの設計で使用されています。
色の基礎知識
- 色相環：色を円形に配置した図で、対角にある色を「補色」と呼びます。 補色同士を組み合わせた場合、コントラストが強くなります。
- 暖色と寒色：赤・オレンジ・黄は暖色、青・緑・紫は寒色に分類されます。 暖色は活発な印象、寒色は落ち着いた印象に知覚されることが多いとされています。
- 明度と彩度：明度が高いほど白に近づき、低いほど黒に近づきます。 彩度が高いほど鮮やかに、低いほどグレーに近づきます。
- Webアクセシビリティ：WCAG基準では、テキストと背景のコントラスト比を 4.5:1以上（通常テキスト）とすることが定められています。色の選択はアクセシビリティに影響を与えます。
よくある質問
HEX・RGB・HSLの違いは何ですか？
HEXは16進数で色を表す形式（例: #FF5722）、RGBは赤・緑・青の3色の強さ（0-255）で色を表す形式、 HSLは色相・彩度・明度で色を表す形式です。HEXとRGBは同じ色空間を異なる表記法で表しており、 HSLは人間の色の感覚に近い表現方法です。
CSSではどの色形式を使うべきですか？
HEXは最も広く使われており、簡潔に書ける利点があります。 RGBは透明度（alpha）を扱う場合にrgba()として便利です。 HSLは色の調整（明るさや彩度の変更）が直感的に行えるため、デザインシステムやテーマ設定に適しています。
HEXコードの「#」は必要ですか？
CSSでHEXカラーコードを使う場合、「#」は必須です。 #を省略するとブラウザが正しく色を認識できません。 本ツールでは「#」なしで入力しても自動的に補完して変換します。
HSLの色相（H）の値はどう解釈すればよいですか？
色相（Hue）は0から360の角度で表され、色相環の位置を示します。 0/360が赤、60が黄、120が緑、180がシアン、240が青、300がマゼンタです。 彩度（S）は色の鮮やかさ、明度（L）は明るさを0-100%で表します。
Webセーフカラーとは何ですか？
Webセーフカラーは、かつて256色しか表示できなかったモニタでも正しく表示される216色のことです。 現在のモニタではフルカラー（約1677万色）が表示可能なため、Webセーフカラーに限定する必要はほとんどありません。
免責事項
- 本ツールは色コードの相互変換の参考値を提供する簡易ツールです。 厳密な色管理にはカラーマネジメントシステムをご利用ください。
- モニタの設定やブラウザの色管理により、表示される色が実際の色と異なる場合があります。
- HSLからRGBへの変換では、浮動小数点演算の特性上、わずかな丸め誤差が生じる場合があります。
- 本ツールの利用により生じた損害について、当サイトは一切の責任を負いません。