Apuntes sobre Html2

Color

La propiedad color

En CSS, el color del texto se controla con la propiedad color. Es una de las propiedades más básicas y también una de las más heredables: si la defines en body, todos los elementos del documento la adoptan, a menos que la sobreescriban.

body {
    color: #333333;
}

h1 {
    color: #111111; /* Los títulos, algo más oscuros */
}

El nombre puede despistar: color no afecta al fondo ni a los bordes, solo al texto y a elementos de primer plano como iconos SVG. Para el fondo existe background-color, que veremos más adelante en esta misma lección.

Formatos de color

CSS permite expresar el mismo color de varias maneras. Cada formato tiene sus ventajas según el contexto.

Nombres de color

CSS define más de 140 nombres predefinidos: red, blue, coral, steelblue, papayawhip (sí, ese existe). Son cómodos para pruebas rápidas, pero en producción no se usan: el vocabulario es limitado, los nombres no son intuitivos para colores específicos, y resulta imposible ajustar la saturación o el brillo de un tomato sin cambiarlo por otro valor.

Hay dos excepciones con uso real: transparent (color totalmente transparente) y currentColor, que merece su propia sección.

Hexadecimal

El formato más habitual en la práctica. Expresa cada canal de color (rojo, verde, azul) como un par de dígitos hexadecimales, de 00 a FF:

