使い方
ベース色を HEX (`#FF0000`) で入力するか、カラーピッカーで選ぶと、色彩理論に基づく **7 種類の配色** を同時に生成: **補色 (complementary、180°)**・**類似色 (analogous、±30°)**・**三色配色 (triadic、120° 等分)**・**四色配色 (tetradic、矩形)**・**スプリット補色 (split-complementary、180°±30°)**・**スクエア (square、90° 等分)**・**モノクロマティック (mono、同色相 × 明度 5 段階)**。すべて **HSL 色相環** 上の角度回転で計算されます。各色のスウォッチをクリックすると HEX をクリップボードにコピー、または「全色を CSS でコピー」で CSS Custom Properties (`--color-comp-1: #...;` 形式) を一括コピーできます。デザインシステムのベースカラー策定、ロゴカラーのバリエーション提案、Web サイトのテーマカラー、UI のアクセントカラー選びに。
詳細解説
ブランドカラーは「未発表の意図」を持っている
配色ツールを使うタイミングは、多くの場合デザインシステムの策定段階やロゴの色決定、未発表プロダクトのブランドカラー検討です。ベース色として入力する HEX は、まだ公開されていない製品の主要色、競合に知られたくないブランドの方向性、あるいは発表前のリブランディング案を表していることがあります。
単体の HEX 値には個人情報は含まれませんが、色の組み合わせはブランド戦略の一部です。「どの色からどの配色を生成しているか」という情報を外部サービスのサーバーログに残すことは、競合情報の意図しない露出になりえます。軽視されがちですが、デザイン領域では色そのものが知的財産として扱われるケースがあります。
オンライン配色ツールのリクエストはどこに残るか
多くのオンライン配色生成サービスは、色値を URL パラメータやリクエストボディとしてサーバーに送信します。サーバー側のアクセスログには、どの色でどの配色を探したかが記録されます。無料サービスでは広告最適化・マーケティング分析・サービス改善のためにこのデータを利用していることが少なくありません。
利用規約に「匿名化してサービス改善に使う」と書かれている場合でも、具体的な色値の組み合わせから企業の配色方針が推測できるケースがあります。特に複数人のデザイナーが同じサービスで同じブランドカラーを繰り返し検索する場合、ログが蓄積されるとブランド戦略の方向性が露出する可能性があります。
HSL 色相環の算術だけで動くブラウザ内計算
このツールは入力された HEX を HSL (Hue, Saturation, Lightness) に変換し、色相環 (0〜360°) 上での角度計算だけで 7 種類の配色を生成します。補色は h + 180°、三色配色は h + 120° と h + 240°、類似色は h ± 30° といった純粋な算術です。HSL → RGB → HEX の変換も同様に算術演算で完結します。
つまりこの処理に外部通信は一切不要です。入力した色値はブラウザのメモリ内に留まり、サーバーに送信されることはありません。DevTools の Network タブを開いたまま操作しても、リクエストが発生しないことを目視で確認できます。計算式は GitHub で公開されており、誰でも検証できます。
配色を確定する前に確認したいこと
生成した配色をデザインに採用する前に、実際のコンテキストで確認することを推奨します。色覚多様性のあるユーザーにも区別できるか (color-blindness-sim ツールで確認)、コントラスト比が WCAG AA / AAA を満たすか (color-contrast-checker で確認)、暗い背景と明るい背景の両方で意図した印象を与えるか ——配色の最終決定は、色相環上の理論的な整合性だけでなく、実際のユーザー体験を考慮したチェックを経てから行うのが安全です。
HSL 色相環と sRGB / OKLCH の知覚均等性の差
HSL は 1978 年に Joblove & Greenberg が提案した色空間で、H (Hue, 色相 0-360°) / S (Saturation, 彩度 0-100%) / L (Lightness, 明度 0-100%) の 3 軸で色を表現します。色相環の便利な性質として、補色は 180°、三色配色は 120° 間隔、四色配色 (tetradic) は 60° と 120° の組合せ、というように 角度の幾何学だけで配色を生成できる 点があります。HSL は sRGB から直接導出される色空間で、ブラウザの CSS で hsl(210deg 50% 60%) のように標準サポートされています。
ただし HSL の色相環は 知覚均等ではない という落とし穴があります。H=0° (赤) と H=120° (緑) は同じ 120° 差ですが、人間の目には緑のほうが明るく感じます。同じ L=50% でも、H=60° (黄) は非常に明るく見え、H=240° (青) は暗く見えます。これは sRGB がディスプレイのガンマカーブに合わせた色空間で、知覚的な均等性を保証していないためです。プロフェッショナルな配色設計では OKLCH (Björn Ottosson, 2020) が知覚均等性を持つ後継として注目されており、CSS Color Module Level 4 で標準化されています。本ツールは HSL ベースですが、生成された配色を color-converter で OKLCH に変換することで、より知覚的に均整の取れたパレットに調整できます。
業界別の配色テンプレートと避けたい組合せ
ロゴ・ブランド設計で頻出する配色パターンには業界ごとの傾向があります。テック系の B2B SaaS は青系 (#2563EB / #3B82F6 の Tailwind blue 系) を主要色に、補色のオレンジをアクセントにする組合せが多く、Stripe・Linear・Slack などが代表例です。フィンテック・銀行系は信頼性を示す紺色 (#1E3A8A 付近) + 金色のスプリット補色配色が定番。フード・コスメ系は類似色配色 (H=20° 〜 H=60° の暖色帯) で食欲・血色感を演出します。
避けたい組合せとしては、(a) 色相が近すぎて区別できない類似色を Primary と Secondary に充てる、(b) 補色を 50/50 の比率で並べてしまい振動感 (color vibration) が出るデザイン、(c) 高彩度の純粋色 (S=100%) ばかりを使い目が疲れる UI、などがあります。実務的には、生成した 7 種類の配色から 2-3 色だけを採用し、残りを tint (白を混ぜる) や shade (黒を混ぜる) でデザインシステムのスケールに展開する流れが多く見られます。Material Design や Tailwind のカラーパレット (blue-50 〜 blue-950 の 11 段階) は、まさにこの「基準色 1 つから 11 段階」のパターンの例です。本ツールで得た 2-3 色を color-blend に渡せば 2 色間の N 段階補間が得られ、ロゴ色からデザインシステムの 11 段階スケールを 1 ツールで構築する流れに繋げられます。
よくある質問
- 入力データはサーバーに送信されますか?
- いいえ。すべてブラウザ内で完結します。HSL ↔ RGB 変換も純粋な算術。
- 7 種類の配色の使い分けは?
- **補色 (Complementary)**: コントラスト最大 (例: 赤と青緑)、注目を集めたいバナー / CTA に。**類似色 (Analogous)**: 隣接色のため穏やか、グラデーション / 背景に。**三色配色 (Triadic)**: 鮮やかでバランス良し、ロゴ / イラストの基本色に。**四色配色 (Tetradic)**: 4 色の矩形配置で複雑、複数カテゴリの色分けに。**スプリット補色 (Split-Comp.)**: 補色のコントラストを持ちつつ穏やか、初心者向け。**スクエア (Square)**: 4 色の正方形配置で最もバランス、4 セクション UI に。**モノクロマティック (Mono)**: 同色相の明度違い、シック / ダーク UI に。
- なぜ HSL で計算するのですか? RGB ではダメ?
- RGB は表示用の色空間で、色相 (hue) が独立した次元として扱えません。色彩理論 (補色 / 三色配色 / 類似色) はすべて **色相環の角度** で定義されるので、HSL に変換して `h` を加減算 → RGB に戻す、が標準的な実装。OKLCH を使うとさらに知覚均一になりますが、本ツールは古典的 HSL を採用 (歴史的な色彩理論の教科書と同じ計算)。
- 補色の組み合わせはいくつか覚えておくと便利ですか?
- **赤 ↔ シアン**、**青 ↔ オレンジ**、**緑 ↔ マゼンタ**、**黄 ↔ 紫** がよく使われます。例えば赤 `#FF0000` の補色は `#00FFFF` (シアン)、緑 `#00FF00` の補色は `#FF00FF` (マゼンタ)。実は補色は 180° 反対側なので、HEX で `R, G, B` を `255 - R, 255 - G, 255 - B` した値が補色 (HSL でも同じ結果)。
- モノクロマティックの明度 5 段階は何にいいですか?
- **ダークモード / ライトモード** の UI、**ボタンの hover / active 状態** (10-20% 明度を上下)、**カードのレイヤリング** などに。本ツールは `l = 0.2 / 0.35 / 0.5 / 0.65 / 0.8` の 5 段階で生成。Tailwind の `50/100/200…900` シェード生成にも応用できます (明度を 10% 刻みに細分化する形)。
- 結果を Figma / Sketch にコピーするには?
- 各 swatch をクリックすると HEX がクリップボードに入ります。Figma の Fill 入力欄に貼り付けで反映。「全色を CSS でコピー」で `--color-name-1: #...;` 形式の CSS Custom Properties が一括コピーされるので、Web プロジェクトの globals.css にそのまま貼り付けられます。
「送らない」を確かめるには
このツールは入力データを外部に送信しません。仕組み・監査手順・運営方針は以下で詳しく説明しています。
類似のツール
色補間 — 2 色を N ステップで混ぜてパレット生成
2 色 (HEX または CSS 色名) を線形補間して N 段階のパレットを生成します。補間モードは RGB (素直な混色) と HSL (色相を最短距離で回す混色)。Tailwind 風の 11 階調を作る、デザイントークン用のシェード生成、グラデーション CSS の中間色サンプル、アクセシビリティのテキスト読み取り用カラーステップ作成、といった用途に。各 swatch は HEX をクリックでコピー、CSS `linear-gradient` 文字列もコピー可能。すべてブラウザ内で完結します。
カラーミキサー — N 色を RGB / HSL / OKLCH / LAB で混色して並列比較
複数の色 (2〜8 色) を重み付きで混色し、結果を **4 つの色空間 (sRGB / HSL / OKLCH / LAB) 並列** で表示します。同じ青と黄色を混ぜても、sRGB では濁った緑、OKLCH では鮮やかな緑になる ── というカラーサイエンスの古典的な差異を視覚化。デザイントークンの中間色生成、ブランドカラーのチント/シェード作成、A/B 案の知覚的差を比較する用途に。各色の重み (0.0〜1.0) は自由調整、3 色以上のミックスもサポート。`color-blend` (2 色を N ステップで補間してパレット化) の補完ツールで、本ツールは **N 色 → 1 色 + 色空間比較** に特化。結果は HEX / CSS で個別コピー、色空間別 swatch をクリックでも瞬時にコピー。すべてブラウザ内で完結、外部送信なし。
カラー変換 — HEX / RGB / HSL / HSV を相互
HEX・RGB・HSL・HSV をリアルタイムに相互変換できるカラーピッカー付きツール。どの欄を編集しても他の 3 表記が即座に追従。すべてブラウザ内で動作し、入力した色情報は外部に送信されません。
画像カラーパレット抽出 (主要色・配色を取得)
画像をドロップすると、median cut 量子化で主要な色を抽出し、各色の HEX / RGB 値と占有率を一覧表示します。色数 (4〜16) を選べ、占有率バーで配色バランスも確認可能。各色クリックで HEX をコピー、パレット全体を HEX 一覧 / CSS 変数 / JSON でコピーできます。画像はブラウザ内でだけ解析され、外部に送信されません。