CSS カラー変換ツール
HEX を RGB・HSL・Tailwind 任意値へ。
CSS
このツールについて
HEX で指定した色を RGB と HSL に変換し、マークアップにそのまま貼れる Tailwind の任意値クラスも生成します。既定のパレットに含まれないブランドカラーの扱いに向いています。
使い方
HEX の入力欄を書き換えると、各チャンネルの値と bg-[#…] の形式がすぐに更新されます。必要な表記をコピーしてコンポーネントに貼り付けてください。
例
初期値のスカイブルーで、HEX から RGB・HSL・任意値クラスへの流れを確認できます。
入力
#38bdf8出力
HEX: #38BDF8
RGB: rgb(56, 189, 248)
HSL: hsl(199, 93%, 60%)
Tailwind arbitrary: bg-[#38bdf8]ヒント
任意値のクラスも正式な Tailwind です。パレット内の近い色に寄せると、ブランドの色味がずれてしまいます。
知っておきたいこと
どの色形式を変換できますか?
3 桁または 6 桁の HEX 値を入力する(またはピッカーを使う)と、RGB、HSL、bg-[#38bdf8] のような Tailwind の任意値クラスが得られます。
なぜ最も近い Tailwind の色ではなく任意値クラスなのですか?
ブランドカラーは標準パレットと一致しないことが多く、近似すると気付かないうちにデザインが変わります。bg-[#hex] なら正確な色を保てます。