Color Shades Generator：1つのカラーから完全なパレットを作る

すべてのデザインシステムはいつか、各ブランドカラーに対するカラースケールを必要とします。背景、ボーダー、テキスト、ホバー状態、フォーカスリング、無効状態 — これらすべてに様々な明るさのカラーが必要です。これを1つずつ手作業で作るのは本当に面倒な作業です。目で合わせようとすると、結果が大抵ばらついてしまいます。ある段階では差が大きすぎたり、別の段階では差が小さすぎたりします。

Color Shades Generatorは、1つのベースカラーを入力すると約1秒で均等にステップ分けされた完全なパレットを生成します。この記事では、その仕組み、プロジェクトでの出力の使い方、そして実際のところどこに限界があるかを説明します。

シェードとティントとは実際何か

ツールの説明に入る前に、用語を明確にするとよいでしょう。「シェード」という言葉は曖昧に使われることが多いからです。

シェードは色に黒を混ぜて暗くしたもの、ティントは色に白を混ぜて明るくしたものです。両方を組み合わせることで、ほぼ黒に近い暗い色からほぼ白に近い明るい色まで全範囲が得られます。

実際には、ほとんどのデザインシステムはこの全範囲を使いながら、単純に「カラースケール」や「カラーパレット」と呼んでいます。重要なのは用語ではなく結果、つまりUI全体で一貫して使える明るい色から暗い色までの調和のとれたカラーセットです。

典型的な構造はこのようになります：

ステップ	用途
50	非常に明るい背景、白背景上のホバー状態
100	明るい背景、選択状態の背景
200	明るい背景のボーダー、控えめな塗りつぶし
300	無効状態のテキスト、プレースホルダーテキスト
400	セカンダリテキスト、薄いラベル
500	プライマリ — 通常はベースカラー自体
600	ボタンのホバー状態、少し暗いプライマリ
700	押下状態、より暗いインタラクティブ要素
800	明るい背景上の暗いテキスト
900	非常に暗い色、見出しテキストの代替
950	ほぼ黒、ダークモードの基本色

TailwindがこのStep 11のシステム（50〜950）を普及させ、Tailwindを使っていなくても従う価値のある標準になっています。

生成の仕組み：HSLの調整

ジェネレーターはHSL色空間 — 色相（Hue）、彩度（Saturation）、明度（Lightness）— で動作します。HSLに馴染みがなければ簡単に説明すると：色相は色の角度（0〜360、0が赤、120が緑、240が青）、彩度は強度（0%がグレー、100%が完全に鮮やか）、明度は0%（黒）から100%（白）です。

ベースカラーが与えられると、ツールは：

ベースカラーをHSLに変換します
色相を固定します（スケール全体で同じカラーファミリー）
最も明るいステップで約95%から最も暗いステップで約10%まで広がる明度の値を生成します
必要に応じて端点で微妙な彩度調整を行います

最後のポイントは説明が必要です。人の色知覚は非線形です。純粋なHSLでは、明度90%の明るい青がほぼ白に見えて完全に色あせてしまうことがあります。高い明度の値では彩度が知覚的に「消える」のです。多くのプロ向けパレットジェネレーターは、明るい端では彩度を少し上げて色相が見えるようにし、暗い端では濁って見えるのを防ぐために彩度を下げることで補正しています。

結果は数学的に均等なのではなく、人の目に均等に見えるパレットです。

50〜950という命名規則の由来

Tailwind CSSがこれを標準化した功績があります。Tailwind以前は、誰もが異なる命名規則を使っていました：「ライトブルー」、「ブルーライター」、「ブルーダーク」、「ブルーダーケスト」— プロジェクトごとに独自のシステムがあり、どこにも通用しませんでした。

番号付きシステム（50、100、200 ... 900、950）にはいくつかの実用的なメリットがあります：

ステップを追加しやすい。 200と300の間に何かが必要なら250を追加します。自然な居場所があります。

一目で意図が伝わる。 color-100を見た開発者は即座に明るい背景色だと分かります。color-900は明らかに暗いテキスト領域です。番号が説明的な名前なしに意味を伝えます。

ツールと互換性がある。 Figmaの変数、CSSカスタムプロパティ、JavaScriptのテーマオブジェクト — すべて数値スケールと自然に相性が良いです。TailwindもSameの番号を使っているので、デザイナーと開発者が同じ言語を話せます。

