Tailwind CSSのカラーパレット

Tailwind CSSには26系統のカラーパレットが用意されていて、各系統は50（最も明るい）から950（最も暗い）までの11段階です。v4ではOKLCH、v3ではHEXで定義されています。このツールは、すべての値を両方の形式で一覧にし、v4の色をHEXに変換し、そのまま使える@themeのCSSやtailwind.config.jsのコードを書き出します。カスタムモードでは、色相がいちばん近いTailwindの系統をモデルにして、ブランドカラーから50〜950のスケールを作ります。

使い方

1. 「標準のTailwindパレット」と系統（またはすべて）を選ぶか、「自分の色から作るカスタムスケール」を選びます。
2. コードの形式に合わせて、Tailwind v4かv3を選びます。
3. カスタムスケールでは、自分の色と、brandなどの名前を入力します。
4. コードをCSS（v4）または設定ファイル（v3）にコピーして、bg-brand-500のようなクラスを使います。

計算式

カスタムスケール：基準色は、明度がいちばん近い段階で値をそのまま保ちます。それより明るい段階は L = 1 − (1 − Lᵢ)(1 − L_b)/(1 − L_k)、暗い段階は L = Lᵢ · L_b/L_k、彩度は C = C_b · Cᵢ/C_k です。Lᵢ、Cᵢ はモデルにした系統から取ります。

L_b、C_b は自分の色のOKLCHの明度と彩度、L_k、C_k はその段階でのモデル系統の値です。色相はモデル系統の段階ごとのわずかな変化に従います。sRGBの範囲外の色は彩度を下げます。

計算例

blue-500はv4でoklch(62.3% 0.214 259.815)、v3で#3b82f6です。カスタムモードに#3B82F6を入力すると、blueをモデルにしたスケールの500段階に置かれるので、--color-brand-500は正確に#3b82f6になり、残りの10段階がその周りに明るく・暗く作られます。