デザイン用にカラーパレットを生成する方法

色は Web サイト、アプリ、デザインで最初に目に入る要素のひとつです。よく選ばれたパレットは一貫したプロらしい外観を作り出します。選択を誤ると、内容が良くてもアマチュアっぽく見えます。

良い色を選ぶのにデザイナーである必要はありません。色彩理論には信頼できる公式があります。

色の調和モード

これらは色相環上の色の関係に基づいています:

補色(コンプリメンタリー) — 反対側にある 2 色(例:青とオレンジ)。コントラストが強く、エネルギッシュ。目立つ必要のあるコールトゥアクションに最適です。

類似色(アナロガス) — 色相環上で隣り合う 3 色(例:青、青緑、緑)。調和が取れて落ち着きます。背景や自然な見た目に最適です。

トライアド — 色相環上で等距離にある 3 色(例:赤、黄、青)。鮮やかでバランスが取れています。遊び心のある創造的なデザインに最適です。

スプリット補色 — 1 色と、その補色の両隣の色。補色に似たコントラストを持ちつつ、緊張感は控えめです。

モノクロマティック — 1 色の濃淡や色合いの違い。常に調和が取れますが、使いすぎると視覚的な面白みに欠けます。

パレットを生成する方法

1. 調和モードを選ぶ — ランダム、類似色、補色、トライアドなどから選んで、色の関係を決めます。
2. 気に入った色をロック — 残したい色が見つかったらロックして、パレット全体がうまくまとまるまで他をリジェネレートします。
3. エクスポート — HEX コード、CSS 変数、画像としてパレットを保存します。

使えるパレットを作る

パレットはきれいな色の集合以上のものです。実際のプロジェクトには以下が必要です:

• プライマリーカラー — ブランドカラーで、ボタン、リンク、主要な UI 要素に使用
• セカンダリーカラー — プライマリーをサポートし、目立たない対話的要素に使用
• ニュートラルカラー — テキスト、背景、境界線用のグレーや控えめな色合い(UI の大部分を占めます)
• アクセントカラー — ハイライト、通知、重要なステータスの表示に控えめに使用
• エラー / 成功の色 — エラーには赤、成功には緑(通常はパレットとは別に扱います)

ヒント

• 1 色から始める — 気に入ったプライマリーカラーを 1 つ選び、調和モードを使ってそれを引き立てる色を見つけます。5 色を独立に選ぼうとするより簡単です。
• 実際のコンテンツでテスト — スウォッチでうまく見えるパレットが、実際のテキスト、ボタン、背景に当てはめると機能しないことがあります。必ず実際の UI でテストしましょう。
• コントラストを確認 — 美しい色も、テキストが読めなければ意味がありません。テキストと背景の組み合わせをコントラストチェッカーに通し、WCAG(通常テキストで 4.5 : 1 比)を満たしてください。
• 少ないほど良い — 厳選された 3 色のデザインは 7 色のデザインよりプロらしく見えます。UI の大部分にニュートラルを使い、鮮やかな色は本当に必要なものに取っておきましょう。