カラーコード変換(HEX・RGB・HSL)

HEX・RGB・HSLの3形式を相互変換。カラーピッカーで直感的に色を選び、
CSS値をワンクリックでコピーできます。

#FF5733

R
G
B

rgb(255, 87, 51)

H
S %
L %

hsl(11, 100%, 60%)

カラーコード変換とは?

Web開発やデザインでは、色を表現するために主に3つの形式が使われます。 HEX(16進数)、RGB(赤・緑・青)、HSL(色相・彩度・明度)の3形式を 相互に変換することで、ツールやコード間でスムーズに色を受け渡せます。

  • HEX:#FF5733 のような16進数表記。CSSで最も一般的
  • RGB:rgb(255, 87, 51) のように赤・緑・青の0〜255で指定
  • HSL:hsl(11, 100%, 60%) のように色相・彩度・明度で指定。直感的に色を調整しやすい

こんなときに便利

  • CSSの色指定でHEXとRGBを変換したい
  • デザインツール(Figma等)から受け取った色をCSS形式に変換したい
  • HSLで明度・彩度を微調整して色バリエーションを作りたい
  • アクセシビリティのコントラスト比チェック用に色情報を取得したい