カラーコード変換
HEX・RGB・HSLカラーコードを相互変換。カラーピッカー付き。
🔒ブラウザ内処理・アップロード不要
✨無料HEX
#3B82F6RGB
rgb(59, 130, 246)HSL
hsl(217, 91%, 60%)🎉
完成しました!
あなたにおすすめのツール
🎯同じシーンのおすすめツール
🔁
形式変換
JPG/PNG/WebPを相互変換。画質と背景色を調整して保存。
試してみる
🎯同じシーンのおすすめツール🎨
パレット抽出
写真から主要色を自動抽出し、HEXでコピーできる。
試してみる
🎯同じシーンのおすすめツール⚫️
2値化
写真を白と黒の2値に変換してシルエットや印刷向けに整える。
試してみる
💡
あなたの使用履歴に基づいておすすめを表示しています。使うほど精度が上がります。
このツールは誰向け？
Webデザイナー、フロントエンドエンジニア、UIデザイナー
使用場面
- 1HEXカラーコードをRGBに変換したい時
- 2デザインツールのカラー値をCSS用に変換したい時
- 3色の明度や彩度を調整したい時
よくある質問
FAQQ. HEX、RGB、HSLの違いは？
HEXは16進数で色を表現（#FF0000）、RGBは赤・緑・青の値（rgb(255,0,0)）、HSLは色相・彩度・明度（hsl(0,100%,50%)）で表現します。
Q. CSSではどの形式を使うべき？
どれもCSSで使えますが、HEXが最も一般的です。HSLは色の調整が直感的なため、デザインシステムやCSS変数で人気があります。
Q. 透明度（アルファ値）はどう指定しますか？
HEXでは末尾2桁（#FF000080）、RGBではrgba(255,0,0,0.5)、HSLではhsla(0,100%,50%,0.5)で指定します。値は0（完全透明）〜1（不透明）です。
Q. Figmaのカラー値をCSSに変換するには？
FigmaはHEX形式（#FF0000）で色を表示します。本ツールにHEX値を入力すれば、RGB・HSL形式のCSS値が即座に得られます。
Q. データは安全ですか？
すべての処理はブラウザ内で完結します。入力したカラーコードがサーバーに送信されることはありません。