細かすぎる指定を抑制する。 「primary-blue」や「primary-blue-ホバー用の少し明るめ」といった名前があると、チームがどんどん多くの名前付きバリアントを追加する傾向があります。番号付きシステムは定義されたスケールを一貫して使うよう促します。

プロジェクトでの出力の活用方法

ジェネレーターは複数の出力形式を提供します。それぞれの使い方を見ていきましょう。

CSSカスタムプロパティ

CSS変数の出力はこのようになります：

:root {
  --color-50: #eff6ff;
  --color-100: #dbeafe;
  --color-200: #bfdbfe;
  --color-300: #93c5fd;
  --color-400: #60a5fa;
  --color-500: #3b82f6;
  --color-600: #2563eb;
  --color-700: #1d4ed8;
  --color-800: #1e40af;
  --color-900: #1e3a8a;
  --color-950: #172554;
}

これをメインのCSSファイルの:rootブロックに貼り付けると、スタイルシートのどこからでも変数が使えます：

.button-primary {
  background-color: var(--color-500);
  border-color: var(--color-600);
  color: white;
}

.button-primary:hover {
  background-color: var(--color-600);
  border-color: var(--color-700);
}

.button-primary:focus {
  outline-color: var(--color-300);
}

このアプローチはテーマ設定に特に強力です。ブランドカラーをCSSカスタムプロパティとして定義すれば、テーマの切り替えが[data-theme="dark"]または.dark-modeセレクタで値を上書きするだけで実現できます。

Tailwind CSS設定

Tailwindを使っているなら、パレットをtailwind.config.jsまたはtailwind.config.tsに直接追加できます：

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#eff6ff',
          100: '#dbeafe',
          200: '#bfdbfe',
          // ... 以下同様
          950: '#172554',
        },
      },
    },
  },
}

これにより、ブランドカラーに対する全TailwindユーティリティクラスシステムがUnlockされます：bg-brand-100、text-brand-700、border-brand-300、hover:bg-brand-600など。カスタムカラーがTailwindの組み込みパレットカラーとまったく同じように機能します。

JavaScript/TypeScriptオブジェクト

コンポーネントライブラリやデザイントークンの場合、JavaScriptオブジェクトが生のCSSより便利なことが多いです。カラー値をコンポーネントコードに直接インポートしたり、styled-componentsに渡したり、CSS-in-JSライブラリと一緒に使うことができます。

カラースケールでデザインシステムを構築する

デザインシステムには通常、最低3〜4つのカラースケールが必要です：

Primary: メインのブランドカラー
Neutral/Gray: テキスト、背景、ボーダー用 — 通常は純粋なニュートラルよりわずかに温かみや冷たさのあるグレー
セマンティックカラー: 成功（グリーン）、警告（アンバー/イエロー）、エラー（レッド）、情報（ブルー）

それぞれをシェードジェネレーターに通して一貫した名前をつければ、デザインシステムのカラー基盤が完成します。

典型的な使用パターン：

primary-50、primary-100 → 背景、選択状態の塗りつぶし
primary-200、primary-300 → 控えめなボーダー、タグ、バッジ
primary-500、primary-600 → インタラクティブ要素、ボタン、リンク
primary-700、primary-800 → 押下状態、より暗いインタラクティブ要素
neutral-100〜neutral-900 → ページ背景から本文テキストまで

これが整うと、すべてのコンポーネントが任意のカラーを選ぶのではなく、パレットからカラーを使えるようになります。大規模なコードベースでの一貫性の維持がずっと楽になります。

Color Palette Generatorとの比較

サイトにはColor Palette Generatorもありますが、似ているので違いを明確にする価値があります。

Color Palette Generatorは通常、補色や調和のとれたカラーセットを生成します — 類似色、三原色、分裂補色スキームなど。1つのカラーを与えると、それに合うほかのカラーを提案します。色彩理論とよいカラーの組み合わせを見つけることについてのツールです。

Color Shades Generatorは1つのカラーを受け取り、そのカラーの明るいものから暗いものまでの全範囲を提供します。ほかのカラーを見つけるのではなく、すでに選んだカラーのすべてのシェードを得ることについてです。

実際には両方を使うことができます：パレットジェネレーターでブランドカラーの組み合わせを見つけ、シェードジェネレーターで各カラーの全スケールを作るという使い方です。

