🎨 カラーコード変換
HEX・RGB・HSL のカラーコードを相互に変換し、色をプレビューします。
入力
HEX
#3B5BDB
※ HEX・RGB・カラーピッカーは相互に連動します。HSL は RGB から計算した参考値で、丸め誤差により再変換で1ずれることがあります。
解説
このツールは、Webデザインでよく使う色の表し方であるHEX・RGB・HSLを相互に変換します。HEXとRGB、カラーピッカーのどれを操作しても残りの表記と色見本が自動で連動するので、手元の色を別の記法へ素早く言い換えられます。
HEXは「#RRGGBB」のように赤(R)・緑(G)・青(B)の強さを16進数2桁ずつ並べた記法です。各2桁は00〜FF（10進で0〜255）に対応します。「#abc」のような3桁の省略形にも対応しており、各桁を2回繰り返した「#aabbcc」として解釈されます（例: #abc → #aabbcc）。
RGBは赤・緑・青の3原色をそれぞれ0〜255の整数で表す記法で、rgb(59, 91, 219) のように書きます。HEXと同じ「光の三原色」を別の数え方で表したもので、255に近いほどその色が強くなります。たとえば純粋な赤は #FF0000 ＝ rgb(255, 0, 0) です。
HSLは色相(Hue: 0〜360°)・彩度(Saturation: 0〜100%)・明度(Lightness: 0〜100%)で色を表す記法です。色相は色の種類を角度で表し、0°/360°が赤、120°が緑、240°が青あたりに対応します。色味はそのままで明るさや鮮やかさだけを調整したいときに直感的で、本ツールではRGBの値から計算して表示します。
具体例として、HEXの「#3B5BDB」はRGBで「rgb(59, 91, 219)」、HSLでは「hsl(228, 69%, 55%)」に相当します（59=3B, 91=5B, 219=DB）。純粋な赤「#FF0000」なら rgb(255, 0, 0)・hsl(0, 100%, 50%) です。
なお本ツールは不透明色のみを扱い、透明度（アルファ値）には対応していません。変換はすべてお使いのブラウザ内で行われ、入力内容が外部へ送信されることはありません。
よくある質問
HEXとRGBとHSLの違いは何ですか？
いずれも同じ色を表す記法です。HEXは#RRGGBBの16進2桁、RGBは赤・緑・青を0〜255で、HSLは色相(0〜360°)・彩度(%)・明度(%)で表します。HEX・RGBはデザイン指定で、HSLは明るさだけ調整したいときに便利です。
#3B5BDB はRGB・HSLでいくつになりますか？
rgb(59, 91, 219)、hsl(228, 69%, 55%) です。HEXの各2桁（3B・5B・DB）が10進で59・91・219に対応します。
純粋な赤のカラーコードは？
HEXで #FF0000、RGBで rgb(255, 0, 0)、HSLで hsl(0, 100%, 50%) です。緑は #00FF00 ＝ rgb(0, 255, 0)、青は #0000FF ＝ rgb(0, 0, 255) になります。
3桁の短いHEX（#abcなど）は使えますか？
使えます。#abc のような3桁表記は、各桁を2回繰り返した #aabbcc として解釈されます。
透明度（アルファ値）には対応していますか？
対応しています。不透明度スライダーで0〜100%を指定すると、RGBA・HSLA・8桁HEX（#RRGGBBAA）を表示します。入力側でも #RRGGBBAA や #RGBA の8桁・4桁HEXを読み取り、アルファを反映します。色見本は市松模様の上に半透明色を重ねて透け具合を確認できます。
HSLを直接入力して変換できますか？
HSLは表示専用で、入力欄はHEX・カラーピッカー・RGBの3つです。HSLの値は入力されたRGBから計算して表示します。