Formatos de color: HEX, RGB y HSL

HEX y RGB

RGB expresa las componentes roja, verde y azul. En la notación con números, cada componente suele ir de 0 a 255. HEX escribe esos valores en hexadecimal: ff equivale a 255 y 00 a cero. #ff0000 y rgb(255 0 0) representan rojo.

La forma corta #f00 equivale a #ff0000 porque cada dígito se duplica. No cualquier color de seis dígitos tiene una forma corta equivalente.

HSL

HSL describe tono, saturación y luminosidad. El tono es un ángulo en la rueda de color; saturación y luminosidad se expresan como porcentajes. hsl(0 100% 50%) representa rojo. Reducir la saturación lo acerca a un gris; cambiar la luminosidad lo acerca al negro o al blanco.

Tres notaciones del mismo color

Las tres declaraciones siguientes representan el mismo rojo. En una misma regla, la última declaración válida para esa propiedad será la que se aplique. No necesitas incluir las tres en tu estilo final.

.aviso {
  color: #ff0000;
  color: rgb(255 0 0);
  color: hsl(0 100% 50%);
}

Canal alfa y transparencia

El canal alfa indica opacidad. En rgb(255 0 0 / 50%), el rojo es semitransparente y su apariencia depende del fondo. HEX también admite alfa: #ff000080 representa aproximadamente esa opacidad.

Contraste para texto legible

WCAG 2.2 establece en el criterio 1.4.3 un contraste mínimo de 4.5:1 para texto normal y 3:1 para texto grande, con las excepciones que define el criterio. La luminosidad de HSL no es la medida de luminancia relativa utilizada para ese cálculo. Comprueba cada combinación de texto y fondo, también en tema oscuro.

Práctica

1. Cambia el rojo por azul en las tres notaciones y comprueba que coincidan.
2. Pon el color con alfa sobre un fondo claro y otro oscuro para observar la diferencia.
3. Verifica el contraste de un texto real; no lo deduzcas únicamente por su aspecto.