グレージュのカラーコード完全解説！即役立つHexと失敗しない配色術

グレージュのカラーコード完全解説！即役立つHexと失敗しない配色術の全貌を分かりやすくまとめてご紹介します。

WEB制作における実装面では、CSSカスタムプロパティ（変数）を用いたカラー設計が保守性と統一感を高める鍵となります。フロントエンドで即戦力となるグレージュ CSS指定の記述例を確認しておきましょう。

用途CSS記述サンプルCSS変数定義 :root {
  --color-greige-light: #E4DFDA;
  --color-greige-base: #C5BAAF;
  --color-greige-dark: #6C645C;
  --color-text-main: #2B2927;
} 背景＆テキスト指定 .card-component {
  background-color: var(--color-greige-light);
  color: var(--color-text-main);
  border: 1px solid var(--color-greige-base);
}

WEBデザインでグレージュを背景にする際、特に気を配りたいのがWCAG（Web Content Accessibility Guidelines）が定めるコントラスト比です。背景をライトグレージュ（#E4DFDA）にした場合、本文テキストには純黒（#000000）ではなく、ダークチャコール（#2B2927）やディープグレージュ（#383431）を選ぶと、十分な視認性（コントラスト比4.5:1以上）を確保しながら、目にも優しい洗練されたルックに仕上がります。