Go Toolstack

Tailwind CSS カラーパレット生成 (50-950)

単一の基本色からTailwind CSS互換の50〜950のフルグラデーションパレットを生成。

Tailwind CSS カラーパレット生成 (50-950)

単一の基本色からTailwind CSS互換の50〜950のフルグラデーションパレットを生成。

使い方

1
Set Criteria & Options
Select length, format, or generation parameters for your output.
2
Generate Instantly
Generate secure, random, or custom data entirely in your browser.
3
Copy or Export
Copy the generated output to your clipboard or download the file.

このカテゴリーの他のクライアントサイドツールを見る

画像 & デザインハブ • ワークフローと機能比較

すべての画像 & デザインツール、ブラウザの制限、および目的別選択ガイドを確認できます。

ハブを見る →
JSONフォーマッター & バリデーター

64ビット精度を保持してJSONを整形・圧縮し、JSON Schema（Draft-07 / 2020-12）で厳格に検証します。
Base64 エンコーダー & デコーダー

テキストやファイルをBase64形式にエンコード、またはプレーンテキストにデコード。
SQLフォーマッター & 圧縮ツール

ブラウザ上でSQLクエリを美しくインデントし、キーワードを大文字化して圧縮。

関連ブログガイド

技術ガイド、トラブルシューティング、ベストプラクティス解説

概念＆ナレッジハブ

Tailwind CSSカラーパレット生成ツール、50-950シェードスケールと設定出力

Tailwind CSSを用いたUIデザインシステム構築において、ブランドカラーを1色決めた後、その色に調和する11段階のシェードスケール（50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950）を手作業で調色するのは至難の業です。知覚的な明度分布（OKLCH / HSL色空間）に基づいて、ブランドキーカラーから美しく破綻のない完全なTailwindカラーパレットを自動生成します。

例えばデザイナーがブランドの基調色としてエメラルドグリーン#10B981を指定したケースを検証します。ジェネレーターは指定されたカラーを中明度の「500」アンカーとして固定し、最薄色「50（背景用）」から最濃色「950（ダークモード用）」までの全11ステップのカラーコードを滑らかな明度・彩度グラデーション曲線で自動導出します。画面上には各シェードのカラーチップ一覧が表示され、クリック一つでtailwind.config.jsへそのまま貼り付けられるテーマオブジェクト（JSON形式）、またはCSSカスタムプロパティ形式としてエクスポートできます。

カラーの補間計算および設定コードの生成処理は、すべて端末のブラウザ内部でローカルに実行されます。作成中の新規プロダクトの配色パレット情報が外部に送信されることはありません。

コアアーキテクチャ＆計算式

シェードスケール生成: 知覚的明度 L(step) = f(50〜950) ➔ OKLCH/HSL補間 ➔ HEX/RGBシリアライズ

Tailwind標準のニュートラルカラーカーブを模倣した明度分布関数を用い、色相のねじれを防ぎながら50〜950の均等な明度ステップを展開します。

ベストプラクティスと必須ガイドライン

  • 「500」をプライマリブランドカラーの基準アンカーにする： ボタンの通常背景色に500、ホバー時に600、アクティブ時に700、薄いバッジ背景に100など、標準的なUIパターンに直結させます。
  • 知覚的均一性（OKLCH色空間）による調色破綻の防止： 通常のRGB補間では黄色や青色で彩度が濁りやすいため、人間の目の感度特性に合わせた色空間で明度勾配を制御しましょう。
  • ダークモード対応には「900・950」と「100・200」をペア運用： ライトモード時の背景（50/100）と文字（900/950）の組み合わせを、ダークモード時に反転させることで美しいUIコントラストを維持できます。
  • tailwind.config.jsへの簡単な統合： theme.extend.colorsの配下に生成されたオブジェクトをそのまま貼り付けるだけで、bg-brand-500やtext-brand-700のようなユーティリティクラスが即座に有効化されます。

よくある質問 (FAQ)

生成されたカラーコードはTailwind CSS v3およびv4で使用できますか？
はい。tailwind.config.jsの設定オブジェクト形式、およびTailwind CSS v4で推奨されるCSS変数（@themeブロック）形式の双方に対応して出力可能です。
極端に明るい色や暗い色を基準色に選んだ場合はどうなりますか？
アルゴリズムが明度を自動検出し、入力色が500ではなく300や700に近い場合でも、全体として自然なグラデーションバランスになるよう前後のシェードを自動調整します。
各シェードのカラーコード（HEX）を個別に微調整できますか？
はい。自動生成された11段階のシェードチップから特定の色だけを個別にクリックしてHEXを微調整することも可能です。
作成したカラーパレットが外部に保存されることはありますか？
ありません。当ツールはお使いのブラウザ内部のメモリ上でのみ計算処理を行い、外部サーバーとの通信は一切行いません。