配色ツールとは、カラーパレットの候補を提案したり、色の組み合わせが見やすいかを判定してくれるWebサービスのことです。無料のものだけでも数十種類あり、そのぶん「ツールは開いたが結局決まらない」という状態にもなりやすいところです。配色が決まらない原因はツールの数ではなく、色を決める順番が決まっていないことにあります。この記事では、制作会社として実際に使っている配色ツール10個を「候補を探す」「1色から広げる」「見え方を確認する」の工程別に紹介し、あわせて現場での決め方の手順を解説します。
配色が決まらない原因は「順番」にある
結論から言えば、色そのものを探す前に色の役割と面積を決めるのが先です。ここが決まっていないままパレットを眺めると、どれも良く見えて選べません。
目安となるのが、ベースカラー70％・メインカラー25％・アクセントカラー5％という配分です（60：30：10という言い方もしますが、考え方は同じです）。ベースは背景や余白にあたる最も広い面積、メインはブランドの印象を決める色、アクセントはボタンやリンクなど「押してほしい場所」に使う色です。
この3つの枠を先に用意しておくと、ツールで出てきた5色パレットを見たときに「この色はベースには強すぎる」「アクセントがもう1段鮮やかでないと押せない」といった判断ができるようになります。逆に枠がないままだと、好きな色を5つ並べただけの状態になり、デザインに落としたときにまとまりません。
① 候補を探すときに使う配色ツール3選
最初の段階は「世の中にどんな組み合わせがあるか」を浴びる工程です。完成品のパレットが大量に並んでいるサイトが向いています。
Color Hunt｜4色パレットを人気順で眺める
Color Huntは、4色セットのパレットが人気順・新着順に並ぶサイトです。1パレットが4色に固定されているため、ベース・メイン・アクセント＋補助の役割に当てはめやすいのが利点です。トレンドの傾向をつかむ目的なら、まずここを数分スクロールするのが早いです。
Adobe Color｜色相環のルールから組む
Adobe Colorは、類似色・補色・トライアドといった配色ルールを選ぶと、色相環上で成立する組み合わせを自動で作ってくれるツールです。色覚特性のある方にとって見分けづらい組み合わせを検出する機能もあり、作った配色はCreative Cloudライブラリ経由でIllustratorやPhotoshopにそのまま持ち込めます。Adobeのアプリで作業するなら第一候補です。
NIPPON COLORS｜和の表現に寄せたいとき
NIPPON COLORSは日本の伝統色を集めたサイトです。神社・寺院、和菓子、呉服、旅館といった案件では、海外製のパレットから選ぶより、こうした伝統色を起点にしたほうが狙った空気に近づきます。色名そのものが企画書での説明材料になるのも実務上の利点です。和のサイトづくりについては神社のホームページ制作ガイドでも触れています。
② メイン1色から広げる配色ツール3選
コーポレートカラーやロゴの色が決まっている案件では、1色を固定したまま残りを組み立てる工程になります。ここは自動生成が効きます。
Coolors｜1色を固定してランダム生成
Coolorsはスペースキーを押すだけでパレットが切り替わるツールです。使い方のコツは、決まっている色に鍵のアイコンでロックをかけてから回すことです。固定色との相性だけを見られるので、判断が速くなります。明度・彩度の微調整やCSS形式での書き出しにも対応しています。
Huemint｜用途を選んでAIに提案させる
Huemintは、Webサイト・ブランド・イラストといった用途を選ぶと、その用途のレイアウトに色を当てた状態で提案してくれるツールです。色見本ではなく「当てた結果」で見られるため、面積比を含めた判断ができます。パレット単体では地味に思えた組み合わせが、実際のレイアウトでは最も読みやすいという逆転はよく起きます。
ColorSpace｜1色入力でパレットとグラデーションを出す
ColorSpaceは、HEXコードを1つ入力するだけで、相性のよいパレットやグラデーションを何種類も出してくれるツールです。CSSのグラデーション指定をそのままコピーできるので、コーディング前の下準備としても便利です。
③ 見え方を確認する配色ツール4選（Web制作では必須）
Webサイトで使う配色は、きれいかどうかの前に読めるかどうかの確認が必要です。ここを飛ばすと、公開後に「文字が薄くて読めない」という指摘で作り直しになります。
判断の基準になるのは、W3Cのガイドライン（WCAG）が定めるコントラスト比です。通常サイズの文字は背景との比が4.5：1以上、18pt（24px）以上の大きな文字や太字は3：1以上、ボタンの枠やアイコンなどのUI部品も3：1以上が目安とされています。
- WebAIM Contrast Checker：2色のHEXを入れるとコントラスト比と合否がすぐに出ます。最も手早い確認方法です
- Who Can Use：色覚特性や視力の条件ごとに、その組み合わせがどう見えるかをシミュレーションできます。クライアントへの説明材料としても使えます
- Realtime Colors：ダミーのWebページに配色を即時反映してプレビューできます。ダークモードの切り替え確認も可能です
- Leonardo：コントラスト比を数値で指定して色のスケールを作れるツールです。デザインシステムのように段階的な色を用意する場合に向いています
制作の現場では、2024年4月に改正障害者差別解消法が施行され、民間事業者にも合理的配慮の提供が義務づけられたことで、アクセシビリティに関する問い合わせが増えました。ウェブサイトの対応そのものが一律に義務化されたわけではありませんが、公共性の高いサイトや官公庁系の案件では、コントラスト比を満たしているかが仕様として求められる場面が出てきています。配色の段階で測っておけば、後工程の手戻りを防げます。
制作現場での配色の決め方4ステップ
ツールの使い分けを前提にすると、手順は次の4つに整理できます。慣れれば30分程度で方向が固まります。
- 役割と面積を決める：ベース70％・メイン25％・アクセント5％の枠を用意する
- メイン1色を決める：ロゴ・コーポレートカラー・業種の慣習（医療なら青系、飲食なら暖色系など）から選ぶ
- ツールで3案に絞る：CoolorsやHuemintで候補を出し、トーン（彩度と明度の調子）が揃っているものを残す
- 実画面に流して測る：Realtime Colorsでページに当て、文字と背景のコントラスト比をWebAIMで確認して微調整する
工程とツールの対応は次の表のとおりです。
| 工程 | 使うツール | 見るポイント |
|---|---|---|
| 候補を探す | Color Hunt／Adobe Color／NIPPON COLORS | 業種に合う方向性かどうか |
| 1色から広げる | Coolors／Huemint／ColorSpace | 固定色との相性とトーンの統一 |
| 見え方を確認する | WebAIM／Who Can Use／Realtime Colors／Leonardo | コントラスト比と色以外の手がかり |
| 色名・近似色を調べる | 原色大辞典 | 指定色に近い色名と和名 |
配色でよくある失敗と対処法
配色の失敗はパターンが決まっています。先に知っておくだけで避けられるものばかりです。
- 鮮やかな色を広い面積に使う：彩度の高い色は5％の面積で最も効きます。背景に敷くなら彩度を落とすか、白に近づけます
- グレーを無彩色のまま使う：メインカラーをわずかに混ぜたグレーにすると、画面全体の統一感が上がります
- リンクを色だけで区別する：色の違いが判別しづらい方にも伝わるよう、下線や矢印など色以外の手がかりを残します（CSSのリンクデザインも参考にしてください）
- 文字を真っ黒で置く：#000000は白背景とのコントラストが強すぎるため、#1a1a1a〜#333333あたりに落とすと長文が読みやすくなります
- 画面で決めて印刷で沈む：RGBの鮮やかな色はCMYKで再現できません。印刷物が絡む案件では、Illustratorで色見本を確認しながら決めます
よくある質問（FAQ）
紹介したツールは無料で使えますか？
いずれも無料で使えます。Coolorsのように有料プランで広告非表示や追加機能が使えるものもありますが、配色を決める用途であれば無料の範囲で足ります。Adobe Colorはパレットの保存にAdobeアカウントが必要です。
Webサイトで使う色は何色までが適切ですか？
ベース・メイン・アクセントの3色に、文字用の濃いグレーと背景用の淡いグレーを加えた5色程度で組むのが扱いやすい構成です。色数を増やすより、同じ色の明度を変えて段階を作るほうがまとまります。
コーポレートカラーが決まっている場合はどうしますか？
その色をメインに固定し、Coolorsでロックをかけて周辺の色を探します。コーポレートカラーが文字色としてコントラスト比を満たせない場合は、ロゴなど面積の小さい箇所に残し、文字やボタンには明度を調整した派生色を使う方法が現実的です。
ダークモード用の配色も同時に決めるべきですか？
ダークモードに対応する方針なら、同時に決めたほうが手戻りがありません。明るい配色をそのまま反転させると彩度が強すぎて見えづらくなるため、背景は完全な黒ではなく#121212前後にし、メインカラーは彩度を下げた色に置き換えます。Realtime Colorsなら両方を切り替えながら確認できます。
AIの提案だけで配色を決めてよいですか？
候補出しには有効ですが、最終判断は人が行う必要があります。AIは業種の慣習や競合との差、クライアントのブランドの文脈までは考慮しないためです。提案された配色を実画面に当てて、読みやすさと業種への適合を確認する工程は省けません。
まとめ
配色ツールは数を知っていること自体に意味はなく、工程ごとに使うものを決めておくほうが実務では速く進みます。候補を探すならColor HuntとAdobe Color、1色から広げるならCoolorsとHuemint、見え方の確認はWebAIMとRealtime Colors。この6つを押さえておけば、ほとんどの案件は回ります。そのうえでベース70％・メイン25％・アクセント5％の枠とコントラスト比の基準を守れば、感覚に頼らず理由を説明できる配色になります。
THREE D PLUSでは、Webサイトから印刷物まで、業種に合わせた配色の設計から実装までを一貫してお手伝いしています。フォント選びについてはGoogle Fontsのおすすめ日本語フォントでも解説していますので、あわせてご覧ください。デザイン制作のご相談はお問い合わせフォームからお気軽にどうぞ。
