HEX色をTailwindのクラスに変換

HEX色をTailwindのクラスに変換: 用途

Tailwind CSS を使っていて、ブランドカラーを HEX で受け取った場合、標準パレットのどの色が最も近いかを知りたいものです。角括弧付きの値でコードがあふれるのを避けられます。

このツールは、入力した色を Tailwind 3 パレットの242色（slate から rose までの 50〜950 の色調に、白と黒を加えたもの）と、目の知覚に近い OKLab 色空間の距離で比較します。近い順に5色をクラス付きで表示し、十分に似た色がないときはお知らせします。

使い方

1. 色を HEX または rgb() で貼り付けるか、カラーピッカーで選びます。
2. クラスの接頭辞（bg、text、border など）を選びます。
3. 最も近い色のクラスか、正確な値をコピーします。

使うタイミング

• ブランドカラーを Tailwind のプロジェクトに合わせる。
• Figma のレイアウトをクラスに変換する。
• テーマに新しい色を登録すべきか判断する。

よくある質問

最も近い色はどのように選ばれますか？

OKLab 色空間での色距離で選びます。RGB の数値を比べるより、人の目の知覚に近い結果になります。距離が小さいほど似た色です。

似た色がない場合は？

bg-[#1f6feb] のように角括弧で正確な値を使うか、ブランドカラーを brand のような名前でテーマに登録します（tailwind.config の theme.extend.colors、または Tailwind 4 の @theme）。

パレットは Tailwind 3 と 4 のどちらですか？

比較には Tailwind 3 標準パレットの HEX 値を使っています。Tailwind 4 は同じ色を OKLCH で定義し、やや鮮やかな色調ですが、名前（blue-600、red-500 など）は同じです。

本当に無料？

はい、100%無料です。登録不要、サブスクなし、利用制限なし。すべてのツール：Tools123は無料です。

関連ツール