カラーパレット生成 1つのヘックスから完全なパレットを作成

ブランド用のヘックスカラーを持っています。それはロゴ、スタイルガイド、あるいは好きな色から来ている可能性があります。今度は完全なパレットが必要です——トーン、シャドー、補色、意味のあるトークン、ダークモード変形など。このガイドでは、正確にプログラムでそのパレットを構築する方法を説明します。

実際に役に立つカラーティー

デザイン学校で学ぶカラーティーの多くはUI作業に直接適用できません。以下が実際に役に立つものです：

ほとんどのUIライブラリでは、ブランドカラーをメインとして、類似色をセカンダリーとして、補色またはスプリット補色をアクセントやインタラクティブな状態に使用します。

HSLがヘックスよりもパレット作成に優れている理由

ヘックスとRGBは色をハードウェアチャンネルとしてエンコードします。人間が色を認識する方法とは異なります。HSL（色、濃度、明るさ）は人間の認識にマッピングされます：

• 色 — 色そのもの（0–360°、0 = 赤、120 = 緑、240 = 青）
• 濃度 — 活発さとグレーの度合い（0% = グレー、100% = 完全に色付き）
• 明るさ — 明るさまたは暗さ（0% = 黒、100% = 白）

これは重要です。ブランドカラーのトーンを生成する際、白と混ぜるのではなく、HSLの明るさを増やします。色はまったく変わりません。ヘックス値を数学的に混ぜると、そのような保証は得られません。

正しいトーンとシャドーの生成方法

間違った方法は一般的です：ヘックスを「トーンに向かって」、または「シャドーに向かって」線形補間（lerp）します。これにより、色のずれと濃度の低下が生じます。あなたの「明るい青」は、曖昧なグレー・ブルーになります。 #ffffff トーン #000000 シャドー

正しい方法は、ヘックスをHSLにパースし、明るさだけを変化させることです：

/**
 * Generate a 10-step shade scale from a base HSL color.
 * Returns shades from 50 (lightest) to 950 (darkest), like Tailwind.
 * @param {number} h - Hue (0–360)
 * @param {number} s - Saturation (0–100)
 * @param {number} l - Base lightness (0–100)
 * @returns {Object} - Scale object: { 50, 100, 200, ..., 900, 950 }
 */
function generateShadeScale(h, s, l) {
  // Lightness stops mapped to Tailwind-style scale keys
  const stops = [
    [50,  95],
    [100, 90],
    [200, 80],
    [300, 70],
    [400, 60],
    [500, l],   // 500 = your base color
    [600, 40],
    [700, 30],
    [800, 20],
    [900, 12],
    [950, 7],
  ];

  const scale = {};
  for (const [key, lightness] of stops) {
    scale[key] = `hsl(${h}, ${s}%, ${lightness}%)`;
  }
  return scale;
}

// Example: brand color #3b82f6 (Tailwind blue-500)
// HSL ≈ hsl(217, 91%, 60%)
const palette = generateShadeScale(217, 91, 60);
// palette[50]  → "hsl(217, 91%, 95%)" — near-white blue tint
// palette[500] → "hsl(217, 91%, 60%)" — brand color
// palette[900] → "hsl(217, 91%, 12%)" — near-black blue shade

重要な洞察は、スケール全体で色と濃度が一定であるということです。明るさだけが変化します。これにより、視覚的に統一されたスケールが得られ、すべての重みで同じ色ファミリーとして見えます。

ヘックスからこのパレットを生成したいですか？無料の カラースキームエクストラクター を使用して、任意の色からHSL値を即座に抽出できます。

50–950デザインシステムスケール

Tailwindは11段階のスケール（50、100–900、950）を人気を博しました。現在、デザインシステムで「デフォルト」として採用されています。それは使用シーンに自然にマッピングできるためです：

• 50–100： ページの背景、明るい表面でのホバー状態
• 200–300： ボーダー、微妙なディバイダー、無効状態
• 400–500： インタラクティブな要素——ボタン、リンク、フォーカスリング
• 600–700： インタラクティブ要素のホバー/アクティブ状態
• 800–900： 明るい背景上のテキスト
• 950: 高コントラストのヘッドライン用の近い黒

