色変換ツール

このツールについて

使い方

HEX・RGB・HSL いずれかのフィールドに値を入力すると、他のフォーマットにリアルタイム変換します
カラーピッカーをクリックして視覚的に色を選択することもできます
各フォーマットの「コピー」ボタンで値をクリップボードにコピーできます

色の表現形式

HEX: #RRGGBB 形式。CSS で最も一般的に使われる16進数表記です。

RGB: 赤・緑・青の3原色を 0〜255 の値で指定します。

HSL: 色相 (0〜360)・彩度 (0〜100%)・明度 (0〜100%) で色を表現します。直感的に色を調整しやすい形式です。

よくある質問

Q. 透明度 (アルファ値) には対応していますか?: A. 現在の表示は不透明色 (RGB / HSL) の変換のみに対応しています。CSS で透明度が必要な場合は、変換後の値を rgba() や hsla() の形に手動で書き換えてください。
Q. 3桁の HEX (#abc など) も使えますか?: A. 使えます。#abc は #aabbcc と同じ色として展開され、RGB / HSL に正しく変換されます。
Q. 印刷物に使う色の指定にも使えますか?: A. このツールは画面表示向けの RGB ベースです。印刷では CMYK が使われ色域が異なるため、印刷物用の色指定は印刷会社や Adobe 製品など CMYK 対応のツールで確認することをおすすめします。
Q. 色のコントラスト比をチェックしたい場合はどうすればよいですか?: A. このツールには含まれていませんが、WCAG では本文のコントラスト比 4.5:1 以上が推奨されています。HEX 値が分かれば「コントラスト比チェッカー」等のオンラインツールで簡単に確認できます。

HEX

RGB

HSL

豆知識

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 以上)

このツールの更新履歴

2026-02-22 新ツール
色変換ツールを公開
HEX・RGB・HSL の相互変換とカラーピッカーに対応します。