カラーコード変換（HEX・RGB・HSL）
色のHEX（#RRGGBB）とRGB・HSLを相互に変換。色のプレビューと基本色の対応表つき。
#3B5BF0
HEX#3B5BF0
RGBrgb(59, 91, 240)
HSL色相（Hue・色あい）・彩度（Saturation・鮮やかさ）・明度（Lightness・明るさ）で色を表す方法です。hsl(229, 86%, 59%)
HEX（#RRGGBB）とRGB・HSLを相互に変換します。どちらかを入力すると、もう一方が自動で更新されます。3桁の省略形（#abc）ではなく6桁で入力してください。すべて端末内で処理し、送信しません。
基本色のカラーコード対応表
| 色 | CSSの色名 | HEX | 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% |
| 緑 | green | #008000 | 0, 128, 0 | 120, 100%, 25% |
| 青 | blue | #0000FF | 0, 0, 255 | 240, 100%, 50% |
| 黄 | yellow | #FFFF00 | 255, 255, 0 | 60, 100%, 50% |
| 水色 | aqua / cyan | #00FFFF | 0, 255, 255 | 180, 100%, 50% |
| マゼンタ | fuchsia / magenta | #FF00FF | 255, 0, 255 | 300, 100%, 50% |
| 灰色 | gray | #808080 | 128, 128, 128 | 0, 0%, 50% |
| 銀 | silver | #C0C0C0 | 192, 192, 192 | 0, 0%, 75% |
| 紺 | navy | #000080 | 0, 0, 128 | 240, 100%, 25% |
| オレンジ | orange | #FFA500 | 255, 165, 0 | 39, 100%, 50% |
| ピンク | pink | #FFC0CB | 255, 192, 203 | 350, 100%, 88% |
| 紫 | purple | #800080 | 128, 0, 128 | 300, 100%, 25% |
| 茶 | brown | #A52A2A | 165, 42, 42 | 0, 59%, 41% |
RGB・HSLの値は、HEXから実際に変換して求めています。CSSでは色名をそのまま書くこともできますが、正確な色を指定したい場合はHEXを使うのが確実です。
HEX・RGB・HSLの違い
| HEX | #RRGGBB の6桁。赤・緑・青をそれぞれ00〜FF（0〜255）の16進数で表す。Webで最も一般的 |
|---|---|
| RGB | rgb(0, 0, 0) の形式。0〜255の10進数。透明度をつける場合は rgba(…, 0.5) |
| HSL | hsl(色相, 彩度%, 明度%) の形式。色相は0〜360度。「同じ色で明るさだけ変える」が直感的にできる |
| 3桁の省略形 | #abc は #aabbcc と同じ意味。各桁を2回繰り返した色になる |
| 16進数の読み方 | 0〜9 のあと A(10)〜F(15)。FF＝255（最大）、00＝0（最小）、80＝128（中間） |
| 色相（Hue）の目安 | 0＝赤、60＝黄、120＝緑、180＝水色、240＝青、300＝マゼンタ |
変換式
| HEX → RGB | 先頭2桁を16進数から10進数に（R）、次の2桁（G）、最後の2桁（B） |
|---|---|
| RGB → HEX | 各値を16進数2桁に変換して並べる（1桁なら先頭に0を付ける） |
| 明度 L | （RGBの最大値 ＋ 最小値）÷ 2 ÷ 255 × 100（%） |
| 彩度 S | 最大値と最小値の差から算出（差が0なら彩度0＝無彩色） |
| 色相 H | RGBのうち最大の成分によって式が変わり、0〜360度で表す |
| 明るさ（輝度） | 0.299 × R ＋ 0.587 × G ＋ 0.114 × B（文字色を白黒どちらにするかの判定に使う） |
色のカラーコードを、HEX（#RRGGBB）とRGB（赤・緑・青）・HSL（色相・彩度・明度）の間で相互に変換します。どちらかを入力すると、もう一方が自動で更新され、色のプレビューも表示。Webデザインや資料作成にどうぞ。
使い方
- HEXコード（例：#3b5bf0）を入力します。
- またはR・G・B（0〜255）を入力します。
- HEX・RGB・HSLと色のプレビューが表示されます。
よくある質問
HEXコードとは？
#RRGGBB の形式で色を表す方法です。赤・緑・青の明るさをそれぞれ00〜FF（0〜255）の16進数で表します。Webやデザインで広く使われます。
HSLとは？
色相（Hue・色あい）・彩度（Saturation・鮮やかさ）・明度（Lightness・明るさ）で色を表す方法です。色みを調整しやすいのが特徴です。
3桁の省略形（#abc）は使えますか？
このツールは6桁（#aabbcc）で入力してください。省略形の場合は各桁を2回繰り返すと6桁になります（#abc → #aabbcc）。