配色に悩まない時代へ：カラースキーム自動生成ツールを作った
はじめに
「この青に合う色って何だろう...」
Webアプリを作っていると、必ずぶつかる壁がある。配色だ。
メインカラーは決まった。でも、アクセントカラーは？ボタンのホバー色は？エラー表示の色は？考え始めると、なかなか手が進まなくなる。
かといって、適当に選ぶと後で「なんか統一感がないな...」という残念な結果になりがち。
今回は、この問題を解決するために作ったカラースキーム生成ツールについて、設計思想から実装まで詳しく紹介する。
ツールはこちら → Color Scheme Generator
なぜカラースキームが重要なのか
配色が与える印象
色は、サイトやアプリの印象を大きく左右する。
同じレイアウト、同じ機能でも、配色が違えば全く異なる印象を与える。落ち着いた色なら信頼感、鮮やかな色なら活気、パステルカラーなら優しさ。
この「印象」をコントロールするのが、配色の役割だ。
調和の取れた配色とは
色彩理論には、「調和」という考え方がある。
色相環（カラーホイール）上での位置関係によって、相性の良い色の組み合わせが決まる。これを知っているかどうかで、配色の質が大きく変わってくる。
| 関係 | 角度 | 特徴 |
|---|---|---|
| 補色 | 180° | 強いコントラスト |
| 三色 | 120° | バランスの良い多色 |
| 四色 | 90° | 多彩で動きのある |
| 類似色 | 30° | 自然な調和 |
ツールの設計思想
入力はシンプルに
操作は徹底的にシンプルにした。
カラーピッカーで色を選ぶか、HEXコードを入力する。それだけ。設定項目を増やせば柔軟性は上がるが、その分「どう設定すればいいの？」という迷いも増える。
このツールは「配色に悩んでいる人」のためのものだ。悩みを増やしてどうする。
5つのスキームを同時に提示
生成するカラースキームは5種類。
- Monochromatic（単色配色）
- Complementary（補色配色）
- Triadic（三色配色）
- Tetradic（四色配色）
- Analogous（類似色配色）
なぜ5つなのか。
1つだけだと選択肢がなく、10個もあると選べなくなる。5つというのは、「比較検討できるけど、迷いすぎない」絶妙なラインだと考えた。
横にスクロールして並べて見られるようにしたのも、比較しやすさを意識した結果だ。
リアルタイム生成
ベースカラーを変えると、スキームが即座に更新される。
「この色だとどうなるかな？」を気軽に試せることで、探索的な使い方ができる。目的の色が決まっていなくても、触っているうちに「あ、これいいかも」が見つかる。
各スキームの詳細
Monochromatic（単色配色）
同じ色相で、明度と彩度だけを変化させたパレット。
ベースカラー
→ 明度 +20%
→ 明度 -15%
→ 明度 +30%、彩度 -20%
→ 明度 -25%、彩度 +10%
統一感が強く、フォーマルな印象を与えやすい。企業サイトやコーポレートカラーの展開に向いている。
失敗しにくい反面、単調になりがちという面もある。アクセントとして他のスキームの色を1色だけ加える、という使い方も効果的だ。
Complementary（補色配色）
色相環で正反対（180度）に位置する色同士の組み合わせ。
青とオレンジ、赤と緑のような関係だ。コントラストが強く、お互いを引き立て合う。
注意点として、両方を同じ面積で使うとうるさくなる。一方を主役、もう一方をアクセントにするのがコツ。
Triadic（三色配色）
色相環を三等分した位置にある色の組み合わせ。
赤・青・黄のような関係（正確には120度ずつ離れた色）。バランスが良く、活気のある印象になる。
ロゴデザインやイラストでよく使われる配色パターンだ。
Tetradic（四色配色）
色相環を四等分した位置にある4色の組み合わせ。
色数が多いため、ダッシュボードのグラフや複数カテゴリーの色分けに向いている。
ただし、4色を均等に使うとごちゃごちゃするので、1色をメイン、2色をサブ、1色をアクセントという配分がおすすめ。
Analogous（類似色配色）
色相環で隣り合う色（±30度）を使った配色。
自然界に多く見られる配色パターンで、穏やかで調和の取れた印象を与える。紅葉のグラデーション、海と空の色合いなど。
落ち着いた雰囲気を出したいときに最適だ。
実装のポイント
HSL色空間での計算
色相の回転には、HSL（Hue, Saturation, Lightness）色空間を使っている。
HEXやRGBでは色相を直接操作しにくいが、HSLなら色相（H）の値を変えるだけで済む。
// HEXからHSLへの変換
const hexToHsl = (hex: string) => {
// RGB値を0-1の範囲に正規化
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
const max = Math.max(r, g, b)
const min = Math.min(r, g, b)
let h = 0, s = 0, l = (max + min) / 2
if (max !== min) {
const d = max - min
s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
// 色相の計算...
}
return { h: h * 360, s: s * 100, l: l * 100 }
}
なぜ5色ずつなのか
各スキームで5色を生成している理由は、実用性のバランスだ。
3色だと物足りない場面が多く、7色以上だと情報過多になる。5色あれば、メイン・サブ・アクセント・背景・テキストと、基本的な用途をカバーできる。
明度バリエーションの追加
単に色相を回転させるだけでなく、各スキームには明度のバリエーションも含めている。
// Triadicの例
const triadicColors = [
baseColor,
hslToHex((hsl.h + 120) % 360, hsl.s, hsl.l),
hslToHex((hsl.h + 240) % 360, hsl.s, hsl.l),
hslToHex(hsl.h, hsl.s, Math.min(90, hsl.l + 20)), // 明るめ
hslToHex((hsl.h + 120) % 360, hsl.s, Math.max(10, hsl.l - 15)), // 暗め
]
これにより、同じスキーム内でも濃淡を使い分けられる。
こんな使い方がおすすめ
デザインの方向性を探る
「なんとなくこの色がいいな」という直感からスタートして、どのスキームがしっくりくるか試す使い方。
5パターンを見比べることで、自分が求めている雰囲気が明確になることもある。
プレゼン資料の配色
スライド作成時に、一貫性のある配色を揃えたいとき。Monochromatic（単色）を使えば、統一感のある資料が簡単に作れる。
既存デザインのリファクタリング
「なんか色がまとまってないな」と感じるサイトを改善するとき。現在のメインカラーを入力して、理論に基づいた配色と比較してみる。
おわりに
配色は、センスの問題だと思われがちだ。
でも実際には、色彩理論という「ルール」がある。そのルールを知っていれば、誰でもそれなりに調和の取れた配色ができる。
このツールは、その理論を手軽に使えるようにしたものだ。
「この色に合うのは何色？」という問いに対して、理論に基づいた答えを瞬時に得られる。あとは、その中から自分の感覚に合うものを選べばいい。
配色で悩む時間を減らして、本当に考えるべきことに集中しよう。
ツールはこちら → Color Scheme Generator
Discussion