HEX・RGB・HSL間の色変換方法
クイック概要
HEX、RGB、HSL間の色変換方法を解説します。3つの色形式の違いと用途別の選び方、RGBとHSLの違い、CSS color-mix関数の活用ヒント、ライブプレビューで相互変換する手順を紹介するデザイナー・開発者向けガイドです。
主なポイント
HEX、RGB、HSLはCSSで広く使われる3つの色形式です。HEXは#2563EB、RGBはrgb(37, 99, 235)、HSLはhsl(217, 83%, 53%)と表記し、3つは同じ色を異なる表現で表します。用途に応じてHEXはCSS、RGBはアルファチャンネル、HSLはカラーパレット設計に適しています。
NeatForge カラー変換ツール は、3形式を1画面で同時編集・ライブプレビューし、CSS対応の文字列を1クリックでコピーできます。
3つの色形式とは？
- HEX：16進数でRGB成分を表現。
#RRGGBB（6桁）または#RGB（3桁の短縮形）。CSSで最も一般的。 - RGB：赤・緑・青の成分を0〜255の10進数で指定。
rgb(r, g, b)。アルファ付きはrgba(r, g, b, a)。 - HSL：色相（Hue）・彩度（Saturation）・明度（Lightness）。
hsl(h, s%, l%)。色相は0〜360度、彩度・明度は0〜100%。
用途別の選び方
- HEX：CSSの
color、background-colorなどで最も簡潔。3桁短縮形も使える。 - RGB：
rgba()でアルファ（不透明度）を指定する場合に便利。 - HSL：明度や彩度だけ変えたい場合に直感的。カラーパレット設計に最適。
RGBとHSLの違い
RGBは光の三原色の混合で色を記述しますが、人間の色の認識とは直感的に一致しません。「同じ色相で少し暗い色」を作るにもR/G/Bを再計算する必要があります。
HSLは色相を角度で指定し、彩度と明度を独立して調整できます。hsl(217, 83%, 53%)の明度を43%にするだけで同色相の暗い色が作れます。このためデザイナーはHSLを好んで使います。
変換方法
- カラー変換ツール を開きます。
- HEXを入力するか、RGB/HSLの数値を調整するか、クイックプリセットをクリックします。
- 上部の見本で色を確認します。
- 必要な形式の横のコピーボタンでCSS対応文字列をコピーします。
3桁HEX（#fff）は自動的に6桁（#FFFFFF）に展開されます。
CSSのヒント：color-mix
最近のCSSではcolor-mix()関数で2色を混色できます。HSLと組み合わせると便利です：
--brand: hsl(217, 83%, 53%);
--brand-soft: color-mix(in srgb, var(--brand) 80%, white);HSLで基本色相を決め、color-mix()で派生色を作ると一貫性のあるパレットを構築できます。
相対カラーシンタックス（hsl(from var(--brand) h s 40%)）を使えば、変数を元に明度だけ変更した色も直接生成できます。対応ブラウザを確認のうえ活用してください。
FAQ
Q. 3桁のHEX短縮形はいつ使えますか？
#fffのように各成分が同じ値の繰り返し（#ffffff）の場合のみ使えます。それ以外は6桁で指定してください。
Q. HSLとOKLCHはどちらが良いですか？ HSLは広くサポートされていますが、知覚的な均一性に欠けます。最新ブラウザではOKLCHがより正確な色操作を提供します。
Q. アルファ（不透明度）を指定するには？
rgba(37, 99, 235, 0.5)またはhsla(217, 83%, 53%, 0.5)を使います。HEXでも8桁表記#2563EB80でアルファを指定できます。
Q. コントラスト比の確認にも使えますか？ このツールは色の形式変換に特化しています。WCAGのコントラスト比確認には、変換したRGB値を専用のコントラストチェッカーに入力してください。明度の高い背景色と組み合わせてアクセシビリティ要件を満たすか確認することをお勧めします。
Q. Figmaの色をCSSに持ってくるには？
FigmaのHEX値を本ツールのHEX欄に貼り付け、必要な形式（rgb()やhsl()）のコピーを取得するだけです。Tailwindプリセットから出発して微調整することもできます。
Q. 無効なHEXを入力したらどうなりますか？ RGBとHSLの値はHEXが有効な場合にのみ更新されます。無効な入力でも前の色が保持されるため、入力途中で結果が消えることはありません。