カラー変換
このカラーコード変換ツールは、あらゆる色を HEX・RGB・HSL の間で変換し、3 つの形式を同時に更新してプレビューの色見本を表示します。
このツールについて
このカラーコード変換ツールは、あらゆる色を HEX・RGB・HSL の間で変換し、3 つの形式を同時に更新してプレビューの色見本を表示します。
使い方
- HEX コード、RGB 値、HSL 値のいずれかを入力するか、ピッカーで色を選びます。
- 残りの 2 つの形式とプレビューが自動で更新されます。
- アイデアが欲しいときは「ランダムカラー」を使い、「HEX をコピー」または「RGB をコピー」でコピーします。
知っておきたいこと
- HEX は RGB を 16 進数で表した表記で、#RRGGBB の各ペアは 00–FF（10 進数で 0–255）です。
- #0af のような 3 桁の短縮形は #00aaff に展開されます。
- HSL は色を色相（0–360°）、彩度（0–100%）、明度（0–100%）で表します。
- HEX・RGB・HSL は同じ sRGB の色を表しているため、相互に変換しても色は変わりません。
すべてブラウザ内で動作します。入力した内容がアップロード・保存されることはありません。
よくある質問
HEX を RGB に変換するには？
6 桁を 2 桁ずつ 3 組に分け、それぞれを 16 進数から 10 進数に変換します。たとえば #1DB954 は rgb(29, 185, 84) です。
HEX ではなく HSL を使うのはどんなときですか？
HSL なら数値を 1 つ変えるだけで、色の明るい版・暗い版・彩度を抑えた版を簡単に作れるため、デザインシステムに便利です。
変換すると色の精度が落ちますか？
このツールでは HSL の値を整数に丸めるため、往復変換でチャンネルが 1 段階ずれることがありますが、見た目の差はごくわずかです。
サーバーに何か送信されますか？
いいえ。変換はすべてブラウザ内で行われます。