DESIGN / UTILITY

Color Converter

HEX・RGB・HSL のカラーコードを相互変換できます。Web デザイン、バナー制作、UI 設計時の色確認をブラウザだけで完結できます。

カラーコード入力

HEX（#2563EB）、RGB、HSL のいずれかを入力してください。

入力形式

  • ・HEX: #2563EB / 2563EB / #fff
  • ・RGB: rgb(37, 99, 235)
  • ・HSL: hsl(221, 83%, 53%)

カラープレビュー

上のプレビューをクリックするとカラーピッカーが開き、入力欄と各コードが自動連動します。

HEX
#2563EB
RGB
37, 99, 235
HSL
221 / 83% / 53%
Picker
#2563EB

トーン比較

同じ色相・彩度を保ったまま、明るさ違いの色を確認できます。クリックするとその色へ切り替わります。

HEX

#2563EB

RGB

rgb(37, 99, 235)

HSL

hsl(221, 83%, 53%)

使い方

  1. 1. HEX・RGB・HSL を入力するか、右側のプレビューをクリックして色を選びます。
  2. 2. 自動変換された各形式とトーン比較を確認します。
  3. 3. 必要な形式をコピーして CSS やデザインツールに貼り付けます。

活用シーン

  • ・Figma / Photoshop 用の色確認
  • ・CSS の color / background-color 指定
  • ・ブランドカラーの探索と明度調整