カラーコード変換｜HEX⇔RGB⇔HSL を即時相互変換・ワンクリックコピー

使い方

• 色の入れ方は3通り：HEX や CSS 色名をテキスト入力、カラーピッカーで選ぶ、色相・彩度・明度・透明度のスライダーで調整。
• どれか1つの値を変えると、HEX・RGB・HSL・HSV・RGBA がすべて同時に更新。変換ボタンは不要で、あらゆる方向に対応します。
• 欲しい表記の横のコピーボタンを押すとクリップボードへコピーされ、「コピーしました」と表示されます。
• 透明度（アルファ）のスライダーを下げると透過色になり、プレビューはチェッカーボードで透け具合が分かります。
• コントラスト欄で WCAG のコントラスト比と AA/AAA の合否を確認。インストール・登録不要、色はローカルで計算され送信されません。

対応する色表記

HEX（16進数カラーコード）

HEX は Web で最も一般的な色の書き方で、#RRGGBB（短縮形 #RGB）の形です。ここでは 16進数 → RGB や HEX → HSL の変換も一瞬です。透過付きは HEX8（#RRGGBBAA）で、末尾2桁がアルファ値です。

RGB / RGBA（赤・緑・青＋透明度）

RGB は赤・緑・青を 0〜255 で表します（例 rgb(124, 58, 237)）。RGBA は4つ目に透明度（0〜1）を加えます（例 rgba(124, 58, 237, 0.5)）。RGB 値を直接入力すると、HEX や HSL もすぐ更新されます（RGB→16進数、RGB→HSL）。

HSL / HSLA（色相・彩度・明度）

HSL は色相（0〜360°）・彩度（0〜100%）・明度（0〜100%）で表し、明るさや鮮やかさを直感的に調整しやすい記法です。CSS でよく使われ、HSLA はアルファを追加します。HEX→HSL は、明度だけ少し変えたいときに便利です。

HSV（色相・彩度・明度〔value〕）

HSV（HSB とも）は色相・彩度・明度（value）で表します。デザインツールやカラーピッカーでよく使われますが、CSS の公式記法ではないため、ここでは参考値として表示します。CSS では HEX・RGB・HSL を使ってください。

機能

全表記の同時表示・双方向変換

すべての表記を一画面に同時表示し、どれを直しても残りが即座に追従します。HEX→RGB だけでなく RGB→HEX、HEX→HSL、HSL→HEX など、あらゆる方向に対応。変換ボタンを押す必要はありません。

ワンクリックコピー

各表記にコピーボタンがあります。押すとクリップボードへコピーされ、「コピーしました」とはっきり表示されるので、確実にコピーできたか分かります。

カラーピッカーとスライダー

ネイティブのカラーピッカーに加え、色相・彩度・明度（または value）・透明度のスライダーで、視覚的に色を選びながら全表記の追従を確認できます。

透明度（アルファ）対応

半透明の色を作って RGBA・HSLA・HEX8（#RRGGBBAA）を取得できます。アルファスライダーは 0〜100% で、プレビューはチェッカーボードで透け具合を表示します。

コントラスト比と WCAG チェック

選んだ色と背景（白・黒・指定色）のコントラスト比を計算し、WCAG AA/AAA（通常テキスト 4.5:1・大きい文字 3:1）の合否を表示します。色だけでなくテキストでも合否を示すので、色覚に依存しません。

活用例

HEX を CSS の RGB / HSL にする

デザインからもらった HEX を rgb() や hsl() に変換してコピー。HSL なら、ホバーやアクティブ状態用に明度だけ少し調整するのも簡単です。

透過色（RGBA / HSLA）を作る

rgba(0, 0, 0, 0.5) のような半透明色をスライダーで作ってコピー。オーバーレイ・影・控えめな背景などに最適です。

アクセシブルな配色か確かめる

文字色と背景色が WCAG AA のコントラストを満たすか確認し、誰にとっても読みやすい配色にします。

豆知識・注意点

• HEX・RGB・HSL・HSV は同じ色の別の書き方なので相互に変換できます（丸め誤差でわずかにずれることがあります）。
• HSV は CSS 公式記法ではありません。参考表示なので、スタイルシートでは HEX・RGB・HSL を使ってください。
• CMYK はあえて出力しません。画面色から印刷色への正確な変換はカラープロファイル・用紙・印刷機に依存し、単純式では誤った値になるためです。印刷用は専用のカラーマネジメントを使ってください。
• コントラストは目安です。WCAG の式は正確ですが、実際の読みやすさはフォント・サイズ・周囲の色にも左右されます。
• 色データは送信されません。すべての変換はブラウザ内で行われます。

よくある質問

HEX を RGB に変換できますか？（その逆も）

はい。1つ入れればあらゆる方向に同時変換します。16進数→RGB、RGB→16進数、HEX→HSL、HSL→HEX、さらに HSV・RGBA まで。変換ボタンは不要で、他の表記が即座に更新されます。

RGBA や HSLA（透過）に対応していますか？

はい。アルファスライダーで透明度を設定し、RGBA・HSLA・HEX8（#RRGGBBAA）を生成できます。プレビューはチェッカーボードで透け具合が分かります。

コピーはどうやりますか？

各表記の横のコピーボタンを押すだけです。値がクリップボードへコピーされ、「コピーしました」と表示されます。

red や rebeccapurple などの色名も使えますか？

はい。CSS 標準のカラーネームを入力に受け付け、HEX・RGB・HSL・HSV に変換します。例えば rebeccapurple は #663399 になります。

CMYK には変換できますか？

あえて非対応です。正確な CMYK はカラープロファイル・用紙・印刷機に依存し、単純式では誤った値になるためです。印刷用は専用ツールをお使いください。

コントラスト比はどう使いますか？

文字色と背景色の比を計算し、WCAG AA/AAA の合否を表示します。配色が読みやすくアクセシブルかの確認に使えます。

色データはサーバーに送られますか？

いいえ。すべての変換はブラウザ内で行われ、色は送信・保存されません。