カラーシェードジェネレーター
色を選んで、明るい色合いと暗い色合いの完全な範囲を生成します。サンプルをクリックして値をコピーします。
色合い(明るい)
ベースカラー
影(暗い)
色合いと影
色合いは色を白と混ぜることで得られ、徐々に明るくなります。影は黒と混ぜることで得られ、暗くなります。一緒になって、UIデザイン、グラデーション、ホバー状態、アクセシブルなカラーシステムに役立つ完全な色調スケールを形成します。
よくある質問
これらの影をどのように使用しますか?
明るい色合いを背景、ホバー状態、ボーダーに使用します。暗い影をテキスト、アクティブ状態、強調に使用します。「すべてをCSS変数としてコピー」をクリックして、すぐに使えるCSSスニペットを取得します。
色を個別にコピーできますか?
はい!サンプルをクリックして、そのHEX値をクリップボードにコピーします。
ティント、シェード、トーン：公式定義
3つの用語は緩く使われているが、古典的な色彩理論では正確に区別している：
- ティント ＝ ベースカラー ＋ 白。明るくて淡い。ピンクは赤のティント；空色は青のティント。
- シェード ＝ ベースカラー ＋ 黒。暗くて深い。マルーンは赤のシェード；ネイビーは青のシェード。
- トーン ＝ ベースカラー ＋ グレー。彩度が低く、より落ち着いた印象。明度をあまり変えずにニュアンスを加える。
このジェネレーターはティント（ベースより明るい）とシェード（ベースより暗い）を生成する。トーン（白や黒ではなくグレーを加える）はミュートで洗練されたパレットには便利だが（1970年代のインテリアデザインのカラーシステムを思い浮かべるとよい）、典型的なUIの作業にはほとんど必要ない。
現代のデザインシステムが数値スケールを使う理由
Tailwind CSSは色ごとに50-100-200-…-900-950の数値スケールを普及させた。「500」ストップは慣習的にベースとして扱われる。Material Designは並行する50-100-…-900システムを使用；Bootstrap 5は100-…-900を使用；IBM Carbonはスウォッチあたり10ストップを使用する。共通のアイデア：ブランドカラー1つだけでは不十分で、UIにはホバー状態、背景、ボーダー、フォーカスリング、無効状態、バッジ、ダークモード相当の一貫したバリアントが必要だ。予測可能な数値スケールは、コンポーネントをまたいで移植可能で、ブランドが進化した際にリファクタリングしやすく、コードベースを読む誰にでも発見しやすい方法でそれらのバリアントを提供する。
| システム | 色あたりのストップ数 | ベースストップ |
|---|---|---|
| Tailwind CSS v3+ | 11 (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950) | 500 |
| Material Design 3 | 13 tonal (0, 10, 20, …, 100) | 40 |
| Bootstrap 5 | 9（100、200、…、900）プラスベース | 500 |
| IBM Carbon | スウォッチあたり10 | 60 |
スケールを計算するアルゴリズムの違い
ティント/シェードスケールを計算するには3つの一般的な方法があり、視覚的な結果が異なる：
- 白/黒とRGB混合。アート理論の定義。忠実なティントとシェードを生成するが、知覚的均一性を考慮しない。黄色は速く彩度が落ちるが、青は豊かなまま。
- HSL明度調整。素早くて簡単：ティントにはLチャンネルを上げ、シェードには下げる。古いツールで最も一般的なアプローチ。欠点はHSLの明度が知覚的に均一でないこと。50% LのYellowは50% Lのblueよりはるかに明るく見えるため、HSLステッピングで構築されたパレットは色相にわたって不均一に見える。
- OKLCHまたはCIELABの明度スケーリング。モダンで知覚的に均一なアプローチ。OKLCHのLは「200 → 300 → 400」が色相に関わらず同じステップに感じられるように較正されている。Tailwind v4（2025年1月リリース）はまさにこの理由からすべてのデフォルトパレットをOKLCHで再構築した。
スケールが「フラット」に見える場合（洗い出される黄色のステップ、すべて同じ暗い青に見える青のステップ）は、ほぼ常に基礎の数学がOKLCHベースではなくHSLベースだからだ。モダンなCSS（CSS Color Module Level 4）はoklch()、lab()、color-mix(in oklch, …)を直接公開しており、外部ツールなしで知覚的に均一なスケールをワンライナーで実現できる。
ユースケース
- 1つのブランドカラーからデザインシステムをブートストラップ。ブランドのHEXを選び、スケールを生成し、CSS変数をコピーして完了。
- Tailwindの
colorsマップのカスタマイズ。デフォルトのブランドカラーを11ストップの独自スケールに置き換える。 - UIのホバーとフォーカス状態。一般的なパターン：ボタンの背景に500を使用し、ホバーに600、アクティブに700、フォーカスリングに低不透明度の400を使用する。
- 背景とエレベーション。カードの背景に50；サブタルなボーダーに200；無効テキストに400を使用。
- ダークモード相当。多くのシステムはライトパレットを数学的に反転させるのではなく、並行するダークモードスケールを生成する。白の上でバランスが取れたカラーは必ずしも黒に近い背景の上でバランスが取れるわけではないからだ。
- モックアップのバリエーション。3つのブランド候補を素早く比較する：それぞれのスケールを生成して同じUIモックアップに当てはめる。
- 印刷スウォッチブック。隣接したときに実際にどれだけ微妙なステップに見えるかを事前確認する。
アクセシビリティとコントラスト
生成されたスケールは、生成するテキスト・背景ペアの有用性によってのみ価値がある。念頭に置くべきWCAG 2.1の最低基準：
- 通常の本文テキスト：背景に対して4.5:1（レベルAA）。
- 大きなまたは太字のテキスト（18pt / 14pt太字以上）：3:1（レベルAA）。
- UIコンポーネントとグラフィカルオブジェクト：3:1（レベルAA、SC 1.4.11）。
ほとんどのよく構築されたスケールで信頼できるルール：50 + 900のペアは本文テキストには常にパスし、100 + 800のペアはほぼ常にパスする。400 + 500のペアはほぼ決してパスしない。使用するつもりの特定のペアをテストする。カラーコントラストチェッカーツールは任意の2つのHEX値のWCAGレートを計算する。
出力をコードベースに組み込む
生成されたスケールを活用する3つの一般的な方法：
/* 1. Plain CSS variables */
:root {
--brand-50: #f0f9fc;
--brand-100: #d9eef6;
--brand-500: #2b7190;
--brand-900: #0d2935;
}
.btn { background: var(--brand-500); }
.btn:hover { background: var(--brand-600); }// 2. Tailwind config (tailwind.config.js)
module.exports = {
theme: {
extend: {
colors: {
brand: {
50: '#f0f9fc',
100: '#d9eef6',
500: '#2b7190',
900: '#0d2935',
},
},
},
},
};
// then in markup
<button class="bg-brand-500 hover:bg-brand-600">Click</button>// 3. Sass / SCSS map
$brand: (
50: #f0f9fc,
500: #2b7190,
900: #0d2935,
);
.btn { background: map-get($brand, 500); }よくある間違い
- 多すぎるストップを生成する。Tailwindの11はスイートスポットだ。20ストップは過剰で、ほとんどは視覚的に見分けがつかず、使うことはない。
- 黄色/オレンジ/蛍光色にHSLベースのスケールを使う。明るいストップで洗い出され、きれいに暗くならない。ブランドカラーが「難しい」色相範囲に入る場合はOKLCHベースの生成を使う。
- テキストコントラストを確認せずにスケールを最終決定する。美しいカラー関係でも400ストップに白いテキストを合わせてWCAG 4.5:1に失敗することがある。実際に使用するすべてのペアをテストする。
- ライトパレットを反転してダークモードパレットを作る。数学的には魅力的だが視覚的に誤り。白の上でバランスが取れたカラーは黒に近い背景では派手に感じられる。並行するダークモードスケールを生成するか手動で調整する。
- ベースカラーを「500」として扱うが、知覚的には別のストップに相当する場合。ブランドカラーが実際に暗い場合、スケールの700かもしれない；慣習ではなく知覚的な関係によってどのスロットを占めるかを決める。
- 50ストップを忘れる。最も明るいティントは背景と微妙なハイライトに最も便利だ。スケールを100で切り捨てない。
よくある質問
スケールがフラットに見えるのはなぜか？
2つの一般的な原因：（1）狭い範囲に多すぎるステップ：カラーがすでにミッド輝度の場合は特に、ステップを減らす；（2）HSLが適切に較正されていない色相（黄色、オレンジ、ネオンカラー）でのHSLベースのスケーリング。OKLCHベースのパレットジェネレーターに切り替えると通常両方が修正される。
ライトモードスケールからダークモードパレットを生成するにはどうするか？
単純に反転しない。ナイーブな反転（ライトとダークのストップを入れ替える）はダークモードパレットが派手だったり洗い出されたりする結果になる。Material 3、Radix Colors、Tailwindのダークバリアントの慣習は、暗い背景に向けて調整された並行スケールを生成することだ。通常は彩度をわずかに下げ、色相をシフトして暗い面に対するカラーの知覚を補正する。ほとんどの大きなデザインシステムは両方のパレットを並べて公開している。
生成されたカラーは商業利用できるか？
はい。カラー値は著作権で保護されない；HEXコードはピクセルに関する事実だ。生成されたパレットをオープンソースプロジェクト、商業サイト、ブランドシステム、印刷、パッケージングなどどこでも使用できる。
適切なストップ数は？
UIデザインでは、色あたり9〜11ストップが確立された慣習だ（Tailwind、Bootstrap、CarbonはすべてそのRange内に入る）。Material Designは13を使用する。7ストップ未満ではスケールが不十分に感じられ；13を超えるとストップが互いに区別しにくくなる。
何かサーバーに送信されるか？
いいえ。カラー計算はブラウザ内で実行される；入力HEX、生成されたストップ、コピーされたCSSはサーバーに触れることはない。ブランドカラーが未公開またはエンバーゴ下にある場合に便利だ。
カラーパレットジェネレーターとどう違うか？
パレットジェネレーターは複数の異なる色相を選ぶ（補色、類似色、三角形など）、まったく異なる色相だ。シェードジェネレーター（これ）は1つの色相を保持し、その明るいバリアントと暗いバリアントを生成する。用途が異なる：パレットジェネレーターはブランドプライマリとアクセントを与え；シェードジェネレーターはそれらのカラーの1つのバリエーションを与える。