カラーピッカー＆変換

HEX、RGB、HSL 形式間で色を変換。任意の色を選んで CSS 値を即座にコピー。

カラースクエアをクリックしてネイティブカラーピッカーを開くか、下の値を編集してください。

#3B82F6
rgb(59, 130, 246) • hsl(217, 91%, 60%)

HEX

RGB

HSL

CSS 値

HEX#3B82F6
RGBrgb(59, 130, 246)
HSLhsl(217, 91%, 60%)

カラー変換の使い方

  1. 1.カラースクエアをクリックしてネイティブカラーピッカーを開きます。
  2. 2.または HEX フィールドに直接入力します。
  3. 3.RGB または HSL スライダーで微調整します。
  4. 4.任意のフォーマットの横にあるコピーをクリック。

よくある質問

HEX、RGB、HSL の違いは？

HEX は6桁の16進数表記。RGB は赤、緑、青を 0-255 で指定。HSL は色相（0-360）、彩度（0-100%）、明度（0-100%）。

HSL と RGB の使い分けは？

HSL は明るさや鮮やかさの調整に直感的。明るく？L を上げる。落ち着いた色に？S を下げる。

RGB/HSL から HEX に変換できますか？

はい — RGB の入力やスライダーを編集すると、すべてのフォーマットがリアルタイムで更新されます。

変換後の HSL が微妙に違うのはなぜ？

HEX/RGB は整数、HSL は浮動小数点演算を使用するため、丸め誤差でごくわずかな差が生じます。