配色に迷わない。基準色から補色・類似色・トライアドを自動で作るコツ
公開日：2026年7月10日 対象ツール：カラーパレット生成
資料やWebページ、スライドを作るとき、「メインの色は決まったけれど、それに合う色が思いつかない」と手が止まってしまうことはありませんか。色選びには色相環（しきそうかん）という理論がありますが、初心者がゼロから考えるのは大変です。
このツールは、基準となる色を1つ選ぶだけで、それと調和する色の組み合わせを自動で作ってくれます。むずかしい計算は不要で、気に入った色はクリックするだけでコピーできます。
このツールでできること
ベースとなる色を入力すると、次の6種類の配色を一度に生成します。それぞれに色の見本とHEX・RGB値が表示されます。
- 補色（コンプリメンタリ）：色相環で正反対にある色。互いを引き立て、コントラストの強い印象になります。
- 類似色（アナロガス）：色相環で隣り合う色。まとまりのある自然で落ち着いた配色です。
- トライアド（3色）：色相環を120度ずつ3等分。バランスよく鮮やかにまとまります。
- スプリットコンプリメンタリ：補色の両隣を使う配色。補色ほど強すぎず、変化をつけたいときに。
- テトラード（4色）：90度ずつの4色。情報量が多く、メリハリのある配色です。
- モノクロマティック（同色相）：同じ色相で明るさだけを変えた濃淡。統一感のあるトーン展開ができます。
使い方
- カラーピッカーで色を選ぶか、HEX欄に色コード（例：#3B5BDB、3桁の #ABC も入力できます）を入れます。
- ピッカーとHEX欄は連動していて、どちらを変えても配色がその場で作り直されます。
- 6種類の配色が一覧で表示されます。それぞれの色見本には HEX と RGB の値が出ます。
- 気に入った色の見本をクリックすると、その色のHEXがコピーされます。
コピーした値は、デザインツールやCSS、資料の色設定にそのまま貼り付けて使えます。
こんなときに便利
たとえば、青系のブランドカラー #3B5BDB を基準にしたいとします。この色を入力すると、補色にはオレンジ寄りの色が生成され、ボタンやアクセントに使うと目を引く配色になります。もう少し柔らかくしたいときは、スプリットコンプリメンタリの色を選べば、コントラストを保ちつつ落ち着いた印象にできます。
逆に、まとまりを重視したいときは類似色が便利です。基準色に近い青紫〜水色の色が並ぶので、背景やカードの色分けに使うと自然に統一感が出ます。ロゴから3色を展開したいならトライアド、見出しや背景の濃淡を作りたいならモノクロマティック、というように用途で使い分けられます。
よくある質問
補色・類似色・トライアドの違いは？
補色は正反対の色で最もコントラストが強く、類似色は隣り合う色でまとまりのある落ち着いた印象になります。トライアドは色相環を3等分した3色で、鮮やかさとバランスを両立できます。目立たせたいなら補色、まとめたいなら類似色、という使い分けが目安です。
HEXカラーコードとは何ですか？
色を16進数で表す記法で、#RRGGBB の形式です。赤・緑・青の強さをそれぞれ00〜FFで表します。#3B5BDB のような6桁のほか、#ABC のような3桁でも入力できます。
生成した色をそのまま使えば見やすくなりますか？
色は調和しますが、読みやすさは別の問題です。特に文字色と背景色のコントラストは重要で、必要に応じて明るさを調整してください。あくまで配色の出発点としてお使いいただくのがおすすめです。
色選びに正解を求めて迷うより、まずは基準色を1つ決めて、このツールで候補を見比べてみてください。理論を暗記しなくても、調和した配色の下地がすぐに手に入ります。ぜひ日々のデザインづくりにお役立てください。