プレビュー: 翻訳プレビュー：日本語サイトを準備中です。日本語版全体の確認が完了するまで、このページは検索インデックスに登録されません。
HEX・RGB・HSLカラー変換ツール
不透明なsRGBカラーを、このツールが対応するHEX、RGB、HSL表記の間で変換します。処理はブラウザー内で行われます。
HEX、RGB、HSLのいずれかで色を入力してください。
sRGBカラーを表す3つの形式
- HEX
- CSSやHTMLでよく使われる簡潔な16進表記です。このツールは#RGBと#RRGGBB（例：#FF5733）に対応します。
- RGB
- 赤・緑・青の各値を0〜255で指定します。例：rgb(255, 87, 51)。
- HSL
- 色相は0°〜360°、彩度と明度は0%〜100%です。各要素を調整して色のバリエーションを作れます。
例
- 純赤：#FF0000 → rgb(255, 0, 0) → hsl(0, 100%, 50%)。
- ロイヤルブルー：#4169E1 → rgb(65, 105, 225) → 約hsl(225, 73%, 57%)。
- 明るい緑：hsl(120, 80%, 70%) → #75F075、rgb(117, 240, 117)。
変換の仕組み
- HEXからRGB：赤・緑・青の16進ペアを分け、それぞれ10進値に変換します。
- RGBからHEX：各10進値を2桁の16進数にし、#の後ろに連結します。
- RGBとHSL：標準的なチャンネルと色相の計算を適用します。表示されるHSL値は整数に丸められます。
形式の使い分け
- HEXは短く、CSS、HTML、デザインツールで広く使われます。
- RGBは赤・緑・青の各値を直接指定します。
- HSLは色相、彩度、明度を調整するときに便利です。
対応形式と制限
- 不透明なsRGBカラーの短縮/通常HEX、カンマ区切りrgb()、カンマ区切りhsl()に対応します。
- アルファ透明度、RGBA、HSLA、空白区切りの新しいCSS構文、色名、広色域色空間には対応しません。
- HSL出力は度とパーセントの整数に丸めます。逆変換すると元のチャンネル値と完全一致せず、近い色になることがあります。
- 色と結果はブラウザー内に留まり、ページとコードはサイトから読み込まれます。
よくある質問
HEXカラーの#記号は何を表しますか？
16進カラー表記の印です。このツールは#の後に3桁または6桁のsRGB値を受け付けます。記号自体は色のチャンネルではありません。
HSLで色を明るくしたり暗くしたりできますか？
色相と彩度を保ち、明度を上げ下げします。明度を上げると、たとえば青が明るくなります。
透明色を入力できますか？
いいえ。不透明なHEX、RGB、HSL値のみ対応し、アルファチャンネルは扱いません。