配色パレット生成(補色・類似色・トリアード)
基準になる色から、補色・類似色・トリアード(3色配色)・分裂補色を自動で作ります。Webデザインや資料づくりの配色づくりに。
配色パレット生成について
配色に迷ったとき、基準の色を決めれば、色相環にもとづいて、調和の取れた色の組み合わせを作れます。補色(正反対の色)・類似色(隣り合う色)・トリアード(3色)・分裂補色の、4つの配色パターンを自動で作ります。
補色は、強いコントラストでアクセントになり、類似色は、まとまりのある落ち着いた印象になります。作った配色は、HEXコードで表示されるので、CSSやデザインツールにそのまま使えます。彩度と明度は、基準の色と同じにしています。
こんなときに使えます
- Webサイトやスライドの、メインカラーに合うサブカラーを探す
- ロゴやバナーの、配色の候補を作る
- 色の組み合わせの考え方を学ぶ
使うときのポイント
- 配色は、メイン70%・サブ25%・アクセント5%の比率が目安
- 色が多すぎると、まとまりがなくなる
使い方
- 基準にしたい色をHEXで入力します。
- 補色・類似色・トリアードなどの配色が、色見本つきで表示されます。
計算方法・仕組み
色相環(0〜360度)上で、補色は180度反対、類似色は±30度、トリアードは120度ずつ離れた位置、分裂補色は補色の両隣(±30度)にある色です。彩度と明度は基準の色と同じにしています。
知っておきたい基礎知識
配色は、色相環の上の位置関係で、考えると、まとまりやすくなります。補色は、色相環で、反対側にある色で、お互いを引き立てますが、強い印象を与えます。類似色は、隣り合う色で、穏やかで、統一感のある印象に、トリアードは、3色を等間隔に選んで、にぎやかで、バランスの取れた配色になります。
デザインの配色では、「ベースカラー(約70%)」「メインカラー(約25%)」「アクセントカラー(約5%)」の比率が、よく使われる目安です。アクセントカラーを少量だけ使うと、注目させたい部分が、際立ちます。色の組み合わせを選ぶときは、文字と背景の、コントラスト比も、確認してください。
間違えやすいポイント
- 彩度の高い補色どうしを隣に並べると、目がちかちかする
- 色だけで、情報を区別すると、色覚が異なる人に、伝わりにくい場合がある
- 画面で見る色と、印刷した色は、異なる
よくある質問
- 配色を3色にするには?
- ベースカラー・メインカラー・アクセントカラーの3色を基本にすると、まとまりやすくなります。このツールの、トリアードや、類似色を参考にしてください。
- 色の、おすすめの比率は?
- ベースカラー70%、メインカラー25%、アクセントカラー5%が、よく使われる目安です。