HEX・RGB・HSL を相互変換。CSSコードもワンクリックでコピー。
よく使う色
HEX・RGB・HSLのカラーコードを相互変換する無料ツールです。CSSのカラー指定、デザインツール間での色の受け渡し、配色の調整など、Web開発・デザインで頻繁に使う変換を瞬時に行えます。
HEX（#FF5733）、RGB（rgb(255, 87, 51)）、HSL（hsl(11, 100%, 60%)）の3形式に対応しています。いずれかの値を入力すると、他の2形式にリアルタイムで変換されます。CSSにそのままコピペできる形式で出力します。
カラーピッカーで視覚的に色を選択することもできます。選択した色のHEX/RGB/HSL値が即座に表示されるので、デザインの微調整に便利です。すべてブラウザ上で動作し、データがサーバーに送信されることはありません。
Webやデザインで色を指定する方法はいくつかありますが、もっともよく使われるのがHEX・RGB・HSLの3つです。いずれも同じ1色を表す異なる「書き方」にすぎず、相互に変換できます。このツールではどの形式で入力しても、残り2形式の値が自動で計算されます。
HEXは「#RRGGBB」という形式で、赤・緑・青の各成分を2桁の16進数（00〜FF＝10進数の0〜255）で並べたものです。たとえば #FF0000 は赤が最大（FF＝255）、緑と青が0で、純粋な赤を表します。3桁の省略表記（#F00 など、各桁を2回繰り返して #FF0000 とみなす）にも対応しています。CSSやHTMLでもっとも一般的な指定方法です。
RGBは赤（Red）・緑（Green）・青（Blue）の3つの光の強さを、それぞれ0〜255の数値で表します。CSSでは rgb(255, 0, 0) のように書きます。HEXの #FF0000 とRGBの rgb(255,0,0) はまったく同じ色で、表記が16進数か10進数かが違うだけです。各値をスライダーや数値で直感的に調整したいときに向いています。
HSLは色相（Hue：0〜360°の色味）、彩度（Saturation：0〜100%の鮮やかさ）、明度（Lightness：0〜100%の明るさ）で色を表します。CSSでは hsl(0, 100%, 50%) のように書きます。色相を回すだけで色味を変えられるため、配色の調整や「同じ明るさで色だけ変える」といった操作が直感的に行えます。RGB・HSLは数学的に相互変換でき、このツールでも内部で換算しています。
| 色 | HEX | RGB | HSL |
|---|---|---|---|
| 赤 | #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| オレンジ | #FFA500 | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| 黄 | #FFFF00 | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| 緑 | #008000 | rgb(0, 128, 0) | hsl(120, 100%, 25%) |
| シアン | #00FFFF | rgb(0, 255, 255) | hsl(180, 100%, 50%) |
| 青 | #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| 紫 | #800080 | rgb(128, 0, 128) | hsl(300, 100%, 25%) |
| 白 | #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| 灰 | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) |
| 黒 | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
上記のHSL値はこのツールと同じ変換ロジックで算出した値です。緑（#008000）や紫（#800080）のように明度（最後の値）が50%より小さい色は、純色（明度50%）より暗い色であることを示します。白・黒・灰のような無彩色は彩度（真ん中の値）が0%になり、色相は意味を持たないため0°と表記されます。