色コード変換 (HEX/RGB/HSL)
HEX・RGB・HSL のカラーコードを相互変換します。いずれかの形式に入力するとプレビューの色と他の2形式が即時に更新され、処理はブラウザ内で完結します。CSS やデザインツールでの色指定の変換に使えます。
-
使い方
- HEX・RGB・HSL のいずれかの欄に値を入力すると、残り 2 つの形式とプレビューの色が即時に更新されます。
- HEX は
#3366ccのような 6 桁 (3 桁の省略形も可) の 16 進数表記で入力します。 - RGB は赤・緑・青それぞれ 0〜255 の数値、HSL は色相 (H) 0〜360 度、彩度 (S) と明度 (L) を 0〜100% で入力します。CSS の
color: #3366cc;とcolor: hsl(220 61% 50%);のように、同じ色を別の表記に書き換えたいときに使います。
変換の根拠
HSL と RGB の相互変換は、W3C CSS Color Module Level 4 の仕様本文で定義されているアルゴリズムに基づきます。HSL→RGB 変換では、彩度 S と明度 L からクロマ C = (1 − |2L−1|) × S を求め、色相 H を 60 度ごとの 6 区間に分けてそれぞれの区間での中間値 X = C × (1 − |((H/60) mod 2) − 1|) を計算し、最後に全チャンネルへ (L − C/2) を加算して RGB の各値を得ます。逆方向の RGB→HSL は、RGB の最大値と最小値の差 (クロマ) から明度と彩度を逆算し、どのチャンネルが最大だったかによって色相を決定します。RGB の各チャンネル値 (0〜255) が示す色自体は、国際電気標準会議の IEC 61966-2-1 (sRGB) で定義された sRGB 色空間が前提になっており、HEX 表記はこの RGB 値を 16 進数 2 桁 × 3 チャンネルで表した別表記です。彩度 0% (無彩色) や明度 0%/100% (黒・白) では色相の値に意味がなくなるため、変換結果の色相が入力時の値と完全には一致しないことがあります。
よくある用途
| 場面 | 使い方 |
|---|---|
| デザインツールの色をCSSに反映 | デザインツールで表示された RGB 値を HEX や HSL に変換してスタイルシートに貼り付け |
| HSL で色味を調整したい | HEX の色を HSL に変換し、色相・彩度を保ったまま明度だけを変える |
| 配色の明度バランスを確認 | 複数の色をそれぞれ HSL に変換し、L (明度) の値を揃えて視認性を比較する |
| 画像から拾った色コードの表記変換 | 画像編集ソフトで調べた RGB 値を CSS で使う HEX 表記に変換する |
入力した値はサーバーに送信されず、このページを閉じると消えます。