カラー変換ツール — HEX・RGB・HSL変換
デザイナーやエンジニアが日常的に扱う3つのカラー表記 — HEX（#3B82F6）、RGB（rgb(59, 130, 246)）、HSL（hsl(217, 91%, 60%)）— を相互変換します。HEXコードを入力すればRGBとHSLの値がすぐにわかり、モードを切り替えればRGB値からHEXコードを作成できます。
この計算の仕組み
HEXカラーは赤・緑・青の3チャンネルを16進数（0〜9、A〜F）6桁の文字列にまとめたものです。各チャンネルは2桁で、00からFF（10進数で0〜255）までの範囲です。#FFFのような3桁の省略形は各桁を2回繰り返したもので、#FFFは#FFFFFFと同じです。
RGBは同じ3チャンネルを0〜255の10進数でそのまま表します。そのためrgb(59, 130, 246)と#3B82F6はまったく同じ色です — 59 = 0x3B、130 = 0x82、246 = 0xF6。
HSLは同じ色を別の方法で表現します。色相（Hue）は0〜360°のカラーホイール上の位置（0=赤、120=緑、240=青）、彩度（Saturation）は色の鮮やかさ（0%=グレー、100%=完全な彩度）、明度（Lightness）は黒または白にどれだけ近いか（0%=黒、100%=白）を示し、RGB値の最大・最小とその差から計算されます。
計算例
HEX vs RGB vs HSL — 使い分けの目安
| 表記 | 例 | 適した用途 |
|---|---|---|
| HEX | #3B82F6 | デザインツール、ブランドカラー一覧、CSSへの素早いコピペ |
| RGB | rgb(59, 130, 246) | チャンネル値を明示したい場合やrgba()で透明度が必要な場合 |
| HSL | hsl(217, 91%, 60%) | 色相を保ったまま明度・彩度を調整してパレットを作る場合 |
HEXの桁とチャンネルの対応
- #RRGGBB — RRは赤（00〜FF）、GGは緑（00〜FF）、BBは青（00〜FF）
- 各2桁は16進数です：FF = 15×16+15 = 255、80 = 8×16+0 = 128、00 = 0
- #000000は黒、#FFFFFFは白、#FF0000は純粋な赤です
- 3桁の省略形は各桁を2回繰り返します：#ABC → #AABBCC
HSL値をひと目で読み解く
hsl(217, 91%, 60%)を見れば3つのことが瞬時にわかります：217°は青系の色相（青はおおむね210〜250°付近）、彩度91%はくすんでおらず鮮やかであること、明度60%は黒と白のちょうど中間より明るい側にあり、明るくクリアな青であることを示しています。
この性質のおかげでHSLは一貫したパレット作りに便利です。色相を217に固定したまま明度を20%（ほぼ黒に近いネイビー）から90%（淡いスカイブルー）まで変化させれば、同じ色系統の濃淡セットを作れます。
よく使われる基準色
| 名前 | HEX | RGB |
|---|---|---|
| 黒 | #000000 | rgb(0, 0, 0) |
| 白 | #FFFFFF | rgb(255, 255, 255) |
| 赤 | #FF0000 | rgb(255, 0, 0) |
| 緑 | #00FF00 | rgb(0, 255, 0) |
| 青 | #0000FF | rgb(0, 0, 255) |