Selector de Color

Los formatos y cuándo conviene cada uno

Hex y rgb() son lo mismo escrito de otra forma: tres valores de canal tal como los activará la pantalla. Son exactos y se entienden en todas partes, y no dicen nada sobre cómo se verá un color junto a otro.

hsl() reorganiza la misma información en tono, saturación y luminosidad, lo que resulta más fácil de razonar - gira el tono y deja el resto - y por eso se convirtió en la forma habitual de construir paletas en CSS. hsv() es su hermano, el que usan los selectores de color de la mayoría de programas gráficos.

oklch() es el que merece la pena aprender si aún no lo conoces. cmyk() se incluye como referencia y debe tratarse como aproximado, porque una conversión real depende de la tinta, el papel y el perfil de salida; el valor que se muestra es la fórmula aritmética estándar, útil para hacerse una idea, no para enviarlo a imprenta.

Por qué OKLCH es distinto

La luminosidad de HSL es una media geométrica de los canales, no una medida de lo claro que parece un color. El amarillo puro y el azul puro están ambos al 50 % de luminosidad en HSL, y a la vista uno es casi blanco y el otro casi negro. Por eso cualquier paleta construida manteniendo constante la luminosidad HSL sale desigual, y acaba corrigiéndose a mano, color a color, hasta que parece correcta.

OKLCH se basa en el espacio perceptual Oklab, donde pasos numéricos iguales corresponden a diferencias percibidas aproximadamente iguales. Mantén la luminosidad constante entre tonos y los colores parecerán realmente igual de claros; avanza en pasos iguales y obtendrás una escala uniforme. Eso lo hace útil para generar tintes y sombras, construir combinaciones accesibles e interpolar entre dos colores sin el gris turbio que aparece a mitad de una mezcla en RGB.

Una advertencia: OKLCH puede describir colores fuera de la gama sRGB, y esos colores se recortan al mostrarse en una pantalla corriente. Ocurre con croma alto en luminosidades extremas, y el efecto es que dos valores OKLCH distintos se ven idénticos.

Cómo leer las relaciones de contraste

El contraste se calcula con la fórmula de WCAG 2: la luminancia relativa de cada color con los canales sRGB linealizados, y después el más claro más 0,05 dividido por el más oscuro más 0,05. El resultado va de 1:1 para dos colores idénticos a 21:1 para negro sobre blanco.

Los umbrales son 4,5:1 para texto normal en nivel AA; 3:1 para texto grande - unos 24px, o 19px en negrita - y para componentes de interfaz y gráficos con significado; y 7:1 para AAA. Se muestran las relaciones frente a blanco y frente a negro porque la que necesitas depende de sobre qué esté el color, y un color que no pasa sobre blanco a menudo pasa con holgura sobre negro.

La fórmula tiene debilidades conocidas y conviene no tomar el número como la respuesta completa. Sobrestima sistemáticamente el contraste del texto claro sobre fondo oscuro, por eso algunos temas oscuros que aprueban sobre el papel resultan incómodos de leer, y no tiene en cuenta el grosor ni el tamaño de la fuente más allá del umbral único de texto grande, así que los grosores muy finos que aprueban pueden seguir costando. Una métrica sucesora, APCA, aborda ambas cosas, pero aún no es lo que exigen las pautas. Cumple la relación y después míralo con tus propios ojos.

El canal alfa y el hex de ocho dígitos

Hex puede llevar el alfa como cuarto canal: #RRGGBBAA en forma completa o #RGBA abreviado. Ambos los admiten todos los navegadores actuales y ambos se aceptan aquí.

Hay dos cosas que fallan con ellos. La primera es el orden de los canales: algunas plataformas, entre ellas Android, escriben primero el alfa como #AARRGGBB, así que un valor copiado de una de esas herramientas y pegado en CSS da un color equivocado sin ningún error que lo delate. La segunda es que el alfa es hexadecimal, de modo que un 50 % de opacidad es 80 y no 50; la sintaxis moderna rgb(0 0 0 / 50%) evita la cuenta por completo y se lee mejor seis meses después.

Qué describe realmente un valor de color

Un triplete hexadecimal no es un color, es una instrucción para una pantalla. #CC0000 dice que active el canal rojo al 80 % de su máximo y los demás a cero, y lo que vea una persona depende del panel, de su calibración, de la luz ambiente y del espacio de color en el que se interprete el número.

Ese espacio es sRGB salvo que algo indique lo contrario. Se estandarizó en 1996 para describir los monitores CRT de entonces, y se quedó porque la web necesitaba una suposición que todos pudieran compartir. Las pantallas actuales de móviles y portátiles cubren un rango más amplio que sRGB, y por eso una imagen etiquetada como Display P3 se ve más saturada que los mismos números interpretados como sRGB.

