カラーコードの変換（16進数・RGB・HSL）
カラーコードは、16進数（#RRGGBB）・RGB（0〜255）・HSL（色相・彩度・明度）で同じ色を表せます。たとえば #1E90FF は rgb(30, 144, 255)、hsl(210, 100%, 56%) です。どれかの欄に入れると、残りと色見本がその場で変わります。
色を入れて変換
HSL は整数に四捨五入して表すため、HSL から RGB に戻すと1ずれることがあります（RGB と16進数は完全に往復できます）。画面の設定によって、見え方は変わります。
よく使う色の早見表（CSSの色名）
| 色名 | 16進数 | RGB | HSL |
|---|---|---|---|
| black | #000000 | 0, 0, 0 | 0, 0%, 0% |
| white | #FFFFFF | 255, 255, 255 | 0, 0%, 100% |
| red | #FF0000 | 255, 0, 0 | 0, 100%, 50% |
| lime | #00FF00 | 0, 255, 0 | 120, 100%, 50% |
| blue | #0000FF | 0, 0, 255 | 240, 100%, 50% |
| yellow | #FFFF00 | 255, 255, 0 | 60, 100%, 50% |
| cyan | #00FFFF | 0, 255, 255 | 180, 100%, 50% |
| magenta | #FF00FF | 255, 0, 255 | 300, 100%, 50% |
| gray | #808080 | 128, 128, 128 | 0, 0%, 50% |
| orange | #FFA500 | 255, 165, 0 | 39, 100%, 50% |
| dodgerblue | #1E90FF | 30, 144, 255 | 210, 100%, 56% |
| tomato | #FF6347 | 255, 99, 71 | 9, 100%, 64% |
カラーコードの読み方と変換のしかた
16進数（#RRGGBB）赤・緑・青の強さを、00〜FF（0〜255）の16進数2桁ずつ並べた表記です。#1E90FF は 赤1E（30）・緑90（144）・青FF（255）。#F00 のような3桁は、各桁を重ねた #FF0000 の省略形です。
RGB赤・緑・青をそれぞれ0〜255で表します。rgb(30, 144, 255) のように書き、16進数と1対1で変換できます。
HSL色相（H）・彩度（S）・明度（L）で表します。色相は色の輪の角度（0〜360度。赤0・緑120・青240）、彩度と明度は0〜100%です。hsl(210, 100%, 56%) のように書き、「少し明るくする」などの調整がしやすい表記です。
変換の丸めRGB から HSL へは、色相を整数の度、彩度・明度を整数の%に四捨五入します（30, 144, 255 → 210, 100%, 56%）。そのため、HSL を RGB に戻すと元と1ずれることがあります（hsl(210, 100%, 56%) を RGB にすると #1F8FFF で、#1E90FF とは1ずれます。丸めた整数の HSL が元の色そのものではないためです）。HSL で入れた色が基準なら、HSL の値を使ってください。
式の根拠変換式は W3C の CSS Color Module Level 4 の定義です。色の見え方は画面の設定で変わります（sRGB の値は同じです）。
カラーコードのよくある質問
16進数のカラーコードをRGBに変換するには？
2桁ずつ分けて10進数にします。#1E90FF なら 1E＝30、90＝144、FF＝255 で rgb(30, 144, 255) です。
#FFF や #F00 は何の色ですか？
3桁は各桁を2回ずつ重ねた省略形です。#FFF は #FFFFFF（白）、#F00 は #FF0000（赤）です。
RGBからHSLへ変換するとずれるのはなぜ？
HSL は色相・彩度・明度を整数に丸めて表すため、戻したRGBが元と1ほどずれることがあります。RGB と16進数は丸めが無く、完全に往復できます。
rgb(…) や hsl(…) の形のまま貼れますか？
貼れます。「色の表記から入力」の欄に、#1E90FF・1E90FF・rgb(30,144,255)・hsl(210,100%,56%) のどれを入れても読み取り、下の各欄に反映します。
入力した色は送信されますか？
されません。計算はこの端末のブラウザの中だけで行い、サーバーには送らず、URLにも載せません。
2026年10月3日現在の情報です（データ最終更新: 2026年10月2日）。出典: W3C「CSS Color Module Level 4」（16進表記・rgb()・hsl() の定義と HSL から RGB への変換式。2026-10-02 確認）
