カラーパレット作成

デザインで色を調和させるコツ

色彩理論は、互いに引き立て合う色同士の関係を体系化したものです。この関係は色相環における位置関係にもとづいており、デザイナーやアーティストはもちろん、プロらしく美しい配色を作りたいすべての人にとって基本となる考え方です。

まとまりのある配色を作る第一歩は、配色の型を理解することです。型ごとに与える印象は異なり、ブランディング、Webデザイン、イラストなど、用途に応じた使い分けができます。

配色の主なタイプ

補色は、色相環で正反対にある2色を組み合わせます。青とオレンジ、赤と緑などです。コントラストが強く目を引くため、CTAや強調したい要素に最適です。

類似色は、青・青緑・緑のように色相環で隣り合う色をまとめます。やわらかく安定した、読みやすい配色になるため、アプリのUIやコーポレートサイトなど、落ち着きと信頼感を伝えたい場面で多用されます。

トライアドは、色相環を3等分して色を取ります。赤・黄・青のように鮮やかで表情豊かな配色になり、色数が多くても互いの均衡が保たれるため、使い方次第でまとまりが崩れません。

このほかにも、スプリットコンプリメンタリー（補色の両隣を使い、対比をやわらげた配色）や、スクエア・レクタングル（色相環に4色を対称に配置する配色）などがあり、複雑な構成に向いています。

60-30-10の法則

配色をバランスよく画面に落とし込むには、60-30-10の法則が役立ちます。メインカラーを全体の60%（背景や広い面）に、サブカラーを30%（セクションやコンポーネント）に、アクセントカラーを10%（ボタン、アイコン、細部）に使います。この比率を守ると画面がうるさくならず、見せたい要素へ自然に視線が誘導されます。

本ツールを使えば、組み合わせをその場で試しながら補色・類似色・トライアドの配色を確認し、HEXコードをそのままプロジェクトに書き出せます。

よくある質問