UIカラー：実際のインターフェースでTailwindパレットを試す
Tailwindのカラーファミリーを選んで、ボタン、グラフ、フォーム、カード、バッジでの見え方を確認できます。メインの色調を調整し、ランダムなパレットを生成して、結果をエクスポートしましょう。
カラープレビューの使い方
- 1
ファミリーを選ぶ
上部のバーから好きなカラーファミリーを選びます。選んだファミリーはページのアドレスに保存されるので、リンクを共有できます。
- 2
色調を調整
ピッカーで600（メイン）、500（サブ）、200（ソフト）を変更するか、ランダムなパレットを生成します。インターフェース全体がすぐに更新されます。
- 3
パレットをエクスポート
気に入ったら、50から950までの全スケールをTailwind v4、Tailwind v3、Figma、CSS用にエクスポートします。スケールの色調をクリックするとコピーできます。
よくある質問
プロジェクトに取り入れる前に、パレットを適用した状態を確認するためです。明るい色調と暗い色調の相性、ボタンが十分に目立つか、グラフやフォームが読みやすいかを確かめられます。
600はアクションや強調要素、500はサブ要素やグラフ、100〜200は背景やソフトな状態、700〜800は明るい背景の上のテキストに使われます。
はい。ページのアドレスに選んだファミリーが含まれます（例：?family=yellow）。リンクを開くとそのファミリーが直接読み込まれます。
全スケールをTailwind v4の変数、Tailwind v3の設定、Figmaスタイル、CSS変数、またはHEX・RGB・HSL・OKLCHのコードのみとしてエクスポートできます。