カラーコード変換ツール
HEX・RGB・HSLを相互変換。カラーピッカーでリアルタイムプレビュー。
🎨 カラーを入力
—
—
カラーピッカー
クリックして色を選択
HEX
RGB
R
G
B
HSL
H°
S%
L%
📋 変換結果
HEX
—
RGB
—
HSL
—
RGB（CSS）
—
HSL（CSS）
—
HEX（#なし）
—
スポンサー
このツールでできること
HEX・RGB・HSLのカラーコードを相互変換できる無料ツールです。カラーピッカーで色を選ぶだけでリアルタイムに変換結果が表示されます。CSS用の rgb()・hsl() 形式にも対応しており、Web制作やデザイン作業に役立ちます。
使い方
- カラーピッカーをクリックして色を選択する（リアルタイム変換）
- またはHEX欄に
#ff0000形式で直接入力してEnterキーを押す - RGB欄にR・G・Bの値（0〜255）を入力してEnterキーを押す
- HSL欄にH（0〜360）・S（0〜100）・L（0〜100）を入力してEnterキーを押す
- 各結果の「コピー」ボタンでクリップボードに取得する
各形式の説明
HEX— 16進数で色を表す形式。例:#ff6600。HTMLやCSSで最もよく使われます。RGB— 赤・緑・青の光の三原色で色を表す形式。各値は0〜255。HSL— 色相（Hue）・彩度（Saturation）・明度（Lightness）で色を表す形式。人間の感覚に近く、色の調整がしやすいです。
メリット
- リアルタイム変換 — カラーピッカーの操作と同時に全形式が更新されます
- 6形式で同時表示 — HEX・RGB・HSL・CSS形式・#なしHEXを一度に確認できます
- 完全クライアント処理 — 入力データはサーバーに送信されません
注意点
- HEX入力は
#を含む6桁形式（例:#ff6600）で入力してください - 3桁のHEX（例:
#f60）は現在非対応です - アルファ値（透明度）には対応していません
よくある質問（FAQ）
HEXとRGBはどちらを使えばいいですか？
どちらも同じ色を表せます。CSSでは #ff6600 のようなHEX形式が短く書けて便利です。JavaScriptで色を計算・操作する場合はRGBやHSLの方が扱いやすいです。
HSLはどんな時に使いますか？
色の明るさや鮮やかさを調整したい時に便利です。例えば同じ色相（H）でLの値だけ変えると、同系色の明暗バリエーションを簡単に作れます。
入力した色はどこかに保存されますか？
保存されません。このツールはブラウザ内だけで動作しており、入力内容がサーバーに送られることは一切ありません。