【個人開発】5種類のカラースキームを瞬時に生成するツールを作った

Posted at 2025-11-26

結論：ベースカラー1つで5種類の配色パターンが自動生成できます

Webサイトやアプリの配色を決めるとき、「この色に合う組み合わせって何だろう...」と悩んだことはありませんか？

色彩理論に基づいた5種類のカラースキーム（単色・補色・三色・四色・類似色）を、ベースカラーを選ぶだけで自動生成するツールを作りました。

ツールはこちら → Color Scheme Generator

できること

ベースカラーから5種類のカラースキームを自動生成
各スキームごとに5色のパレットを提示
カラーコードをワンクリックでコピー
リアルタイムプレビュー

5種類のカラースキームとは

1. Monochromatic（単色配色）

同じ色相のまま、明度だけを変化させた配色です。統一感があり、落ち着いた印象を与えます。

ベースカラー: #3b82f6
→ 明るめ +20%
→ 暗め -15%
→ さらに明るく（彩度下げ）
→ さらに暗く（彩度上げ）

2. Complementary（補色配色）

色相環で180度反対側にある色との組み合わせ。コントラストが強く、目を引くデザインに向いています。

ベースカラー: #3b82f6 (青)
補色: #f6823b (オレンジ)

3. Triadic（三色配色）

色相環を三等分した位置にある3色の組み合わせ。バランスが良く、活気のある印象になります。

ベースカラー: #3b82f6 (青)
+120°: #82f63b (緑)
+240°: #f63b82 (ピンク)

4. Tetradic（四色配色）

色相環を四等分した位置にある4色の組み合わせ。多彩でダイナミックな表現が可能です。

ベースカラー: #3b82f6 (青)
+90°: #3bf682 (青緑)
+180°: #f6823b (オレンジ)
+270°: #823bf6 (紫)

5. Analogous（類似色配色）

色相環で隣り合う色（±30度）を使った配色。自然な調和が生まれ、穏やかな印象を与えます。

ベースカラー: #3b82f6 (青)
+30°: #3b5cf6 (青紫)
-30°: #3bc4f6 (水色)

使い方

Step 1: ベースカラーを選択

カラーピッカーで色を選ぶか、HEXコードを直接入力します。

例: #3B82F6

Step 2: 生成されたスキームを確認

入力と同時に5種類のスキームがリアルタイムで生成されます。

スキーム	特徴	おすすめ用途
Monochromatic	統一感がある	企業サイト、フォーマルなデザイン
Complementary	目を引く	CTAボタン、アクセント
Triadic	バランスが良い	ロゴ、イラスト
Tetradic	多彩	ダッシュボード、データ可視化
Analogous	穏やか	自然系サイト、リラックス感

Step 3: カラーコードをコピー

各色をクリックすると、HEXコードがクリップボードにコピーされます。

技術的な仕組み

色相環の計算

HSL（Hue, Saturation, Lightness）色空間を使って、色相を回転させています。

const hexToHsl = (hex: string) => {
  // HEX → RGB → HSL 変換
  const r = parseInt(hex.slice(1, 3), 16) / 255
  const g = parseInt(hex.slice(3, 5), 16) / 255
  const b = parseInt(hex.slice(5, 7), 16) / 255
  // ... HSL計算
  return { h: hue * 360, s: saturation * 100, l: lightness * 100 }
}

const hslToHex = (h: number, s: number, l: number) => {
  // HSL → RGB → HEX 変換
  // ...
}

// 補色を計算（色相を180度回転）
const complementary = hslToHex((hsl.h + 180) % 360, hsl.s, hsl.l)

各スキームの生成ロジック

// Triadic（三色配色）
const triadicColors = [
  baseColor,
  hslToHex((hsl.h + 120) % 360, hsl.s, hsl.l),
  hslToHex((hsl.h + 240) % 360, hsl.s, hsl.l),
]

// Analogous（類似色配色）
const analogousColors = [
  baseColor,
  hslToHex((hsl.h + 30) % 360, hsl.s, hsl.l),
  hslToHex((hsl.h - 30 + 360) % 360, hsl.s, hsl.l),
]