p  { color: #3366cc; } /* azul */
h1 { color: #1a1a1a; } /* casi negro */

Cuando los dos dígitos de cada canal son iguales, puede abreviarse: #336699 es lo mismo que #369. La forma corta ahorra poco y reduce legibilidad, así que se usa poco.

CSS también admite #RRGGBBAA, donde el último par controla la transparencia. #3366ccff es opaco, #3366cc80 es aproximadamente el 50% de transparencia. Es compacto pero menos legible que rgba().

RGB y RGBA

Expresa el color como tres valores entre 0 y 255, uno por canal. El cuarto valor controla la transparencia, de 0 (invisible) a 1 (opaco):

p { color: rgb(51, 102, 204); }         /* igual que #3366cc */
p { color: rgba(51, 102, 204, 0.5); }   /* mismo azul, 50% transparente */

La notación moderna permite escribir rgb(51 102 204 / 0.5) sin comas y sin la A separada. Ambas formas funcionan en todos los navegadores actuales.

HSL y HSLA

HSL (Hue, Saturation, Lightness) describe el color de forma más intuitiva. En lugar de mezclar canales de luz, se define el tono (un ángulo en la rueda de color, de 0 a 360), la saturación (de 0% a 100%) y la luminosidad (de 0% a 100%):

p { color: hsl(220, 60%, 50%); }        /* azul medio */
p { color: hsl(220, 60%, 70%); }        /* el mismo azul, más claro */
p { color: hsl(220, 60%, 30%); }        /* el mismo azul, más oscuro */
p { color: hsl(220, 60%, 50% / 0.5); }  /* con 50% de transparencia */

La ventaja de HSL es que para crear variantes de un mismo color basta con ajustar la luminosidad o la saturación sin tocar el tono. Resulta especialmente útil cuando se trabaja con variables CSS para definir paletas.

OKLCH: el formato moderno

OKLCH es un sistema más reciente, diseñado para corregir uno de los problemas de HSL: colores con el mismo valor de luminosidad pueden percibirse visualmente con brillo muy diferente. OKLCH trabaja en un espacio de color perceptualmente uniforme, de modo que dos colores con la misma L se ven realmente igual de brillantes.

p { color: oklch(55% 0.18 264); }  /* azul */
p { color: oklch(75% 0.15 150); }  /* verde */

Los tres valores son: luminosidad (de 0% a 100%), croma (0 es gris neutro, valores altos son más saturados) y matiz (ángulo de 0 a 360). La transparencia se añade igual que en HSL: oklch(55% 0.18 264 / 0.5). El formato tiene soporte en todos los navegadores modernos desde 2023.

Nota: En este manual usaremos principalmente hex y HSL, por ser los más habituales en la práctica actual. OKLCH es el futuro, y merece conocerse, pero no hace falta adoptarlo desde el primer día.

Transparencia y opacidad

Hay dos formas de hacer que un elemento sea transparente, y no son equivalentes.

La primera es usar el canal alfa en el valor del color, con rgba(), hsla() u oklch(). Esto hace transparente solo ese color concreto, sin afectar al resto del elemento:

p {
    color: rgba(0, 0, 0, 0.7);                  /* texto con 70% de opacidad */
    background-color: rgba(255, 255, 255, 0.9); /* fondo semitransparente */
}

La segunda es la propiedad opacity, que afecta al elemento entero: texto, fondo, bordes, imágenes y todo lo que contenga, incluidos los elementos hijos:

div {
    opacity: 0.5; /* todo el div al 50%, incluido su contenido */
}

Si quieres un fondo semitransparente pero el texto bien opaco, usa el canal alfa en background-color, no opacity. opacity todo lo borra.

currentColor

currentColor es una palabra clave que representa el valor calculado de la propiedad color del elemento en ese momento. Puede usarse en cualquier propiedad que acepte un color:

a {
    color: #3366cc;
    border-bottom: 1px solid currentColor; /* el borde sigue al color del texto */
    text-decoration-color: currentColor;
}

a:hover {
    color: #cc3333; /* al cambiar color, el borde y el subrayado cambian solos */
}

Es especialmente útil para mantener coherencia visual sin repetir el valor del color en varias propiedades. Si cambias el color principal del enlace, el borde y el subrayado se actualizan solos.

Fondo: background-color

La propiedad background-color define el color de fondo de cualquier elemento. Acepta los mismos formatos que color, más transparent como valor explícito (que es también el valor por defecto).

body {
    background-color: #f5f5f5;
}

.alerta {
    color: #7a1a1a;
    background-color: #fdecea;
}

Una regla práctica que conviene convertir en hábito: siempre que definas background-color, define también color. Los navegadores tienen colores de texto por defecto, pero si el usuario tiene el modo oscuro activo o ha cambiado los colores del sistema, asumir el texto por defecto puede producir combinaciones ilegibles.

A diferencia de color, el fondo no se hereda. Si lo defines en body, los elementos hijos no lo adoptan: cada uno empieza con transparent hasta que le asignes uno explícitamente.

Fondo: imágenes y gradientes

Además de un color plano, el fondo de un elemento puede ser una imagen o un gradiente.

Imagen de fondo

header {
    background-color: #1a1a1a;                     /* fallback si la imagen no carga */
    background-image: url("/images/cabecera.jpg");
}

Incluir siempre un background-color como respaldo es buena práctica: si la imagen falla o el usuario ha desactivado las imágenes, el fondo de color evita que el elemento quede en blanco.

Gradientes

Los gradientes son imágenes generadas por el navegador. Se usan en background-image, no en background-color:

/* Gradiente lineal de izquierda a derecha */
div {
    background-image: linear-gradient(to right, #3366cc, #66ccff);
}

/* Con ángulo */
div {
    background-image: linear-gradient(135deg, #1a1a2e, #16213e);
}

/* Radial */
div {
    background-image: radial-gradient(circle, #ffffff, #cccccc);
}

Los gradientes admiten más de dos colores y permiten especificar puntos de parada concretos:

div {
    background-image: linear-gradient(to right, #e74c3c 0%, #f39c12 50%, #f1c40f 100%);
}

Ver ejemplo: gradientes

Propiedades de fondo

Cuando el fondo es una imagen, varias propiedades adicionales controlan cómo se muestra.

background-repeat controla si la imagen se repite para cubrir el elemento. Los valores más usados son no-repeat y repeat (valor por defecto, en ambas direcciones). También existen repeat-x, repeat-y, y valores modernos como space y round.

background-position indica dónde se coloca la imagen dentro del elemento. Acepta palabras clave (top, center, bottom, left, right) o valores en píxeles y porcentajes.

background-size controla el tamaño de la imagen. Los valores más útiles son cover (la imagen cubre todo el elemento, recortando si hace falta) y contain (la imagen queda completa dentro del elemento, aunque deje huecos).

background-attachment define si el fondo se desplaza con el scroll o queda fijo en la ventana. scroll es el comportamiento por defecto. fixed crea el efecto de paralaje en el que el fondo parece quedarse quieto mientras el contenido se mueve.

section.hero {
    background-image: url("fondo.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

La propiedad background abreviada

Las propiedades de fondo pueden combinarse en una sola declaración. El orden convencional es: color, imagen, repetición, adjunto, posición / tamaño:

body {
    background: #f5f5f5 url("fondo.jpg") no-repeat fixed center / cover;
}

La barra antes del tamaño (/ cover) es obligatoria en la forma abreviada para distinguirlo de la posición. Fuera de ella, background-size es una propiedad independiente y no lleva barra.

CSS también permite definir varios fondos separados por comas. El primero de la lista queda por encima, el último por debajo:

div {
    background:
        url("logo.png") no-repeat top right,
        linear-gradient(to bottom, #1a1a2e, #16213e);
}

Herencia del color

La propiedad color se hereda: si la defines en un elemento padre, los hijos la adoptan automáticamente. Es la razón por la que definir el color del texto en body es suficiente para establecer el color base de toda la página.

Las propiedades de fondo no se heredan. Cada elemento empieza con background: transparent y muestra el fondo del padre a través de su propia transparencia. El efecto visual puede parecer herencia, pero no lo es: el fondo del padre simplemente se ve a través del hijo.

Si necesitas que un elemento herede explícitamente el fondo de su padre, puedes forzarlo con background-color: inherit, aunque en la práctica esto raramente es necesario.

Accesibilidad y contraste

El color no es solo estética: tiene impacto directo en si el contenido es legible para todos los usuarios, incluidos quienes tienen algún tipo de deficiencia visual o daltonismo.

Las guías WCAG (Web Content Accessibility Guidelines) establecen ratios mínimos de contraste entre el color del texto y el fondo. El nivel AA, que es el estándar habitual, exige una relación de contraste de al menos 4.5:1 para texto normal y 3:1 para texto grande. El nivel AAA es más exigente: 7:1 y 4.5:1 respectivamente.

En la práctica, esto significa evitar combinaciones como texto gris claro sobre fondo blanco, o texto amarillo sobre fondo verde. Hay herramientas gratuitas para comprobar el contraste de cualquier par de colores antes de usarlos.

Nota: No uses el color como único medio de transmitir información. Si un error se indica solo en rojo, alguien con daltonismo rojo-verde no lo verá. Combina siempre el color con texto, iconos u otro indicador visual.

Material histórico: color en HTML

Antes de que CSS existiera, el color se controlaba desde atributos del propio HTML. Hoy estas técnicas son completamente obsoletas, pero siguen apareciendo en código heredado, así que conviene reconocerlas.

La etiqueta <font> permitía aplicar color al texto:

<!-- Obsoleto, no usar -->
<font color="red">Texto rojo</font>
<font color="#0066CC">Texto azul</font>

El atributo bgcolor en etiquetas como <body>, <table> o <td> definía el color de fondo:

<!-- Obsoleto, no usar -->
<body bgcolor="#FFFFFF">
<table bgcolor="#CCCCCC">
<td bgcolor="yellow">

Ambos enfoques mezclan presentación con contenido, exactamente lo que CSS vino a separar. La etiqueta <font> fue declarada obsoleta en HTML4 (1997) y eliminada en HTML5. Los navegadores modernos siguen renderizándola por compatibilidad retroactiva, pero ningún código nuevo debería usarla.

Tu proyecto

Elige una paleta de dos o tres colores para tu proyecto y aplícala en estilos.css. No hace falta que sea perfecta ahora: puedes cambiarla en cualquier momento. Un color oscuro para texto, uno de acento, y un fondo ligeramente fuera del blanco puro ya dan mucha personalidad:

body {
    background-color: #fafaf8;
    color: #222;
}

h1, h2 {
    color: #1a1a2e;
}

a {
    color: #c9a96e;
}

blockquote {
    border-left: 3px solid #c9a96e;
    padding-left: 1rem;
    color: #555;
    font-style: italic;
}

Comprueba el contraste del texto sobre el fondo con cualquier herramienta online antes de dar el color por definitivo. El objetivo mínimo es 4.5:1 para texto normal.

Recapitulación

• color controla el color del texto y se hereda. background-color controla el fondo y no se hereda.
• CSS admite varios formatos de color: nombres, hexadecimal, rgb(), hsl() y el moderno oklch().
• El canal alfa hace semitransparente solo el color en cuestión. opacity hace semitransparente el elemento entero, incluidos sus hijos.
• currentColor permite que bordes y otros valores de color sigan automáticamente al color del texto.
• El fondo puede ser un color plano, una imagen o un gradiente. Incluye siempre un background-color como respaldo cuando uses imágenes.
• background-repeat, background-position, background-size y background-attachment controlan cómo se muestra la imagen de fondo. La propiedad background las combina todas en una sola declaración.
• El contraste entre texto y fondo tiene impacto directo en accesibilidad. El nivel WCAG AA exige al menos 4.5:1 para texto normal.
• Los atributos bgcolor y la etiqueta <font color> son obsoletos. El color pertenece al CSS.

En la próxima lección: listas en HTML y CSS: listas de servicios, menús de navegación, y cómo personalizar los marcadores.