ブランドカラーのスケールを生成することで、すべてのコンポーネントの状態に必要なすべてのシャドーを自動的に得られます。個別のコンポーネントごとに色を決定する必要がなくなります。

ブランドヘックスから完全なパレットへ

1つのブランドヘックスを持っている場合の実用的なワークフローは次の通りです：

1. HSLにパース 変換する #1d4ed8 → hsl(221, 74%, 48%)
2. メインスケールを生成 上記のシャドー関数を全11段階で実行
3. セカンダリーを導出 類似色として±30°のホイールを回転： hsl(251, 74%, 48%) (紫青)
4. アクセントを導出 補色として180°回転： hsl(41, 74%, 48%) (アマロ)
5. すべての3色のスケールを生成 同じシャドー関数、異なるホイール入力

結果全体（含む調和タイプ）を事前に確認できます。コードを書く前に カラー スキーム ジェネレーター を確認できます。

意味のあるカラートークン

原始スケール値はパレットの基本要素です。意味のあるトークンは、コンポーネントが実際に使用するものです：

const tokens = {
  // Map scale values to semantic names
  'color-primary':         palette[500],  // brand color
  'color-primary-hover':   palette[600],
  'color-primary-subtle':  palette[50],
  'color-text':            palette[900],
  'color-text-muted':      palette[600],
  'color-border':          palette[200],
  'color-bg':              palette[50],

  // Status colors — separate scales per semantic group
  'color-success':         'hsl(142, 71%, 45%)',
  'color-warning':         'hsl(38, 92%, 50%)',
  'color-danger':          'hsl(0, 84%, 60%)',
};

この分離がダークモードの実現を可能にします。コンポーネントは color-text、ではなく palette[900]を参照します。ダークモードでは、トークンを再マッピングするだけで、すべてのコンポーネントを変更する必要はありません。

ダークモード：スケールの反転

よく構築されたHSLパレットはほぼ自動的に反転されます。ルールは、スケールの明るさと暗さの端を交換し、中間値をわずかに調整して視覚的バランスを保つことです。

// Light mode
const lightTokens = {
  'color-bg':    palette[50],   // near-white background
  'color-text':  palette[900],  // near-black text
  'color-border': palette[200],
};

// Dark mode — same scale, inverted stops
const darkTokens = {
  'color-bg':    palette[950],  // near-black background
  'color-text':  palette[50],   // near-white text
  'color-border': palette[800],
};

色と濃度がスケール全体で一定であるため、ブランドアイデンティティは反転しても維持されます。明るいモードで青をメインとしている場合、ダークモードでも同じ青を読み取り、ダークな背景に対してより明るく見えるのです。最初からHSLでパレットを作成することで得られるこの効果が、複合的なメリットです。

まとめ

1つのヘックスから始め、完全で意味のある名前付き、ダークモード対応のパレットを50行未満のJavaScriptで生成できます。重要なステップは次の通りです：

1. ヘックス → HSLにパース
2. 11段階の明るさスケールを生成し、色と濃度を固定
3. 補色とアクセントの色をホイール回転で導出
4. 原始スケール値を意味のあるトークンにマップ
5. トークンをダークモードで再マッピング

コードを自分で書かずに素早くプロトタイピングしたい場合、 カラー スキーム ジェネレーター と カラースキームエクストラクター はすべてのプロセスを視覚的に処理し、結果をCSS変数またはJSONトークンファイルとしてエクスポートして、デザインシステムに直接導入できます。

あなたも好きかもしれません

新しい

JSON スキーマ検証： 発送前にAPI契約違反を検出

続きを読む "

掲載日 2026年5月11日

新しい

PDF署名検証： 開発者が必要な知識

続きを読む "

掲載日 2026年5月10日

新しい

Markdown と HTML： ドキュメント、README、API でそれぞれを使用するタイミング

続きを読む "

掲載日 2026年5月9日

新しい

UTMパラメータ： 推測せずにマーケティングキャンペーンをトラッキングする方法

続きを読む "

掲載日 2026年5月8日