ウェブサイト向けカラーパレット

実際のレイアウトに耐える12組です。背景、面、本文、アクセントを賄えるだけの幅があり、同じ役割を二色で奪い合うこともありません。

サイトでの使い方

  • 色より先に役割を決めます。背景、面、境界線、本文、アクセントの五つです。五つを満たせないパレットは、捨てるのではなく中間色を足してください。
  • 最も明るい色は広い面に、最も暗い色は文字に。中間の色は境界線やホバー状態、補助的な文字に向きます。
  • アクセントはクリックできるものだけに使います。すべてを目立たせると、何も目立ちません。

各パレットの下に示した文字色は、最初の色に対してほぼ黒と白のうちコントラストが高いほうです。ほかの組み合わせを本文に使う前には必ず確認してください。

関連するタグ