Tailwind CSS カラー スケール 生成ツール

Tailwind CSS カラー スケール 生成ツール

1つのhex色を貼り付け、すぐに完全なTailwindスタイルの50から950のパレットを取得できます。スケールはOKLCH色空間で構築されており、すべての停止が人間の目にとって均等な明るさのジャンプを実現します — RGBまたはHSLの線形減少とは異なります。

結果をそのままコピーして tailwind.config.jsに貼り付け、CSSカスタムプロパティまたはSCSS変数として挿入、または設計トークンパイプラインとしてJSONとしてエクスポートできます。

使用方法

1. 色選択器でベース色を選択するか、hex値のように #464aff.
2. パレットに名前を付ける（たとえば primary, brand、 または accent）— これはエクスポートコードにおけるオブジェクトキーになります。
3. 選択 Tailwind v4 (OKLCH) ための現代的な oklch() CSS、または Tailwind v3 (hex) ための古典的なhex出力。
4. 950の停止をオンまたはオフに切り替え、Chromaスライダーを上または下に動かして飽和度を強調または抑制できます。
5. エクスポートフォーマットを選択 — Tailwind設定、CSSカスタムプロパティ、SCSS変数、またはJSON — その後、生成されたコードをコピーまたはダウンロードします。
6. プレビュー内の任意のスワッチをクリックして、そのhex値をクリップボードにコピーします。

機能

• OKLCHの視覚的数学 — OKLCH色空間で明るさとChromaを補間し、50から950の範囲内のすべての停止が人間の目にとって均等なステップを実現します。
• 完全な50から950スケール — 11停止のTailwindパレットを生成し、必要に応じて追加の暗い950停止を削除できるオプションを提供します。
• リアルタイムスワッチプレビュー — すべての色を一目で確認し、任意のスワッチをクリックしてhex値をコピーし、タイプ中にスケールを即座に調整できます。
• WCAGコントラストチェッカー — 各停止は白および黒の背景でAAおよびAAAの通過または失敗のバッジで評価されます。
• 複数のエクスポートターゲット — CSS変数、SCSS変数、または純粋なJSON設計トークンとして出力します。 tailwind.config.js, :root Chromaブースト制御
• — 1つのスライダーですべての停止の飽和度をスケーリングし、色調を変更せずに明るさを強調または減らすことができます。 ゲマット安全
• — 各明るさレベルでChromaが自動的にカーブされ、生成されたhex値が常にsRGB内にレンダリングされます。 OKLCH色空間とは？