カラーパレットの作り方｜4色を決める手順と無料ツール

作りはじめるたびに色で迷って、気づいたら1時間たっていませんか？

色は毎回選ぶものではありません。先に4色決めて、それを使い回す。プロが速いのは、この手順を持っているからです。
このレッスンでは、カラーパレットに何色そろえるかから始めて、1色目の決め方、写真から作る方法、無料ツールでの作り方、保存のしかたまで通しで扱います。
最後は自分の定番パレットを1つ作って保存する課題です。1つ持っておくと、次の制作から色選びの時間がほぼゼロになりますよ◎

カラーパレットは作る前に決めておく色のセット

カラーパレットは、1つの作品で使う色をあらかじめ決めてまとめたものです。バナー1枚でも、Webサイト1つでも考え方は同じです。

作りながら色を足していくと、色数が増えて、どこが大事か伝わらなくなります。
先に決めておけば、途中の判断は「決めた中のどれを使うか」だけです。選択肢が4つなら迷いようがありません。

パレットの目的は、きれいな色を集めることではありません。使う色を減らして、判断の回数を減らすことです。

そろえるのは4色でいい

10色も20色も要りません。役割の違う4色で足ります。
スターバックスの店内を思い出してください。緑・白・濃い茶色くらいしか出てきません。色数を絞るほど、そのお店らしさが伝わります。

役割	面積の目安	使う場所
ベースカラー	70%	背景。白や薄いグレー、淡い色
メインカラー	25%	見出し、帯、罫線。作品の性格を決める色
アクセントカラー	5%	ボタン、価格、締め切り。1か所だけ
文字色	面積の外	本文。黒に近い濃いグレー

文字色を面積の外に置いているのは、本文の色が配色というより読みやすさの部品だからです。真っ黒（#000000）は目が疲れるので、#333333前後の濃いグレーにします。
70対25対5の配分そのものは配色の基本で扱っています。

パレットを作る5ステップ

順番があります。1色目を決めてから広げるのが速いです。

4番のベースカラーの作り方が、いちばん使えるやり方です。別の色を持ってくるより、メインカラーを薄めたほうが失敗しません。グレーを使いたいときも、メインカラーを少し混ぜたグレーにすると全体がまとまります。

できたらHEXの6桁を4つメモに残します。色は名前ではなくコードで保存してください。「薄い青」ではもう一度作れません。読み方はカラーコードの仕組みにあります。

写真からパレットを作る

使う写真が先に決まっているなら、写真から色を取るのが早いです。写真とパレットの色がずれないので、置いた瞬間に馴染みます。

Canvaでも同じことができます。写真を配置して色の選択画面を開くと、「写真の色」として候補が並びます。Canvaで完結させる人はこちらが速いです💡

無料で使えるツール

どれも無料で使えます。目的で選んでください。

ツール	得意なこと	こんなときに
Adobe Color	カラーホイールで型から選ぶ／画像から抽出	1色目から広げたいとき
Coolors	キーを押すたびに5色を出し直す	候補をたくさん見たいとき
Canva	制作画面の中で色を決めて保存できる	Canvaで作るとき
Color Hunt	できあがったパレットを一覧で見る	ゼロから決めるのがつらいとき

ツールが出す色をそのまま使わないでください。どれも「見た目がきれいな組み合わせ」を出すだけで、作品の目的までは知りません。候補から選んで、明度と彩度を自分で調整する。この2手で自分の作品に合います。

守るルールは3つだけ

作ったパレットが使えるかどうかは、次の3つで決まります。

1. 色数は4色まで：増やしたくなったら、色を足すのではなく同じ色の明度違いを使います。#3e5c76 の薄い版・濃い版、という増やし方なら統一感が残ります
2. トーンをそろえる：1色だけビビッド、残りはくすんだ色、という状態にしません。彩度の段をそろえると、それだけでまとまります
3. 文字と背景の明度差を確保する：白黒表示にして本文が読めるか確かめます。読めなければ、色相ではなく明度を動かします

3番の白黒確認は必ずやってください。色のきれいさは明度差を隠します。白黒にすると、読みにくさだけが残って見えます。

ミニ実践：定番パレットを1つ作って保存する

次の制作で使うパレットを1つ作ります。所要時間は20分ほど、Adobe ColorとCanvaで足ります。

