テキスト・開発者向けBROWSER · 0 UPLOADS · 無料
🔒ブラウザ内処理・アップロード不要
カラーコード変換
HEX・RGB・HSLカラーコードを相互変換。カラーピッカー付き。
HEX
#3B82F6RGB
rgb(59, 130, 246)HSL
hsl(217, 91%, 60%)NEXT STEPS
完成しました
あなたにおすすめのツール
同じシーンのおすすめツール
形式変換
JPG/PNG/WebPを相互変換。画質と背景色を調整して保存。
同じシーンのおすすめツール
パレット抽出
写真から主要色を自動抽出し、HEXでコピーできる。
同じシーンのおすすめツール
2値化
写真を白と黒の2値に変換してシルエットや印刷向けに整える。
使用履歴に基づいておすすめを表示しています
このツールは誰向け？
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では末尾2桁（#FF000080）、RGBではrgba(255,0,0,0.5)、HSLではhsla(0,100%,50%,0.5)で指定します。値は0（完全透明）〜1（不透明）です。
Figmaのカラー値をCSSに変換するには？
FigmaはHEX形式（#FF0000）で色を表示します。本ツールにHEX値を入力すれば、RGB・HSL形式のCSS値が即座に得られます。
データは安全ですか？
すべての処理はブラウザ内で完結します。入力したカラーコードがサーバーに送信されることはありません。