カラーコード変換 HEX⇔RGB⇔HSL
カラーピッカーまたはコード入力で、HEX・RGB・HSLをリアルタイム相互変換。CSS用コードをワンクリックコピー。
カラーコード変換ツールとは？
このツールは、HEX（16進数）・RGB・HSLのカラーコードを相互変換できる無料のオンラインツールです。カラーピッカーで色を選ぶか、コードを直接入力すると、3つの形式が同時に更新されます。Webデザイン（CSS）・画像編集・配色検討にそのまま使えます。
HEX・RGB・HSLの違い
いずれも同じ色を別の方法で表しているだけで、相互に変換できます。
- HEX：
#RRGGBBの16進数表記。Web/CSSで最もよく使われます（例：#FF0000＝赤）。 - RGB：赤・緑・青を 0〜255 で表す表記（例：rgb(255, 0, 0)）。
- HSL：色相(0〜360°)・彩度(%)・明度(%)で表す表記（例：hsl(0, 100%, 50%)）。明るさや鮮やかさを直感的に調整できます。
使い方のヒント
HSLは色相(H)を固定したまま明度(L)を上下させるだけで、同系色の濃淡（シェード）を簡単に作れます。サイトの配色やボタンのホバー色を決めるときに便利です。
カラーコードの変換方法（HEX・RGB・HSL）
HEX → RGB 変換
16進数カラーコードを2桁ずつ R・G・B に分け、それぞれ10進数に直します。例：#FF8800 → FF=255、88=136、00=0 → rgb(255, 136, 0)。3桁形式（#F80）は各桁を2回繰り返して6桁（#FF8800）として扱います。
RGB → HEX（16進数）変換
R・G・B の各値（0〜255）を16進数2桁に変換して連結します。例：rgb(0, 212, 255) → 0=00、212=D4、255=FF → #00D4FF。1桁になる場合は先頭に0を補います。
RGB → HSL 変換
R・G・B を 0〜1 に正規化し、最大値 Max と最小値 Min から求めます。明度 L =（Max+Min）÷2、彩度 S =（Max−Min）÷（1−|2L−1|）、色相 H は最大値がどの色かで場合分けして 0〜360° を算出します。RGB⇔HSL変換の専用ページで早見表つきの相互変換ができます。
HSL → RGB 変換
色相 H（0〜360°）・彩度 S（0〜100%）・明度 L（0〜100%）から逆算します。彩度が0のときは無彩色（R=G=B）になります。上の変換ツールに hsl(189, 100%, 50%) 形式で入力すれば自動計算されます。
カラーコード変換早見表（基本色 HEX・RGB・HSL）
| 色名 | HEX（16進数） | RGB | HSL |
|---|---|---|---|
| 白（White） | #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| 黒（Black） | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| 赤（Red） | #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| 緑（Lime） | #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| 青（Blue） | #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| 黄（Yellow） | #FFFF00 | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| 水色（Cyan） | #00FFFF | rgb(0, 255, 255) | hsl(180, 100%, 50%) |
| マゼンタ（Magenta） | #FF00FF | rgb(255, 0, 255) | hsl(300, 100%, 50%) |
| グレー（Gray） | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) |
| シルバー（Silver） | #C0C0C0 | rgb(192, 192, 192) | hsl(0, 0%, 75%) |
| えんじ（Maroon） | #800000 | rgb(128, 0, 0) | hsl(0, 100%, 25%) |
| 深緑（Green） | #008000 | rgb(0, 128, 0) | hsl(120, 100%, 25%) |
| 紺（Navy） | #000080 | rgb(0, 0, 128) | hsl(240, 100%, 25%) |
| オリーブ（Olive） | #808000 | rgb(128, 128, 0) | hsl(60, 100%, 25%) |
| 青緑（Teal） | #008080 | rgb(0, 128, 128) | hsl(180, 100%, 25%) |
| 紫（Purple） | #800080 | rgb(128, 0, 128) | hsl(300, 100%, 25%) |
| オレンジ（Orange） | #FFA500 | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| ピンク（Pink） | #FFC0CB | rgb(255, 192, 203) | hsl(350, 100%, 88%) |
| 茶（Brown） | #A52A2A | rgb(165, 42, 42) | hsl(0, 59%, 41%) |
| 金（Gold） | #FFD700 | rgb(255, 215, 0) | hsl(51, 100%, 50%) |
| 空色（SkyBlue） | #87CEEB | rgb(135, 206, 235) | hsl(197, 71%, 73%) |
| 若草色（YellowGreen） | #9ACD32 | rgb(154, 205, 50) | hsl(80, 61%, 50%) |
| ベージュ（Beige） | #F5F5DC | rgb(245, 245, 220) | hsl(60, 56%, 91%) |
| 藍（Indigo） | #4B0082 | rgb(75, 0, 130) | hsl(275, 100%, 25%) |
目的別のカラー変換ページ
変換したい形式が決まっている場合は、専用ページの方が早見表が充実しています。
- HEX⇔RGB変換（カラーコード rgb 変換） … 16進数カラーコードと RGB の相互変換に特化
- RGB⇔HSL変換（rgb hsl 変換） … 色相・彩度・明度での色調整に特化
- 画像スポイト（色抽出） … 画像をクリックしてHEX・RGBを取得
- 16進数→10進数変換 … カラーコード以外の16進数計算に
よくある質問
Q.HEX・RGB・HSLの違いは？
HEXは#RRGGBBの16進数表記、RGBは赤緑青を0〜255で表す表記、HSLは色相・彩度・明度で表す表記です。同じ色を異なる方法で表現しているだけで、相互に変換できます。
Q.カラーコードとは何ですか？
色をコンピュータで扱うための数値表記です。CSSや画像編集ソフトで色を指定する際に使われます。赤なら #FF0000、rgb(255,0,0) と表せます。
Q.HSLはどんなときに便利ですか？
明るさや鮮やかさを直感的に調整できるため、「同じ色相で少し明るく」といった配色調整に便利です。色相を固定して明度を変えるだけで濃淡を作れます。
Q.入力した色のデータは送信されますか？
いいえ。すべての変換はブラウザ上で行われ、データはサーバーに送信されません。