ページを作るとき、意外と手が止まるのが色選び。「なんか合わない…」とやり直しがちですが、これはセンスの問題ではなく道具で解決できるところです。プロも、色は道具で決めています。世の中には配色サイトが山ほどあるので、ここではやりたいこと別に、画面つきでまとめて紹介します。全部試さなくて大丈夫。ピンときたものをブックマークしておきましょう。
タイプ1：できあいから選ぶ（シンプルなパレット）
「一から作るのは大変。良さそうなのをパッと選びたい」——そんな人にいちばんおすすめ。プロが作った色の組み合わせが、ずらっと並んでいます。眺めて、気に入ったものをクリックしてコピーするだけ。
Color Hunt
カテゴリで絞って選べる、いちばん人気の定番。ひらく
ColorDrop
4色パレットを検索や絞りこみで探せる。ひらく
SchemeColor
名前つきの配色が大量。テーマから探せる。ひらく
LOLcolors
かわいい色味のパレットがずらり。ひらく
タイプ2：アイデアゼロで眺められる
「どんな色がいいか、まったく思いつかない」ときは、ただ眺めるだけで刺激をくれるサイトが助かります。
NIPPON COLORS
日本の伝統色。選ぶとページ全体がその色に染まる。ひらく
HELLO COLOR
クリックするたび、見やすい2色の組み合わせが出る。ひらく
random material palette
きれいな色をランダムに提案してくれる。ひらく
Colordot
マウスを動かすだけで色が決まる直感ツール。ひらく
タイプ3：主役の色から組み立てる
「使いたい色は1つ決まってる。それに合う色を出してほしい」ときはこれ。主役を決めると、まわりの色を提案してくれます。
Coolors
スペースキーで5色を次々に生成。定番中の定番。ひらく
ColorSpace
1色を入れると、合うパレットやグラデーションを作ってくれる。ひらく
Colormind
AIが“人間っぽい”自然な配色を提案。色を固定して調整できる。ひらく
khroma
好きな色をいくつか選ぶと、AIが好みを学んで提案してくれる。ひらく
Pigment
色のペアをたくさん見せてくれる。ひらく
Huemint
サイトやロゴ向けに、用途に合わせた配色をAIが生成。ひらく
タイプ4：実際の見た目でシミュレーション
色は単体で良くても「ページに置いたらイマイチ」なことがあります。本物のデザインに当てはめて確かめられるのがこのタイプ。
Happy Hues
実際のページに配色を当てて、使いどころまで見せてくれる。ひらく
palettemaker
作った配色を、実際のUIやアートに当てて見比べられる。ひらく
Colorable
背景と文字の色が読みやすいかを判定してくれる。ひらく
タイプ5：グラデーションを見つける
1色ずつだけでなく、色から色へなめらかに変わるグラデーションも、背景やボタンをぐっとおしゃれにしてくれます。
Grabient
きれいなグラデーションを選んで、CSSをコピーできる。ひらく
background に貼れるCSSがすぐ手に入ります。タイプ3の ColorSpace もグラデーションを作れます。色を吸い取る（スポイト）
「あのサイトのこの色、いいな」と思ったら、色を吸い取ることもできます。
- VSCode … CSSで色を書くところにマウスを重ねると小さな色の四角が出て、クリックでカラーピッカーが開きます。
- ブラウザの拡張 … Chromeの ColorZilla などで、画面のどこでもスポイトで色を吸えます。
迷ったら“3色ルール”
たくさん色を使うほど、まとまりは難しくなります。慣れるまでは、この配分がおすすめです。
| 役わり | 割合の目安 | 例 |
|---|---|---|
| ベース（背景など広い所） | 70% | 白・うすいグレー |
| メイン（主役の色） | 25% | 好きな1色 |
| アクセント（目立たせたい所） | 5% | ボタンやリンク |
色数をしぼると、それだけで“ちゃんとした見た目”に近づきます。
まとめ
- 配色サイトはやりたいこと別に選ぶ——選ぶ / 眺める / 組み立てる / 確かめる / グラデーション
- 迷ったらColor Huntで選ぶか、NIPPON COLORSを眺めるところから
- 「3色ルール」で色数をしぼると、まとまった見た目になる
道具がそろえば、あとは作りながら覚えるだけ。