色変換ツール
このツールについて
使い方
- HEX・RGB・HSL いずれかのフィールドに値を入力すると、他のフォーマットにリアルタイム変換します
- カラーピッカーをクリックして視覚的に色を選択することもできます
- 各フォーマットの「コピー」ボタンで値をクリップボードにコピーできます
色の表現形式
HEX: #RRGGBB 形式。CSS で最も一般的に使われる16進数表記です。
RGB: 赤・緑・青の3原色を 0〜255 の値で指定します。
HSL: 色相 (0〜360)・彩度 (0〜100%)・明度 (0〜100%) で色を表現します。直感的に色を調整しやすい形式です。
RGB と CMYK の違い
RGB は光の三原色 (赤・緑・青) を混ぜて色を表現する「加法混色」で、 ディスプレイなどの発光デバイスで使用されます。 一方 CMYK はインクの三原色 (シアン・マゼンタ・イエロー) + 黒で「減法混色」を行い、 印刷物で使用されます。 同じ色でも RGB と CMYK では再現できる色域が異なるため、 画面で見た色と印刷結果が異なることがあります。
HSL が直感的な理由
HSL (色相・彩度・明度) は人間の色の知覚に近いモデルです。 「赤を少し明るくしたい」場合、RGB では3つの値を調整する必要がありますが、 HSL では Lightness (明度) を上げるだけで済みます。 CSS でも hsl() 関数が使え、デザイナーに好まれるカラーモデルです。
Web カラーの歴史
256 色ディスプレイの時代には、216 色の「Web セーフカラー」以外は意図通りの色で表示されませんでした。 これは RGB 各チャネルを 0, 51, 102, 153, 204, 255 の6段階に制限したもので、 6×6×6 = 216 色です。 現代のディスプレイはフルカラー (約1677万色) を表示できますが、 #ff0000 のような16進数表記はこの時代から続く形式です。
- CSS Color Module Level 4 - W3C
CSS の色表現 (HEX / rgb() / hsl() / hwb() / lab() 等) の公式仕様
- <color> - CSS MDN
CSS の色指定の書式・変換方法のリファレンス
- HSL and HSV - Wikipedia
HSL / HSV カラーモデルの数学的定義と RGB との変換式
- WCAG 2.1 コントラスト比 - W3C
アクセシビリティ観点でのコントラスト比基準 (AA: 4.5:1 以上)
このツールの更新履歴
色変換ツールを公開
HEX・RGB・HSL の相互変換とカラーピッカーに対応します。