カラーシステムの設計

効果的なカラーシステムは、ブランドの一貫性とアクセシビリティを両立させます。

ベースカラーの定義

:root {
  /* プライマリカラー */
  --color-blue-50: #eff6ff;
  --color-blue-100: #dbeafe;
  --color-blue-500: #3b82f6;
  --color-blue-900: #1e3a8a;

  /* セマンティックカラー */
  --c--text: var(--color-blue-900);
  --c--base: var(--color-blue-50);
}

ダークモード対応

@media (prefers-color-scheme: dark) {
  :root {
    --c--text: var(--color-blue-50);
    --c--base: var(--color-blue-900);
  }
}

カラーパレットは、明度のステップを意識して設計しましょう。