HEX ↔ RGB 変換
HEX・RGB・HSL のカラー値を相互変換。
どのページでも使う（ブックマークレット）
見ているページを離れずに HEX ↔ RGB 変換 を使いたいですか? 下のボタンをブックマークバーにドラッグし、どのウェブサイトでもクリックすれば、その場で HEX ↔ RGB 変換 が開きます — すべてブラウザ内だけで動作します。
責任を持って使用してください: ブックマークレットはクリックしたページ上で実行されます。ネットバンキング・決済・医療などの機密性の高いサイトでは使用を避けてください — 使用は自己責任です。処理はすべてローカルで行われ、データはどこにも送信されません。利用規約をご覧ください。
- ブックマークバーが非表示なら表示します — Ctrl+Shift+B（Mac は ⌘+Shift+B）。
- 上のボタンをブックマークバーへドラッグします。
- 任意のウェブサイトを開いてブックマークをクリックすると、右上に HEX ↔ RGB 変換 パネルが表示されます。✛ でコーナーを移動、›/‹ で端に収納して再度引き出せます。
- もう一度ブックマークをクリック（または ✕）すると閉じます。
注: セキュリティポリシーの厳しい一部のサイトではブックマークレットがブロックされることがあります。
使用例
HEX → RGB & HSL
入力
#3B82F6
出力
rgb(59, 130, 246) · hsl(217, 91%, 60%)
RGB → HEX
入力
rgb(255, 99, 71)
出力
#FF6347 · hsl(9, 100%, 64%)
このツールについて
この無料オンライン色変換ツールは、HEX・RGB・HSL の間で色を変換します。3 つの形式のいずれかで値を入力するか — カラーピッカーを使うか、スポイトで画面のどこからでも色を取得すると（Chrome・Edge）— 他の形式がライブのスウォッチと共に即座に更新されます。短縮形・8 桁 hex はもちろん rgb()・hsl() 表記も受け付けます。すべてアップロードなしにブラウザ内で動作します。
使い方
- HEX・RGB・HSL の色を入力します（またはスウォッチで選びます）。
- 3 つの形式すべての変換値を読みます。
- 必要な形式をコピーします。
よくある用途
デザイントークンの形式間変換、CSS でのブランドカラーの一致、モックアップの hex コードを rgb() や hsl() へ変換、HSL による明度・彩度の調整。
よくある質問
HEX を RGB にどう変換しますか?
#3B82F6 のような hex 色を貼り付けると、ツールが同等の rgb(59, 130, 246) と hsl 値をライブのカラースウォッチと共に即座に表示します。
RGB と HSL を HEX に戻せますか?
はい。rgb() や hsl() の値を入力すると、対応する HEX・RGB・HSL が得られます — 変換はどの方向にも働きます。
この色変換ツールは無料ですか?
はい — 登録不要の完全無料オンライン HEX・RGB・HSL 変換ツールです。
短縮形や 8 桁の hex にも対応しますか?
はい。3 桁（#abc）、4 桁、6 桁、8 桁の hex コードを受け付け、アルファチャンネルは RGB/HSL 出力では無視されます。
色を視覚的に選べますか?
はい。内蔵のカラーピッカーで色を選ぶと、HEX・RGB・HSL 値が自動で更新されます。
画像や画面のどこからでも色を取得できますか?
Chrome と Edge で可能です。スポイトボタンを押す（または任意のページでブックマークレットを実行）とカーソルがピッカーになり — 画像・ウェブサイト・他のウィンドウの任意のピクセルをクリックして hex 色を取得します。スポイトは Firefox や Safari では利用できないため、対応する場所でのみボタンが表示されます。
データはどこかにアップロードされますか?
いいえ。すべての変換はアップロードなしにブラウザ内で行われます。
関連ツール