CSS の背景色：実践的なパターンと例

要素を単色で塗りたいときは background-color を使います。ショートハンドの background でも色は指定できますが、背景画像などの関連プロパティがリセットされるため、小さな変更には明示的なプロパティの方が安全です。

.card {
  background-color: #f5f5dc;
  color: #1f2937;
}

温かみのある面の候補や濃淡の値は、ベージュのカラーページで確認できます。

半透明の背景

RGBA、スペース区切りのモダンな RGB 構文、8 桁 HEX はいずれもアルファを持てます。

.overlay {
  background-color: rgb(0 128 128 / 72%);
}

.overlay-hex {
  background-color: #008080b8;
}

透明度はひとつの決まった色を生むわけではありません。ブラウザは要素の後ろにあるものと色を合成します。透明度計算ツールを使えば、白、黒、実際のページ背景の上での結果を比較できます。デザイナーから HEX のトークンを受け取った場合は、HEX から RGB への変換ツールでアルファチャンネルを確認できます。

よくあるオーバーレイでは「黒のオーバーレイの不透明度」や「白のオーバーレイの不透明度」が必要になります。控えめなボーダーやスクリムには 8〜16%、画像のオーバーレイには 24〜40% から始め、合成後の文字のコントラストを必ず確認しましょう。

役割ベースの面のトークンを使う

色そのものの名前ではなく、--surface-page、--surface-card、--surface-accent のように役割で変数を定義します。テーマを柔軟に保て、コントラストの関係も監査しやすくなります。

:root {
  --surface-page: #ffffff;
  --surface-card: #f8fafc;
  --surface-accent: #008080;
}

文字、ボーダー、フォーカスリングは、必ず最終的に合成された面の上でテストしましょう。続いて、状態の変化や控えめな文字に特に注意が必要なリンクとプレースホルダーの色に進みます。