テキスト・開発端末内で処理・アップロードなし
🔒ブラウザ内処理・アップロード不要
カラーコード変換
HEX・RGB・HSLカラーコードを相互変換。#RGBの短縮HEXとカラーピッカーにも対応。
色をHEX・RGB・HSLへ変換する
一つの色を選ぶと、CSSで使える三つの表記を同時に確認できます。
1. 色を選ぶ
カラーピッカーまたはHEXコードから色を指定します。
2. 数値で微調整する
RGBまたはHSLのどちらを変更しても、ほかの表記へすぐ反映します。
3. 変換結果
必要な表記だけをコピーできます。値はすべてこのブラウザ内で計算しています。
HEX
#3B82F6RGB
rgb(59, 130, 246)HSL
hsl(217, 91%, 60%)このツールは誰向け？
Webデザイナー、フロントエンドエンジニア、UIデザイナー
使用場面
- 1HEXカラーコードをRGBに変換したい時
- 2デザインツールのカラー値をCSS用に変換したい時
- 3色の明度や彩度を調整したい時
よくある質問
HEX、RGB、HSLの違いは？
HEXは16進数で色を表現（#FF0000）、RGBは赤・緑・青の値（rgb(255,0,0)）、HSLは色相・彩度・明度（hsl(0,100%,50%)）で表現します。
CSSではどの形式を使うべき？
どれもCSSで使えますが、HEXが最も一般的です。HSLは色の調整が直感的なため、デザインシステムやCSS変数で人気があります。
透明度（アルファ値）も変換できますか？
このツールは不透明なHEX・RGB・HSLの相互変換に特化しています。透明度が必要な場合は、コピー後にCSSのrgb()やhsl()へアルファ値を追加してください。
Figmaのカラー値をCSSに変換するには？
FigmaはHEX形式（#FF0000）で色を表示します。本ツールにHEX値を入力すれば、RGB・HSL形式のCSS値が即座に得られます。
データは安全ですか？
すべての処理はブラウザ内で完結します。入力したカラーコードがサーバーに送信されることはありません。