カラーパレットジェネレータ

単一のブランドカラーの16進数コードから完全でアクセシブルなカラーシステムを生成します。Tailwind v4 CSS出力はプロジェクトに直接ペーストできます。

ワークフロー

ステップ1：ブランドカラーの16進数コードを取得

プライマリブランドカラーを確認します。#0D9488のような単一の16進数コードで十分です。

ステップ2：11段階のシェードスケールを生成

16進数をHSLに変換し、色相を一定に保ちながら明度を変えてシェードを生成します。

16進数からHSLへの変換

function hexToHSL(hex) {
  hex = hex.replace(/^#/, '');
  const r = parseInt(hex.substring(0, 2), 16) / 255;
  const g = parseInt(hex.substring(2, 4), 16) / 255;
  const b = parseInt(hex.substring(4, 6), 16) / 255;

  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  const diff = max - min;

  let l = (max + min) / 2;
  let s = 0;
  if (diff !== 0) {
    s = l > 0.5 ? diff / (2 - max - min) : diff / (max + min);
  }

  let h = 0;
  if (diff !== 0) {
    if (max === r) h = ((g - b) / diff + (g < b ? 6 : 0)) / 6;
    else if (max === g) h = ((b - r) / diff + 2) / 6;
    else h = ((r - g) / diff + 4) / 6;
  }

  return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) };
}

明度と彩度の値

シェード	明度	彩度倍率	用途
50	97%	0.80	繊細な背景
100	94%	0.80	ホバー状態
200	87%	0.85	ボーダー、区切り線
300	75%	0.90	無効状態
400	62%	0.95	プレースホルダーテキスト
500	48%	1.00	ブランドカラーベースライン
600	40%	1.00	プライマリアクション（多くの場合はブランドカラー）
700	33%	1.00	プライマリ上のホバー
800	27%	1.00	アクティブ状態
900	20%	1.00	明るい背景上のテキスト
950	10%	1.00	暗いアクセント

明るいシェード（50〜200）の彩度を15〜20%、300〜400の彩度を5〜10%削減して、過度に鮮やかなパステル色を防ぎます。500〜950では彩度を100%に保ちます。

完全なスケールジェネレータ

function generateShadeScale(brandHex) {
  const { h, s } = hexToHSL(brandHex);
  const shades = {
    50:  { l: 97, sMul: 0.8 },  100: { l: 94, sMul: 0.8 },
    200: { l: 87, sMul: 0.85 }, 300: { l: 75, sMul: 0.9 },
    400: { l: 62, sMul: 0.95 }, 500: { l: 48, sMul: 1.0 },
    600: { l: 40, sMul: 1.0 },  700: { l: 33, sMul: 1.0 },
    800: { l: 27, sMul: 1.0 },  900: { l: 20, sMul: 1.0 },
    950: { l: 10, sMul: 1.0 }
  };
  const result = {};
  for (const [shade, { l, sMul }] of Object.entries(shades)) {
    result[shade] = `hsl(${h}, ${Math.round(s * sMul)}%, ${l}%)`;
  }
  return result;
}

HSLから16進数への変換