1. 自分がよく作るものを1つ決めます。「勉強の記録を載せるSNS投稿」など、実際に作る予定のあるものにします
2. その作品の性格を言葉で3つ書きます。書けないうちは色を選びません
3. Adobe Colorでメインカラーを1色決めます。言葉に近い色相を選んでください
4. 配色ルールから「類似色」を選んで、2色目を出します
5. メインカラーの彩度を下げて明度を上げ、ベースカラーを作ります
6. アクセントカラーを1色決めます。メインの反対側から、彩度高めで選びます
7. 文字色は #333333 前後の濃いグレーにします
8. 4色のHEXをメモアプリに保存します
9. そのパレットでCanvaの画像を1枚作り、白黒表示にして文字が読めるか確認します

Canvaの有料プランならブランドキットに登録しておくと、次回から選ぶだけになります。

できたら次のチェックリストで確認してください。

• 4色のHEXを6桁でメモに残せた
• それぞれの色に役割（ベース・メイン・アクセント・文字）を書いた
• 4色のトーンがそろっている（1色だけ浮いていない）
• 白黒表示にしても本文が読める
• アクセントカラーを使った場所が1か所だけ

やってしまいがちな失敗

きれいな色を集めて満足する

ツールで見つけたパレットを保存しただけで終わる失敗です。使うと、文字が読めなかったり写真と合わなかったりします。
直し方は、作ったその場で1枚作品を作ること。使って初めて直すところが見つかります。

作りながら色を足す

「ここだけ5色目」を1回許すと、最後は8色になります。
直し方は、足したくなったら同じ色の明度違いで代用すること。それでも足りないと感じたら、たいてい原因は色ではなく余白の不足です。

アクセントカラーを何か所にも使う

目立たせたい場所が3つあると、結局どれも目立ちません。
直し方は、使う場所を1か所に決めること。2番目に目立たせたいものは、色ではなく大きさで差をつけます。

よくある質問

カラーパレットの作り方は？

1色目を決めて、そこから広げます。
まず作品の性格を言葉で3つ書きます。次にその言葉に合うメインカラーを1色選びます。カラーホイールで2色目を出し、メインカラーの彩度を下げて明度を上げたものをベースカラーにします。最後に反対側から彩度高めのアクセントカラーを1色決めます。
色数は文字色を含めて4色まで。できたらHEXの6桁でメモに残してください。

カラーパレットを作成できるサイトは？

無料で使えるものを4つ挙げます。Adobe Colorはカラーホイールから配色の型を選べるので、1色目から広げたいときに向きます。Coolorsはキーを押すたびに5色を出し直すので、候補をたくさん見たいときに便利です。
Canvaは制作画面の中で色を決められます。Color Huntは完成済みのパレット一覧なので、ゼロから決めるのがつらいときに向きます。
どれを使っても、出てきた色をそのまま使わず、明度と彩度を自分で調整してください。

カラーパレットのルールは？

3つ守れば実務で使えます。1つ目、色数は4色まで。増やしたくなったら、同じ色の明度違いで代用します。2つ目、トーンをそろえること。1色だけ彩度が高いと、そこだけ浮きます。3つ目、文字と背景の明度差を確保すること。白黒表示にして本文が読めるか確かめます。
面積の配分は70対25対5が目安です。アクセントは1か所だけに絞ります。

カラーパレットを画像から生成するにはどうすればいいですか？

Adobe Colorの「画像から抽出」に写真をアップロードすると、自動で5色が出ます。ムードの選択肢を切り替えると、明るめ・落ち着きめなど傾向を変えられます。Canvaでも、写真を配置して色の選択画面を開けば「写真の色」として候補が並びます。
出た色はそのまま使わず、2つだけ手を入れてください。似た色が2つあれば片方を捨てること、背景に使う色は明度を上げることです。写真から取った色は濃すぎて、背景に敷くと文字が読めなくなります。

次に学ぶこと

このレッスンの要点です。

• そろえるのは4色。ベース70%・メイン25%・アクセント5%・文字色
• 1色目を決めてから広げる。ベースはメインの彩度を下げて作る
• 写真が先に決まっているなら、写真から色を取ると馴染む
• ツールが出した色はそのまま使わず、自分で調整する
• 保存はHEXの6桁で。名前で覚えるともう一度作れない

次は色を段階的につなぐ話です。グラデーションの使い方で、濁らせないつなぎ方と使いどころを扱います。パレットの2色をつなぐだけで表現が広がります。
色の組み合わせ方の型は補色と配色の型、作品全体のルールにまとめる段階ならトンマナへ進んでください。

ほかのレッスンはデザインの基本コース目次から選べます。