カラーコードを変換する
使い方
- カラーピッカーで色を選択するか、HEX・RGB・HSLのいずれかの値を入力します。
- 「変換」ボタンをクリックすると、他の形式に自動変換されます。
- 各形式の「コピー」ボタンでクリップボードにコピーできます。
- 色のプレビューがリアルタイムで表示されます。
すべての処理はブラウザ内で行われ、外部サーバーにデータが送信されることはありません。
カラーコードの形式について
HEX: #RRGGBB（16進数、例: #3b82f6）
RGB: rgb(R, G, B)（各0〜255、例: rgb(59, 130, 246)）
HSL: hsl(H, S%, L%)（色相0〜360, 彩度・明度0〜100%、例: hsl(217, 91%, 60%)）
RGB: rgb(R, G, B)（各0〜255、例: rgb(59, 130, 246)）
HSL: hsl(H, S%, L%)（色相0〜360, 彩度・明度0〜100%、例: hsl(217, 91%, 60%)）
HEXは16進数で色を表現する方法で、CSSで最も広く使われています。#の後に6桁の16進数（RRGGBB）を記述します。
RGBは赤（Red）・緑（Green）・青（Blue）の光の三原色で色を表現します。各値は0〜255の範囲で、0が最小、255が最大の強さです。
HSLは色相（Hue: 0〜360度）、彩度（Saturation: 0〜100%）、明度（Lightness: 0〜100%）で色を表現します。人間の色の認識に近いため、色の調整が直感的に行えるメリットがあります。
よくある質問
HEXカラーコードとは何ですか？
HEXは色を16進数で表現する方法です。#RRGGBBの形式で、各2桁が00〜FFの範囲で色の強さを表します。WebデザインやCSSで最も一般的に使われます。
RGBとHSLの違いは何ですか？
RGBは光の三原色（赤・緑・青）で色を表現します。HSLは色相・彩度・明度で表現し、人間の色の認識に近いため調整が直感的に行えます。
Webデザインではどのカラー形式を使うべきですか？
CSSではHEX・RGB・HSLすべて使用可能です。HEXは短くて広く使われ、RGBは透明度指定に便利、HSLは色調整が直感的です。用途に応じて使い分けましょう。