結論：ベースカラー1つで11段階のスケールが自動生成できます
デザインシステムを構築するとき、カラースケールの作成って地味に面倒ですよね。
「この青をベースに、50から950まで段階的に明暗を作りたいんだけど...」
そんな悩みを解決するツールを作りました。カラーピッカーで色を選ぶだけで、Tailwind CSSライクな11段階のカラースケールが瞬時に生成されます。
ツールはこちら → Color Scale Generator
できること
- ベースカラーから50〜950の11段階スケールを自動生成
- 類似色（色相±30°、±60°）のスケールも同時に生成
- HEX形式とHSL形式（shadcn/ui対応）の切り替え
- CSS変数としてワンクリックコピー
- コントラストチェッカーへの連携
使い方
Step 1: ベースカラーを選択
カラーピッカーで色を選ぶか、HEXコードを直接入力します。
例: #3B82F6（Tailwind CSSのblue-500相当）
Step 2: 生成されたスケールを確認
入力した色が「500」として配置され、自動的に以下が生成されます：
| ステップ | 方向 |
|---|---|
| 50, 100, 200, 300, 400 | 明るい方向（白に近づく） |
| 500 | ベースカラー（入力値） |
| 600, 700, 800, 900, 950 | 暗い方向（黒に近づく） |
Step 3: CSSをコピー
コピーボタンをクリックすると、以下のようなCSS変数が取得できます。
HEX形式の場合：
: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;
}
HSL形式（shadcn/ui対応）の場合：
@layer base {
:root {
--50: 214 100% 97%;
--100: 214 95% 93%;
--200: 213 97% 87%;
--300: 212 96% 78%;
--400: 213 94% 68%;
--500: 217 91% 60%;
/* ... */
}
}
技術的な仕組み
スケール生成アルゴリズム
明暗の生成は、RGB値を白（255, 255, 255）または黒（0, 0, 0）に向かって段階的に補間しています。
// 明るくする（50〜400）
const factor = [0.95, 0.90, 0.72, 0.54, 0.36, 0.18];
r = Math.round(r + (255 - r) * factor[i]);
g = Math.round(g + (255 - g) * factor[i]);
b = Math.round(b + (255 - b) * factor[i]);
// 暗くする（600〜950）
r = Math.round(r * (1 - factor[i]));
g = Math.round(g * (1 - factor[i]));
b = Math.round(b * (1 - factor[i]));
類似色の生成
HSL色空間で色相（Hue）を回転させることで、調和のとれた類似色を生成しています。
// 色相を±30°、±60°回転
const hueVariations = [-60, -30, 0, 30, 60];
const newHue = (hue + variation + 360) % 360;
ユースケース
1. デザインシステムの構築
プロジェクトのブランドカラーを入力すれば、即座に一貫性のあるカラーパレットが完成します。
2. Tailwind CSSのカスタムカラー追加
tailwind.config.jsに追加するカスタムカラーを素早く生成できます。
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
brand: {
50: '#eff6ff',
100: '#dbeafe',
// コピーした値をそのまま貼り付け
}
}
}
}
}
3. shadcn/uiのテーマカスタマイズ
HSL形式での出力に対応しているので、shadcn/uiのCSS変数にそのまま使えます。
類似色機能が便利
メインカラーだけでなく、色相を±30°、±60°ずらした類似色のスケールも同時に生成されるのがポイントです。
これがあると、アクセントカラーやセカンダリカラーの選定がかなり楽になりますね。デザインの一貫性を保ちながら、バリエーションを持たせられます。
コントラストチェック連携
各色にはコントラストチェッカーへのリンクがついています。アクセシビリティを意識したデザインには欠かせない機能ですね。
WCAG基準を満たしているか、すぐに確認できます。
まとめ
カラースケールの作成は、手動でやると時間がかかるし、感覚に頼ると一貫性が保てない。このツールを使えば、数秒で美しいスケールが完成します。
個人開発でデザインシステムを整備したいとき、ぜひ使ってみてください。
ツールURL: https://tools.easegis.jp/ja/tools/image/color-scale-generator