function hslToHex(h, s, l) {
  s = s / 100; l = l / 100;
  const c = (1 - Math.abs(2 * l - 1)) * s;
  const x = c * (1 - Math.abs((h / 60) % 2 - 1));
  const m = l - c / 2;
  let r = 0, g = 0, b = 0;
  if (h < 60) { r = c; g = x; }
  else if (h < 120) { r = x; g = c; }
  else if (h < 180) { g = c; b = x; }
  else if (h < 240) { g = x; b = c; }
  else if (h < 300) { r = x; b = c; }
  else { r = c; b = x; }
  r = Math.round((r + m) * 255);
  g = Math.round((g + m) * 255);
  b = Math.round((b + m) * 255);
  return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`.toUpperCase();
}

検証

生成されたシェードは同じカラーファミリーで滑らかに段階化されるように見える必要があります。明るいシェード（50〜300）は背景に使用可能、暗いシェード（700〜950）はテキストに使用可能です。ブランドカラーは500〜700で認識できるようにします。

---

ステップ3：セマンティックトークンをマッピング

すべての背景トークンには必ずペアの前景トークンが必要です。背景トークンを単独で使用しないでください。そうしないとダークモードが機能しません。

ライトモードトークン

トークン	シェード	用途
background	white	ページ背景
foreground	950	本文テキスト
card	white	カード背景
card-foreground	900	カードテキスト
popover	white	ドロップダウン/ツールチップ背景
popover-foreground	950	ドロップダウンテキスト
primary	600	プライマリボタン、リンク
primary-foreground	white	プライマリボタン上のテキスト
secondary	100	セカンダリボタン
secondary-foreground	900	セカンダリボタン上のテキスト
muted	50	無効背景、繊細なセクション
muted-foreground	600	ミュートされたテキスト、キャプション
accent	100	ホバー状態、繊細なハイライト
accent-foreground	900	アクセント背景上のテキスト
destructive	red-600	削除ボタン、エラー
destructive-foreground	white	破壊的なボタン上のテキスト
border	200	入力ボーダー、区切り線
input	200	入力フィールドボーダー
ring	600	フォーカスリング

ダークモードトークン

トークン	シェード	用途
background	950	ページ背景
foreground	50	本文テキスト
card	900	カード背景
card-foreground	50	カードテキスト
popover	900	ドロップダウン背景
popover-foreground	50	ドロップダウンテキスト
primary	500	プライマリボタン（ダークモードではより明るい）
primary-foreground	white	プライマリボタン上のテキスト
secondary	800	セカンダリボタン
secondary-foreground	50	セカンダリボタン上のテキスト
muted	800	無効背景
muted-foreground	400	ミュートされたテキスト
accent	800	ホバー状態
accent-foreground	50	アクセント背景上のテキスト
destructive	red-500	削除ボタン（より明るい）
destructive-foreground	white	破壊的なボタン上のテキスト
border	800	ボーダー
input	800	入力ボーダー
ring	500	フォーカスリング

ダークモード反転パターン

ダークモードは色相と彩度を保ちながら明度を反転させます。極値を交換し（50は950に、950は50になる）、中央値を保持します（500は500の近くに留まる）。

ライトシェード	ダーク対応シェード	役割
50	950	背景
100	900	繊細な背景
200	800	ボーダー
500	500（やや明るい）	ブランドベースライン
600	400	プライマリアクション
950	50	テキストカラー

ダークモードの主要原則：

• プライマリに600ではなくシェード500を使用する -- ダーク背景の可視性向上のため明るい
• 純粋な#FFFFFFではなく、テキストにはシェード50（オフホワイト）を使用する -- 目に優しい
• ボーダーは背景より約10〜15%明るくする必要があります（例：950背景上の800ボーダー）
• より高い階層＝より明るい色（ライトモードの影とは逆）
• 背景を変更する場合は常に前景を更新する

---

ステップ4：コントラストをチェック

WCAGの最小比率

コンテンツ種別	AA	AAA
通常テキスト（18px未満または14px未満の太字）	4.5:1	7:1
大きいテキスト（18px以上または14px以上の太字）	3:1	4.5:1
UIコンポーネント（ボタン、ボーダー）	3:1	定義なし
グラフィカルオブジェクト（アイコン、チャート）	3:1	定義なし

ほとんどのプロジェクトはAAをターゲット、高アクセシビリティが必要な場合（政府、医療）はAAAをターゲットします。

輝度とコントラスト公式

function getLuminance(hex) {
  hex = hex.replace(/^#/, '');
  const r = parseInt(hex.substring(0, 2), 16) / 255;
  const g = parseInt(hex.substring(2, 4), 16) / 255;
  const b = parseInt(hex.substring(4, 6), 16) / 255;
  const rsRGB = r <= 0.03928 ? r / 12.92 : Math.pow((r + 0.055) / 1.055, 2.4);
  const gsRGB = g <= 0.03928 ? g / 12.92 : Math.pow((g + 0.055) / 1.055, 2.4);
  const bsRGB = b <= 0.03928 ? b / 12.92 : Math.pow((b + 0.055) / 1.055, 2.4);
  return 0.2126 * rsRGB + 0.7152 * gsRGB + 0.0722 * bsRGB;
}

function getContrastRatio(hex1, hex2) {
  const lum1 = getLuminance(hex1);
  const lum2 = getLuminance(hex2);
  const lighter = Math.max(lum1, lum2);
  const darker = Math.min(lum1, lum2);
  return (lighter + 0.05) / (darker + 0.05);
}

クイックチェックテーブル -- ライトモード

前景	背景	比率	パス？	用途
950	white	18.5:1	AAA	本文テキスト
900	white	14.2:1	AAA	カードテキスト
700	white	8.1:1	AAA	テキスト
600	white	5.7:1	AA	テキスト、ボタン
500	white	3.9:1	不可	テキストに不適切
white	600	5.7:1	AA	ボタンテキスト
white	700	8.1:1	AAA	ボタンテキスト
600	50	5.4:1	AA	ミュートセクションテキスト

クイックチェックテーブル -- ダークモード

前景	背景	比率	パス？	用途
50	950	18.5:1	AAA	本文テキスト
50	900	14.2:1	AAA	カードテキスト
400	950	8.2:1	AAA	ミュートテキスト
400	900	6.3:1	AA	ミュートテキスト
white	600	5.7:1	AA	ボタンテキスト

経験則：テキストの場合、前景と背景の明度差が50%以上になるようにします。

検証すべき重要なペア

1. 本文テキスト：前景を背景上に配置（ライト：white上の950 = 18.5:1、ダーク：950上の50 = 18.5:1）
2. プライマリボタン：プライマリ前景をプライマリ上に配置（ライト：600上のwhite = 5.7:1、ダーク：500上のwhite = 3.9:1 -- 限界）
3. ミュートテキスト：ミュート前景をミュート背景上に配置（ライト：50上の600 = 5.4:1、ダーク：800上の400 = 4.1:1 -- 失敗の可能性）
4. カードテキスト：カード前景をカード上に配置（ライト：white上の900 = 14.2:1、ダーク：900上の50 = 14.2:1）

よくあるコントラスト失敗の修正方法

プライマリ500上の白が失敗（3.9:1）：代わりにプライマリ600を使用（5.7:1）、またはボタン上で暗いテキストを使用します。

ダークモードのミュートテキストが失敗（800上の400 = 4.1:1）：900上の300を使用（6.8:1）。

リンクが見難い（white上の500 = 3.9:1）：プライマリ700を使用（8.1:1）、または下線装飾を追加します。

---

ステップ5：Tailwind v4 CSSを出力

@import "tailwindcss";

@theme {
  /* シェードスケール */
  --color-primary-50: #F0FDFA;
  --color-primary-100: #CCFBF1;
  --color-primary-200: #99F6E4;
  --color-primary-300: #5EEAD4;
  --color-primary-400: #2DD4BF;
  --color-primary-500: #14B8A6;
  --color-primary-600: #0D9488;
  --color-primary-700: #0F766E;
  --color-primary-800: #115E59;
  --color-primary-900: #134E4A;
  --color-primary-950: #042F2E;

  /* ライトモードセマンティックトークン */
  --color-background: #FFFFFF;
  --color-foreground: var(--color-primary-950);
  --color-card: #FFFFFF;
  --color-card-foreground: var(--color-primary-900);
  --color-popover: #FFFFFF;
  --color-popover-foreground: var(--color-primary-950);
  --color-primary: var(--color-primary-600);
  --color-primary-foreground: #FFFFFF;
  --color-secondary: var(--color-primary-100);
  --color-secondary-foreground: var(--color-primary-900);
  --color-muted: var(--color-primary-50);
  --color-muted-foreground: var(--color-primary-600);
  --color-accent: var(--color-primary-100);
  --color-accent-foreground: var(--color-primary-900);
  --color-destructive: #DC2626;
  --color-destructive-foreground: #FFFFFF;
  --color-border: var(--color-primary-200);
  --color-input: var(--color-primary-200);
  --color-ring: var(--color-primary-600);
  --radius: 0.5rem;
}

/* ダークモードオーバーライド */
.dark {
  --color-background: var(--color-primary-950);
  --color-foreground: var(--color-primary-50);
  --color-card: var(--color-primary-900);
  --color-card-foreground: var(--color-primary-50);
  --color-popover: var(--color-primary-900);
  --color-popover-foreground: var(--color-primary-50);
  --color-primary: var(--color-primary-500);
  --color-primary-foreground: #FFFFFF;
  --color-secondary: var(--color-primary-800);
  --color-secondary-foreground: var(--color-primary-50);
  --color-muted: var(--color-primary-800);
  --color-muted-foreground: var(--color-primary-400);
  --color-accent: var(--color-primary-800);
  --color-accent-foreground: var(--color-primary-50);
  --color-destructive: #EF4444;
  --color-destructive-foreground: #FFFFFF;
  --color-border: var(--color-primary-800);
  --color-input: var(--color-primary-800);
  --color-ring: var(--color-primary-500);
}

assets/tailwind-colors.cssをスターティングテンプレートとしてコピーします。

---

コンポーネント使用例

// プライマリボタン
<button className="bg-primary text-primary-foreground hover:bg-primary/90">クリック</button>

// セカンダリボタン
<button className="bg-secondary text-secondary-foreground hover:bg-secondary/80">キャンセル</button>

// カード
<div className="bg-card text-card-foreground border-border rounded-lg">
  <h2>タイトル</h2>
  <p className="text-muted-foreground">説明</p>
</div>

// 入力フィールド
<input className="bg-background text-foreground border-input focus:ring-ring" />

---

一般的な調整

• 明るいシェードが過度に鮮やか：彩度を10〜20%削減
• プライマリのコントラストが不良：テキストにはシェード700以上を使用
• ダークモードが暗すぎる：950ではなくシェード900を背景に使用
• ブランドカラーが明るすぎる/暗すぎる：シェード500〜600の範囲に調整
• ダークモードが褪せ色に見える：プライマリにシェード500を使用（ライトモードの600より明るい）
• 純粋な白テキストがダークモードで厳しすぎる：純粋な白の代わりにシェード50（オフホワイト）を使用
• ダークモードのミュートテキストがコントラストに失敗：より極端なシェードを使用（400on800ではなく300on900）

ブランドアイデンティティ調整

• 保守的なブランド（金融、法律）：ボタンにはプライマリ700を使用、明るいシェードの彩度を削減
• 鮮やかなブランド（クリエイティブ、テック）：プライマリ500〜600を使用、彩度を100%に保持
• ミニマルブランド（デザイン、建築）：プライマリを控えめに使用、ミュートトーンを強調、繊細なボーダー（プライマリ100）

---

検証チェックリスト

• 本文テキスト：>=4.5:1（通常）または>=3:1（大きい）
• プライマリボタンテキスト：>=4.5:1
• セカンダリボタンテキスト：>=4.5:1
• ミュートテキスト：>=4.5:1
• リンク：>=4.5:1（または下線付き）
• UIエレメント（ボーダー）：>=3:1
• フォーカスインジケータ：>=3:1
• エラーテキスト：>=4.5:1
• ダークモード：上記のチェックすべてに合格
• すべての背景にペアの前景がある
• 両モードでブランドカラーが認識できる
• ボーダーが見える（ただし刺激的ではない）
• カード/セクションに明確な境界がある

出荷前に両モードをテストしてください。

---

オプション参考資料

• オンラインコントラストチェッカー：WebAIM（webaim.org/resources/contrastchecker）、Coolors（coolors.co/contrast-checker）、Accessible Colors（accessible-colors.com）
• CI/CDコントラストテスト：テストスイートでgetContrastRatio()を使用して、すべてのトークンペアの最小比率をアサート
• 透明/グラデーション境界ケース：不透明度付きカラーの場合、最終的にレンダリングされたカラーに対して計算します。グラデーションの場合、両方のエンドポイントをチェックします。
• OLED ダークモード：Amoledスクリーンのバッテリーセーブのため、@media (prefers-contrast: high)で#000000背景を使用
• マルチカラーパレット：各ブランドカラーに対して別々のシェードスケールを生成し、異なるセマンティックロール（プライマリ、アクセント）にマップします
• パレット可視化ツール：coolors.co、paletton.com、Figmaスウォッチ
• assets/tailwind-colors.css — 完全なCSS出力テンプレート