単一のブランドカラーを選ぶのは簡単です。背景に十分明るく、テキストに十分暗く、ホバー状態のための中間ステップがある完全なパレットを構築することが、ほとんどの開発者が苦労するところです。カラーシェードジェネレーターはこの作業を自動化して、最初から一貫したパレットを保ちます。

カラーシェードジェネレーターを試す →

カラーシェードとは何か

カラーシェードスケールは、単一のベース色相から派生した一連の関連する色です。Tailwind CSS、マテリアルデザイン、Radix Colorsなどのデザインシステムはすべて、ほぼ白から近黒まで色相のアイデンティティを保ちながら変化する番号付きスケール（通常50〜950または100〜900）を使用しています。

例——ブルースケール：

ステップHex用途
50#eff6ffページ背景
100#dbeafeカード背景
200#bfdbfeボーダー
400#60a5faホバー状態
600#2563ebプライマリボタン
800#1e40afアクティブ状態
950#172554ダークテキスト

シェード生成の数学的仕組み

ほとんどのジェネレーターはHSL（色相・彩度・明度）で動作します。明度が操作すべき単一の軸だからです：

ベースカラー: hsl(217, 91%, 60%)   → blue-500

明るいシェード: L を増加
暗いシェード:  L を減少

色相は一定に保たれます。両端では彩度がわずかに調整されることがあります——これが手動で調整したパレットが単純な線形補間より良く見える理由です。

なぜRGBを使わないのか

RGBには単一の「明度」次元がありません。#ffffffと#0000ffは両方ともチャンネルが最大値ですが、一方は視覚的に明るく、もう一方は暗いです。RGBの値を操作してシェードスケールを作ると予測不可能な結果になります。

なぜHSB/HSVを使わないのか

HSBの「輝度」チャンネルは知覚的な明度とは異なる振る舞いをします。より知覚的に均一なスケールのために、一部のツールはHSLの代わりにOKLCHを使用しています——より正確ですが直感的ではありません。

Tailwindスタイルのパレットを生成する

Tailwindのカラーシステムは11ステップを使用しています：50、100、200、300、400、500、600、700、800、900、950。500ステップは通常ベースカラーに近い値です。

ジェネレーターで任意の16進数カラーを入力すると、CSS変数として完全な11ステップスケールが得られます：

:root {
  --color-brand-50: #f0f9ff;
  --color-brand-100: #e0f2fe;
  --color-brand-200: #bae6fd;
  --color-brand-300: #7dd3fc;
  --color-brand-400: #38bdf8;
  --color-brand-500: #0ea5e9;
  --color-brand-600: #0284c7;
  --color-brand-700: #0369a1;
  --color-brand-800: #075985;
  --color-brand-900: #0c4a6e;
  --color-brand-950: #082f49;
}

スタイルシート全体でvar(--color-brand-500)を使用できます。これはTailwindが組み込みパレットを提供する方法と構造的に同一です。

アクセシビリティ：コントラスト比が重要

シェードスケールはそのステップがアクセシブルな場合にのみ有用です。WCAG 2.1の要件：

  • AA通常テキスト：背景に対するコントラスト比 ≥ 4.5:1
  • AA大きいテキスト / UIコンポーネント：コントラスト比 ≥ 3:1
  • AAA：コントラスト比 ≥ 7:1

実用ルール：白背景の上では本文テキストにシェード600以上を使用。黒背景の上ではシェード300以下を使用。スケールの知覚的均一性はWCAG準拠を保証しないので、必ずコントラストチェッカーで確認してください。

シェード・ティント・トーンの使い分け

用語定義例
シェードベースカラー + 黒を加えた暗いブルー
ティントベースカラー + 白を加えた明るいブルー
トーンベースカラー + グレーを加えたくすんだブルー

ほとんどのUIパレットはすべてを混在させています。最も明るいステップはティント、最も暗いステップはシェード、中間のステップはしばしば過剰な彩度を避けるためにトーンが含まれます。

実践的なワークフロー

  1. ブランドカラーを選ぶ（通常は中程度のステップ——500〜600付近）。
  2. ジェネレーターで全スケールを生成する。
  3. セマンティックな名前を割り当てる：--color-surface、--color-primary、--color-text。
  4. キーとなるテキスト/背景ペアのコントラスト比を確認する。
  5. CSS変数またはTailwind設定オブジェクトとしてエクスポートする。

カラーパレットを生成する →

TailwindCSSでの出力の使い方

Tailwindを使用している場合、生成された値をtailwind.config.jsに直接貼り付けてください：

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#f0f9ff',
          100: '#e0f2fe',
          // ...
          900: '#0c4a6e',
          950: '#082f49',
        },
      },
    },
  },
}

これでプロジェクト全体でbg-brand-500、text-brand-700などが使えるようになります。

関連ツール