Tailwindパレットジェネレーター: 11段階カラースケール
1つのベースカラーから、50から950までの11段階のTailwind風カラースケールを生成します。パレットは、Tailwind v3が採用する知覚的に均一な色空間OKLchで明度を変化させます。生成されたシェードを確認し、値をクリックしてコピーしたり、付属のそのまま貼れるTailwind設定スニペットを使ったりできます。生成前に利用可能なオプションを設定します。
Tailwindパレットジェネレーターは、1つのベースカラーから11段階のTailwind風カラースケールを作成します。50、100から950までの番号付きシェードを生成するため、1つ1つ手で作るよりも統一感のあるパレットを簡単に構築できます。各シェードはクリックでコピーでき、そのまま貼れるTailwind設定スニペットも含まれています。
生成ツールは、Tailwind v3が採用する知覚的に均一な色空間OKLchで明度を変化させてスケールを構築します。利用可能なオプションを設定し、ベースカラーを指定してパレットを生成すれば、結果のシェードを確認できます。その後、個別の値をコピーしたり、付属の設定スニペットを使ったりできます。
パレットは関連するカラー値の並びであり、Tailwind設定スニペットは生成したパレットをTailwindプロジェクトで使う便利な手段です。1つのベースカラーからシェードを作れば、インターフェースやプロジェクトデータ用に、明るい値から暗い値まで一貫した範囲を確立できます。50–950の番号付けにより、スケール操作時に各ステップを識別しやすくなります。
このツールは完全にブラウザ上で動作し、入力はサーバーに送信されるのではなくデバイス上で処理されます。サーバー依存がないため、ページ読み込み後はオフラインでも動作し続けます。Tailwindパレットジェネレーターは無料で、開発者、デザイナー、DevOpsエンジニアが完全なカラースケールを素早く作成・コピーするのに役立ちます。
手順1: パレットの起点となる1つのベースカラーを指定します。生成ツールはこれを使って11段階のスケール全体を構築します。
手順2: 生成前に利用可能なオプションを設定します。具体的なオプションはツール内で確認できます。
手順3: パレットを生成し、50から950までの番号が付けられたシェードを確認します。
手順4: シェードをクリックして値をコピーするか、付属のそのまま貼れるTailwind設定スニペットをコピーします。
用途: 1つのベースカラーから、デザインシステム用のTailwind風シェード一式を作成します。
用途: テスト、フィクスチャ、シードデータ用のカラー値を、各シェードを手で入力せずに準備します。
用途: 1つずつ値を考える代わりに、50–950のスケール全体を一度に生成します。
用途: プロジェクト用のパレットを構築し、必要なときに個別のシェード値をコピーします。
用途: 付属の設定スニペットを使い、生成したパレットをTailwindの設定に取り込みます。
用途: OKLchベースのスケールで、パレット全体にわたる明度の変化を探索します。