UIデザインのためのニュートラルグレーパレット

ニュートラルグレーパレットの設計

すべてのデザインシステムには堅牢なグレースケールが必要です。ニュートラルカラーは背景、サーフェス、ボーダー、区切り線、プレースホルダーテキスト、無効状態を処理します。スケールを正しく設定することが重要です — ステップが少なすぎるとニュアンスが不足し、多すぎるとシステムが扱いにくくなります。

アンダートーンの選択

純粋なグレー（彩度0%）はフラットで生気がなく見えることがあります。わずかなウォームまたはクールなアンダートーンを加えると視覚的な一貫性が向上します：

:root {
  /* ブルーアンダートーンのクールグレー (S=7%) */
  --gray-50:  hsl(220, 7%, 97%);
  --gray-100: hsl(220, 7%, 94%);
  --gray-200: hsl(220, 7%, 86%);
  --gray-300: hsl(220, 7%, 77%);
  --gray-400: hsl(220, 7%, 56%);
  --gray-500: hsl(220, 7%, 46%);
  --gray-600: hsl(220, 7%, 36%);
  --gray-700: hsl(220, 7%, 27%);
  --gray-800: hsl(220, 7%, 18%);
  --gray-900: hsl(220, 7%, 11%);
  --gray-950: hsl(220, 7%, 6%);
}

ライト vs ダーク ロール割り当て

ロール	ライトテーマ	ダークテーマ
ページ背景	gray-50	gray-950
カードサーフェス	white	gray-900
ミューテッドテキスト	gray-500	gray-400
ボーダー	gray-200	gray-800
無効状態	gray-300	gray-700

なぜ純粋な黒/白を使わないのか？

純粋な#000000を#ffffff上に置くとコントラスト比21:1になります — 技術的には完璧ですが光学的には過酷です。約5〜8%明度のダークテーマ背景と約10〜15%明度のライトテーマテキストは、WCAG AAの要件を楽に超えながらより快適に感じます。

ブランドカラーとのペアリング

視覚的な調和のために、グレーの色相をプライマリブランドの色相に近づけてください。ブランドがブルーの場合、クールグレー（色相〜220）が補完します。ウォームブランド（オレンジ、レッド）には、ウォームグレー（色相〜30）を試してください。