ページを作るとき、意外と手が止まるのが色選び。「なんか合わない…」とやり直しがちですが、これはセンスの問題ではなく道具で解決できるところです。プロも、色は道具で決めています。世の中には配色サイトが山ほどあるので、ここではやりたいこと別に、画面つきでまとめて紹介します。全部試さなくて大丈夫。ピンときたものをブックマークしておきましょう。
べんりワザカラーコード一覧と色見本帳カラーコードの読み方と、そのまま使える色見本帳はこちらタイプ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% | ボタンやリンク |
色数をしぼると、それだけで“ちゃんとした見た目”に近づきます。
アクセシビリティ読める色、読めない色（コントラスト）どのくらい差をつければ読みやすいのか、その基準はこちらべんりワザWebデザインの参考サイト選んだ色を実際のページでどう使うか、レイアウトの実例はこちらまとめ
- 配色サイトはやりたいこと別に選ぶ——選ぶ / 眺める / 組み立てる / 確かめる / グラデーション
- 迷ったらColor Huntで選ぶか、NIPPON COLORSを眺めるところから
- 「3色ルール」で色数をしぼると、まとまった見た目になる
道具がそろえば、あとは作りながら覚えるだけ。