Hay otra sutileza escondida en los números: sRGB no es lineal. El valor 128 no tiene la mitad de brillo que 255, porque la codificación lleva una curva gamma que asigna más precisión a los tonos oscuros, donde la visión humana es más sensible. Por eso promediar dos valores hexadecimales canal a canal da un resultado más turbio que mezclar los mismos colores en un espacio lineal, y por eso las fórmulas de contraste linealizan los canales antes de hacer cualquier cálculo.

Construir una paleta utilizable a partir de un color

La mayoría de paletas de interfaz son unos pocos tonos expresados en varios pasos de luminosidad: un fondo, una superficie sutil, un borde, un color de texto apagado, un color de marca sólido y uno o dos tonos más oscuros para los estados hover y activo. Nueve u once pasos por tono es una elección habitual porque cubre el tema claro y el oscuro con una sola definición.

El método que funciona es fijar la luminosidad perceptual de cada paso en todos los tonos y dejar variar el croma. El paso 500 del azul, del verde y del rojo debería leerse con el mismo peso en la página; si uno destaca, la escala se verá descompensada allí donde se use. Hacerlo en OKLCH significa que los números hacen el trabajo; hacerlo en HSL significa corregir cada color a ojo.

El croma normalmente tiene que reducirse en los extremos. Los colores muy claros y muy oscuros no pueden sostener mucha saturación dentro de la gama sRGB, así que una escala con croma constante se recorta en ambos extremos y dos pasos contiguos se ven idénticos.

El color no es el único canal

Alrededor de uno de cada doce hombres y una de cada doscientas mujeres tienen alguna forma de deficiencia en la visión del color, la más común una menor capacidad para distinguir el rojo del verde. Un sistema de estados construido solo con rojo y verde es invisible para ellos, y lo mismo ocurre con un gráfico cuyas series solo se diferencian por el tono.

La solución es la redundancia, no evitar el color: combina el color con una forma, un icono, una etiqueta o una posición. Un mensaje rojo con un icono de exclamación y la palabra Error funciona para todo el mundo; el rojo por sí solo funciona para la mayoría. En los gráficos, las etiquetas directas superan a la leyenda, y variar también la luminosidad mantiene distinguibles las series cuando la página se imprime en blanco y negro.

Las relaciones de contraste también cuentan aquí, y comprobarlas es barato. Texto a 4,5:1 y elementos de interfaz a 3:1 son los umbrales que usan la mayoría de pliegos de contratación de software y auditorías de accesibilidad.

Un tema oscuro no es una inversión

Invertir todos los colores produce un tema oscuro que se siente mal, por razones sobre todo perceptivas. El texto claro sobre fondo oscuro parece expandirse y se lee más pesado, así que el mismo grosor parece más grueso; los colores saturados vibran contra superficies oscuras; y el negro puro con texto blanco puro produce un efecto de halo que cansa al leer texto corrido.

Los ajustes habituales son usar un gris muy oscuro en lugar de negro, bajar la saturación de los colores de acento, apoyarse en superficies más claras en vez de sombras para indicar elevación, ya que una sombra es invisible sobre negro, y reducir ligeramente el grosor de la tipografía en lugar de replicar el del tema claro.

Ambos temas hay que comprobarlos por separado. Un color que cumple el contraste sobre blanco falla con frecuencia sobre una superficie oscura, y al revés, y por eso aquí se muestran las relaciones contra ambos a la vez.

El color en CSS y cómo organizarlo

El CSS moderno acepta todos estos formatos directamente, incluidos oklch() y la sintaxis separada por espacios con barra para el alfa: rgb(0 0 0 / 50%). Merece la pena adoptar esa sintaxis porque se lee sin ambigüedad y porque el alfa es un porcentaje y no un par hexadecimal que nadie convierte de cabeza.

La forma duradera de organizar el color son dos capas de propiedades personalizadas. La primera nombra la paleta de forma literal - --blue-500, --grey-900 - y la segunda nombra el papel: --color-text, --color-surface, --color-border, --color-accent. Los componentes solo referencian papeles, de modo que un tema oscuro es una redefinición de la capa de papeles y no una edición en cada componente.

Dos funciones más recientes cambian lo que es posible. color-mix() mezcla dos colores en una proporción y un espacio indicados, así que un estado hover puede derivarse del color base en lugar de elegirse a mano. Y la sintaxis de color relativo permite construir una variante a partir de un valor existente ajustando un canal, lo que mantiene la escala sincronizada con el color del que se derivó. Ambas están soportadas en los navegadores actuales y ambas son mucho más fáciles de razonar en OKLCH que en HSL.