ブランドカラー パレットには何を含める？

ブランドパレットでは、それぞれの色に役割を持たせます。プライマリカラーは、ロゴや主要なボタンに使われ、人々の印象に残る色です。セカンダリカラーはプライマリカラーを引き立て、アクセントカラーは行動喚起を目立たせます。背景色とテキストカラーは、ページ全体にまとまりを持たせます。

色の好みと同じくらい、コントラストも重要です。Webコンテンツアクセシビリティガイドライン（WCAG）では、通常のテキストと背景のコントラスト比を少なくとも4.5:1、より厳格なAAAレベルでは7:1にすることが求められています。

ツールの説明

「ブランドについて」に、ブランドの内容、対象となる人々、与えたい印象を入力します。「ブランドの個性」（プロフェッショナル、遊び心のある、ラグジュアリー、ミニマル、大胆、ナチュラル）を選ぶか、「説明から判断する」のままにすると、AIが入力したテキストから個性を判断します。

名前付きのカラーが5色生成されます。プライマリ、セカンダリ、アクセント、背景、テキストです。「出力形式」を切り替えると、各カラーの値をHEX、RGB、HSL、CMYKなどの形式で表示できます。また、それぞれのカラーにコピー ボタンがあります。「使用ガイド」には各カラーの使い方が示され、「CSS変数」にはスタイルシートに貼り付けられるコードが表示されます。AIには、テキストと背景のコントラスト比を7:1以上にし、プライマリカラーとアクセントカラーのコントラスト比を3:1以上にするよう指示されています。

例

「ポートランドの地域密着型コーヒー焙煎店。温かく、親しみやすく、サステナブル」という説明では、ローストブラウンのプライマリカラー、クリーム色の背景、テラコッタのアクセントカラーが生成されるかもしれません。CSS変数は次のようになります。

:root {
  --brand-primary: #5b3a29;
  --brand-secondary: #a47551;
  --brand-accent: #d9643a;
  --brand-background: #faf6f0;
  --brand-text: #2b211c;
}

特長

  • 役割が明確で、名前と使い方の説明が付いた5色
  • 6種類の個性、または説明から選ばれる個性
  • 必要な形式でカラーをコピーしたり、セット全体をCSS変数としてコピーしたりできます

制限事項

このツールではコントラスト比を測定しません。公開する前に、テキストと背景の組み合わせをコントラストチェッカーで確認してください。