ヒント：HEX（例：#0EA5B7）・RGB（例：rgb(14,165,183)）・HSL（例：hsl(187,86%,39%)）のいずれかを直接入力しても、他の表記に変換されます。すべてブラウザ内で処理されます。
カラーコード変換の使い方
- 左上の色の四角をタップして、好きな色を選びます。
- HEX・RGB・HSLの3つの表記が同時に表示されます。
- 「コピー」を押して、CSSやデザインソフトに貼り付けます。
- すでに色のコードが分かっている場合は、HEX・RGB・HSLのいずれかの欄に直接入力すると、他の表記に変換されます。
HEX・RGB・HSLの違い
3つとも同じ色を表す書き方です。HEXは「#0EA5B7」のように、赤・緑・青を16進数で並べます。Web制作で最もよく使われます。RGBは「rgb(14,165,183)」のように、赤・緑・青を0〜255の数値で表します。HSLは「hsl(187,86%,39%)」のように、色相・彩度・明度で表し、「少し明るく」「少しくすませて」といった調整がしやすい書き方です。
こんな場面で使えます
- デザインソフトの色をWebサイトのCSSに使いたいとき：RGBの数値をHEXに変換できます。
- ボタンやリンクの色違いを作りたいとき：HSLの明度（L）だけを変えると、同じ色みで濃淡を作れます。
- ブランドカラーを資料やスライドで統一したいとき：コードをコピーして使い回せます。
よくある失敗と対処
- HEXを入力しても変換されない：「#」のあとに、半角の0〜9とA〜Fで6桁（または3桁）になっているか確認してください。
- RGBの数値が範囲外：赤・緑・青は0〜255の範囲で入力します。
- 画面と印刷で色が違う：ここで表示される色は画面用（RGB）です。印刷はCMYKで再現されるため、見え方が変わります。
カラーコードのよくある疑問
HEXとRGBの違いは？
どちらも同じ色を表します。HEXは「#」に続く6桁（赤・緑・青を各2桁の16進数）で、RGBは0〜255の数値で表現します。CSSではどちらも使えます。
HSLはどんなとき便利？
HSLは色相（H）・彩度（S）・明度（L）で表すため、「同じ色みで少し明るく」などの微調整が直感的です。デザインの配色づくりに向いています。
3桁のHEX（#fff など）は使える？
はい。「#fff」のような3桁の省略形は、「#ffffff」と同じ色を表します。入力すると、RGB・HSLの欄に変換されます。
色名（redなど）や透明度（アルファ）には対応している？
本ツールは、HEX・RGB・HSLの相互変換に特化しています。色名や、透明度つきの指定はCSSに直接書いてお使いください。
最終更新：2026年10月