カラーパレット ジェネレーター

使い方

1. ブランドまたはアンカーの 16 進数をベースフィールドに貼り付ける（またはカラーピッカーを使用する）。
2. ユースケースに合うハーモニーを選ぶ — 落ち着いた背景にはアナロガス、鮮やかなコントラストにはトライアド。
3. 個別の 16 進コードまたは全体のカンマ区切りリストをコピーする。

よくある質問

チャートパレットにはどのハーモニーが安全？

トライアドまたはスプリット補色 — 3 つほどの十分に間隔の開いた色相で、ほとんどの視聴者にとって区別可能なまま。アクセントペアを超えるものには純粋な補色（2 色のみ）を避ける。

なぜモノクロマティックは 5 色を提供する？

モノクロマティックは色相回転ではなく明度スケール。5 ステップ（−30%、−15%、ベース、+15%、+30%）が一般的な妥協 — ベースカラーを失わずに十分な変動。

色相は狙いどおりなのに、並べると平板に見えます。どうすれば?

配色は色相を回すだけで彩度と明度を保つので、どの見本も同じ重さになり、目を引く場所がありません。パレットには色相の違いだけでなく明度の対比も要ります。ひとつを暗く、ひとつを明るくし、基準色を強調に残してください。そうして初めて、図形専用だった配色が文字と背景にも使えるものになります。

この色はアクセシビリティのコントラスト基準を満たしますか?

仕組みとして保証はされません。色相の関係はコントラストについて何も語らないからです。コントラストは相対輝度を比べます。したがって調和した二色が明るさではほとんど同じで、文字と背景として重ねると基準を満たさないことがあります。配色は出発点と考え、重ねて使う組み合わせはコントラストの判定にかけてください。

このテーマのガイド

• 色のコントラストとアクセシブルなパレット WCAG のコントラスト比が実際に測っているもの、問題なく見える色がなぜ不合格になるのか、色覚特性が何を変えるのか、そして破綻しないパレットの作り方。

関連ツール