知っておくべき限界

こういったツールを十分に使ってきた経験から、どこで問題が起きるかを知っています。注意すべき点を挙げます。

純粋な黒と白では役に立たないパレットができます。 #000000（純粋な黒）や#FFFFFF（純粋な白）を入力すると、生成ツールには使える色相がありません。パレット全体がただのグレースケールになります。ニュートラルカラーには少なくとも少しの色相と彩度があるカラーを使ってください。わずかに温かみのあるグレー（#f5f0eb）は純粋な白よりずっと興味深いニュートラルスケールを生み出します。

非常に低彩度のカラーは平坦に見えることがあります。 すでにグレーに近いカラー（例：hsl(220, 8%, 50%)）は鮮やかなティントとシェードを生み出しません。スケールの明るい端はほぼ白に見え、暗い端はほぼ黒に見えて、中間での目立つ差別化がほとんどありません。これはバグではなく低彩度カラーの特性です。

生成されたパレットは出発点であって最終答えではありません。 HSLベースの生成は体系的で速いですが、特定のコンテキストについては何も知りません。生成された明るいシェードの中には、テキストに十分なコントラストがないものがあるかもしれません。常に実際のUIでの使用で検証し、テキストと背景の組み合わせをコントラストチェッカーで確認してください。

プロフェッショナルなデザインシステムでは知覚的均一性がより重要です。 Tailwind v3のパレットは自動生成ではなく、デザイナーが手で調整しました。Radix ColorsのようなツールはHSLより均等なステップのためにより正確なOKLCH色空間を使用しています。シェードジェネレーターは素晴らしい出発点を提供しますが、大規模なプロダクションデザインシステムでは端点を手動で調整する必要がある場合があります。

--color-500というCSS変数名は汎用的すぎます。 ツールは--color-500のような変数名を出力します。プロジェクトに複数のカラースケールがある場合は名前を変更する必要があります：--brand-500、--error-500、--neutral-200など。名前空間なしに複数のパレットを:rootに入れると、お互いに上書きしてしまいます。

カラー作業のための関連ツール

シェードジェネレーターはより広いカラーワークフローの一部に位置します：

Color Picker：ベースカラーを視覚的に選んでhexやHSL値を取得し、シェードジェネレーターに貼り付けることができます。
Color Palette Generator：先に調和のとれたカラー組み合わせを見つけてから、各カラーのシェードを個別に生成できます。
Color Converter：生成されたHEX値を特定のコンテキストで使うためにHSLやRGBに変換する必要がある場合。
CSS Gradient Generator：シェードスケールがあれば、隣接するステップ間のグラデーションが美しく見えます。グラデーションツールでそれを直接組み立てて確認できます。

実例：TailwindにカスタムカラーをAdd追加する

Tailwindプロジェクトにカスタムブランドカラーを追加するエンドツーエンドのワークフローです：

ブランドカラーを決めました：#0D6EFD（強いブルー）。
/tools/color-shades-generatorを開いて#0D6EFDを貼り付けます。
ツールが50〜950の全スケールを生成します。
Tailwind設定形式の出力をコピーします。
tailwind.config.tsのtheme.extend.colors.brandの下に追加します。
これでボタンにbg-brand-500、暗いテキストにtext-brand-700、白い表面上のホバー背景にbg-brand-50、フォーカスリングにring-brand-300が使えます。

ジェネレーターなしでは11個のシェードをすべて自分で選んで、一貫して見えることを確認する必要がありました。ジェネレーターを使えば、この作業全体が約2分で完了します。

まとめ

カラースケールをゼロから作ることは、簡単そうに見えて実際はそうでない作業の典型例です。ステップが視覚的に均等に感じられるようにし、色相が退屈に見えないよう一貫性を保ちながら、端点が実際に使えるものにする — これらすべては、単純にhex値を一定量ずつ暗くするよりずっと多くの注意が必要です。

Color Shades Generatorはこれらすべてを自動的に処理し、複数の形式でCSS対応の出力を提供します。実際のプロジェクトの大多数をカバーする堅実な80%ソリューションで、後から手動で調整する計画がある場合でも適切な出発点となります。

デザインシステムを構築しているなら、Color Palette Generatorでカラーを選択し、Color Converterで形式を検証することをこのツールと組み合わせれば、プロフェッショナルなカラー基盤を素早く整えることができます。