カラーパレット生成ツール

ベースカラーから補色・類似色・トライアド・単色のパレットを生成 — スウォッチをクリックするとHEXコードをコピーできます。

857回閲覧

ベースカラー

カラーパレットはどう作られる?

ベースカラーを選ぶと、ツールが色相環上の位置から配色パターンを導き出します。補色(反対側、+180°)、類似色(隣接、±30°)、トライアド(均等配置、±120°)、スプリット補色(±150°)、そして同じ色相の明暗違いによる単色スケールです。

スウォッチをクリックするとHEXコードがコピーされます。実用的な配分の目安: ベースカラーをデザインの約60%、類似色を30%、補色を10%のアクセントとして使います。

どの配色を選べばよいですか?

類似色配色は落ち着いてまとまった印象になります。補色配色はCTA(行動喚起)ボタンなどに最大限のコントラストを与えます。トライアドは鮮やかながらバランスが取れています。単色はインターフェースで最も無難な選択で、1つの色相に複数の明度段階を持たせます。

色をコピーするには?

スウォッチをクリックすると、HEXコードがクリップボードにコピーされ、確認表示が現れます。

生成されたパレットはアクセシブルですか?

配色の調和はコントラストを保証しません。色の上にテキストを乗せる場合は、公開前にコントラストチェッカーで少なくとも4.5:1のWCAGコントラスト比を確認してください。