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

ハーモニースキーム

• 補足: カラーホイールのベース + 反対側 (180°)。ハイコントラスト、鮮やか。ブランドカラーに対する行動喚起ボタンに適しています。
• 類似: 互いに 30° 以内にある 3 ～ 5 つの色相。穏やかで調和が取れており、通常は温かい、またはクールな家族です。家族をテーマにした背景やイラストに適しています。
• Triadic: 3 つの色相が等間隔 (120°) に配置されます。活気に満ちていてバランスが取れています。子供向け製品や大胆なブランドによく見られます。
• 分割補色: ベース + 補色に隣接する 2 つの色相 (150° および 210°)。補完的なものよりも豊かで、緊張感はそれほどありません。
• 四次/正方形: 90°で 4 つの色相。バランスを取るのが難しい - どちらかを優先的に選択します。
• 単色: 単一の色相、さまざまな彩度と明度。エレガントでまとまりのあるデザイン。ニュートラルと組み合わせないとアクセントが不足します。

実際の作業のためのパレット構造

設計システムには通常、次のものが必要です。

• プライマリ (基本ブランド)
• 二次 (サポートブランド)
• アクセント (CTA、ハイライト)
• ニュートラル スケール (背景、テキスト、境界線 - 5 ～ 10 グレー)
• セマンティック (成功、警告、エラー、情報)
• 表面 (パネルの背景、オーバーレイ)

ハーモニー パレットは、プライマリ + セカンダリ + アクセントを提供します。ニュートラルとセマンティクスは通常、別個の規約 (彩度の低いグレーに近い色、標準化されたセマンティクスの色相) に基づいています。

エクスポート形式

CSS カスタム プロパティ:

:root {
  --brand-primary: #2E86AB;
  --brand-secondary: #A23B72;
  --brand-accent: #F18F01;
  --brand-neutral: #C73E1D;
}

Tailwind 構成:

theme: {
  extend: {
    colors: {
      brand: {
        primary: '#2E86AB',
        secondary: '#A23B72',
        accent: '#F18F01',
      }
    }
  }
}

SCSS:

$brand-primary: #2E86AB;
$brand-secondary: #A23B72;

コントラストとアクセシビリティ

調和スキームはアクセシビリティを保証しません。 WCAG コントラスト要件に対してパレットのペアを確認します。

• 背景に対する本文テキスト: 最小 4.5:1 (AA)。
• 大きいテキスト: 3:1。
• 非テキスト (ボタン、アイコン、フォーカス リング): 3:1。

ジェネレーターとコントラスト チェッカーを組み合わせて、準拠したコンボを見つけます。

ヒント

• ランダムではなく、定義されたベースカラーから始めます - ベースに意味がある場合 (ブランド、好きな写真、文化的参照など)、ハーモニーには目的があるように感じます。
• 実際の使用でパレットをテストします: ボタン上、テキストに対して、グラフ内で。スウォッチで見栄えが良くても、UI での動作が保証されるわけではありません。
• 大きな表面用のパレットの場合は彩度をわずかに下げます。完全に飽和した背景は疲れます。
• アクセントを稀に保つ: UI の 80% がプライマリおよびセカンダリである場合、最大限の魅力を得るためにタッチポイント (CTA) の 10% にアクセント カラーを使用します。