グレージュのカラーコード完全版！プロが選ぶHex・Rgb一覧と配色比率

グレージュのカラーコード完全版！プロが選ぶHex・Rgb一覧と配色比率の特集記事をご紹介します。最新トレンドが詰まっています。

Webデザインの現場において、真っ白（#FFFFFF）の背景はコントラストが強すぎて目が疲れやすい場合があります。そこで背景色にグレージュを取り入れるケースが急増していますが、濃すぎるグレージュを背景に敷くと文字の視認性が落ち、Webアクセシビリティの基準を満たせなくなるリスクがあります。

Webページの背景色としてCSSに指定する際は、わずかに色味を感じる超高明度のグレージュを選ぶのが鉄則です。

/* サイト全体の洗練された背景色用CSS / body { background-color: #F8F7F4; / 極めて柔らかいペールグレージュ / color: #333230; / 純黒ではなく温かみのあるチャコール / } / カードやセクションの背景アクセント / .card-greige { background-color: #ECE8E1; border: 1px solid #D8D2C9; } / ボタンやホバー時のマイクロインタラクション */ .btn-greige { background-color: #C5BAAF; color: #FFFFFF; }

グレージュ背景色をCSSで適用する場合、テキストカラーには#111111のような真っ黒を避けるのもポイントです。わずかに黄みや赤みを含んだダークグレー（例：#2E2C2A）を組み合わせることで、画面全体のトーン＆マナーが劇的に整い、プロフェッショナルな空気感が生まれます。