Color de fondo en CSS: patrones prácticos y ejemplos

Usa background-color cuando un elemento necesite un relleno sólido. La propiedad abreviada background también puede definir un color, pero restablece las imágenes de fondo y otras propiedades relacionadas, así que la propiedad explícita es más segura para cambios pequeños.

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

Consulta la página del color beige para encontrar superficies cálidas alternativas y valores de tonos listos para usar.

Fondos transparentes

RGBA, la sintaxis RGB moderna separada por espacios y el Hex de ocho dígitos pueden llevar alfa:

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

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

La transparencia no produce un único color visible fijo: el navegador la combina con lo que haya detrás del elemento. Usa la calculadora de opacidad para comparar el resultado sobre blanco, negro y el fondo real de tu página. Si recibes un token Hex de un diseñador, el conversor de Hex a RGB mostrará su canal alfa.

En las superposiciones más habituales suele buscarse un valor de «opacidad de superposición negra» o «blanca». Empieza con un 8–16 % para bordes y velos sutiles y un 24–40 % para superposiciones sobre imágenes, y comprueba siempre después el contraste del texto ya compuesto.

Prefiere tokens de superficie por función

Define --surface-page, --surface-card y --surface-accent en lugar de nombrar las variables según el color literal. Así los temas siguen siendo flexibles y las relaciones de contraste son más fáciles de auditar.

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

Prueba siempre el texto, los bordes y los anillos de foco sobre la superficie final compuesta. Después continúa con los colores de enlaces y placeholders, donde los cambios de estado y el texto de menor énfasis requieren especial cuidado.