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

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

  • Astro

    #1e1e76 の上で読める文字色:#FFFFFF

  • Moon

    #e7e2f3 の上で読める文字色:#111827

  • Luna Of Gale

    #d6e4f5 の上で読める文字色:#111827

  • Ithriel

    #d1c7e1 の上で読める文字色:#111827

  • Moon Stone

    #a6c5d9 の上で読める文字色:#111827

  • Astro Novalite ♡

    #1e1f2a の上で読める文字色:#FFFFFF

  • What Have You Done?

    #e63746 の上で読める文字色:#111827

  • 男性向け Manly

    #1e3b71 の上で読める文字色:#FFFFFF

  • Astro

    #1a1f3d の上で読める文字色:#FFFFFF

  • Deep Winter

    #3a498d の上で読める文字色:#FFFFFF

  • Powder Ash

    #bbc9c1 の上で読める文字色:#111827

  • Diamond

    #badae9 の上で読める文字色:#111827

サイトでの使い方

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

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

関連するタグ