テーマカラーから自動生成する配色理論ベースの配色ツール
ウェブ配色ツールは、テーマカラーを1色決めるだけで、サイト全体に使える配色一式を自動生成するツールです。補色・類似色・トライアドなど、色彩理論に基づいた8種類のパターンから選べます。
配色で失敗しやすいのは、色を感覚で足していった結果まとまりがなくなるパターンです。基準となる色を1つ決め、そこから決まった規則で他の色を導くと、自然に統一感のある組み合わせになります。補色は色相環の反対側、類似色は隣接する色、トライアドは色相環を3等分した位置の色を使う考え方です。
生成した配色は、ヘッダー・本文・ボタンといったサイト部品に自動で割り当てられ、プレビューで実際の見え方を確認できます。コントラスト比の判定と色覚シミュレーションも備えているため、見た目の好みだけでなく読みやすさの面からも検証できます。
主要な色は3色程度に絞るのが基本です。よく使われる目安が60-30-10の法則で、背景などのベースカラーに60%、主要な要素のメインカラーに30%、ボタンやリンクなどのアクセントカラーに10%の面積を割り当てる考え方です。アクセントカラーを絞ることで、押してほしい場所が自然に目立ちます。
色の見え方には個人差があり、日本人男性の約5%は赤と緑の区別がつきにくい特性を持つとされています。赤と緑だけで状態を示すと、この方々には区別できません。シミュレーションで確認し、色以外にアイコンや文言でも情報を伝えるようにしてください。
生成したパレットはCSS変数として出力されるため、prefers-color-scheme のメディアクエリで変数の値を差し替えることでダークモードに対応できます。単純に明度を反転させるのではなく、暗い背景では彩度をやや下げたほうが目に優しくなります。
避けたほうが無難です。純黒の背景に純白の文字はコントラストが強すぎて目が疲れやすく、有機ELディスプレイでは残像が見えることもあります。#121212 前後の暗い灰色にすると読みやすくなります。
類似色（アナロガス）は落ち着いた統一感が出るためコーポレートサイトに向きます。補色は強いコントラストが生まれるため、行動を促すボタンを目立たせたい場面で効果的です。トライアドは3色が均等に主張するので、扱いを誤ると散らかって見えます。1色を主役にして残り2色は面積を抑える、という前提で使ってください。