補色、トライアド、類似色を自動提案
色をひとつ決めるのは簡単ですが、互いに調和する数色を選ぶのは難しく、デザインがまとまらない原因にもなりがちです。このツールは、すでに決まっている1色を起点に、それと関係を持つ色を導き出します。デザイナーが色相環を使って行う考え方と同じですが、計算は自動なので手間がかかりません。
処理はすべてブラウザ内で完結します。インストールも会員登録も不要です。
補色は色相環の反対側にある色の組み合わせです（青とオレンジ、赤と緑など）。コントラストが強いため、ページの中で目立たせたいボタンなどに向いています。ただし両方を大きな面積で使うと互いに主張し合って落ち着かない印象になるので、片方を主役にして、もう片方はアクセントに絞るのが基本です。
類似色は色相環で隣り合う色の組み合わせです（青・青緑・緑など）。同じ系統でまとまるため穏やかで統一感があり、背景やグラデーション、主張を抑えたいデザインに向いています。ただしコントラストが弱いので、明度に差をつけないと平板に見えがちです。トライアドは色相環を3等分した配置で、その中間にあたります。補色ほど緊張感がなく、類似色より変化があるため、鮮やかさとバランスを両立させたいときの選択肢になります。どの配色を選んだ場合も、文字と背景の組み合わせはコントラストチェッカーで確認してください。きれいな配色でも、読みにくいことはあります。
全体の雰囲気は類似色でまとめ、ボタンやリンクだけ補色をアクセントに使う組み方がよく用いられます。落ち着いたページのまま、押してほしい要素だけがきちんと目立ちます。
思っているより少なめで足ります。主役の色1つ、アクセント1つ、それに無彩色をいくつか。色を足すほど、豊かになるというより雑然として見えることが多いです。
先にコントラストを確認してください。配色は色相どうしの関係から作られるもので、その組み合わせが文字として読みやすいかどうかまでは考慮されていません。