Sintaxis moderna de color CSS con ejemplos listos para copiar

Primero el espacio, después la puntuación

Un valor de color CSS combina un espacio de color, coordenadas dentro de ese espacio y, en ocasiones, un componente alfa. La puntuación visible solo es la serialización. Un HEX de seis dígitos guarda tres bytes sRGB, mientras que rgb() expresa los mismos canales rojo, verde y azul mediante números o porcentajes. HSL y HWB ofrecen vistas alternativas de sRGB. lab() y oklch() no son RGB con otro formato: el navegador transforma sus coordenadas mediante gestión de color antes de componer y mostrar. Una conversión correcta debe conservar las coordenadas y el espacio previsto.

Los colores con nombre y la palabra transparent son constantes útiles, pero no forman un modelo de edición escalable. Un nombre como rebeccapurple se resuelve a un valor sRGB definido; no expresa la función del color dentro del producto. En un sistema reutilizable conviene colocar el valor bajo una propiedad personalizada cuyo nombre describa su propósito. Así se puede cambiar la notación sin renombrar cada componente y se evita afirmar que valores numéricamente parecidos pertenecen al mismo espacio o producen necesariamente el mismo color renderizado.

HEX y rgb() exponen sRGB

HEX utiliza #RRGGBB o #RRGGBBAA, con cada pareja hexadecimal entre 00 y FF. rgb() usa esos mismos canales sRGB y admite la sintaxis moderna separada por espacios, porcentajes opcionales y una barra antes de alfa. Las formas abreviadas #RGB y #RGBA solo son exactas cuando cada pareja expandida repite un dígito; no sirven para redondear. Convertir #4F46E5 en rgb(79 70 229) es exacto porque 4F, 46 y E5 equivalen a 79, 70 y 229. Volver desde coordenadas HSL redondeadas puede modificar un byte.

.syntax-demo {
  --accent: #4f46e5;
  color: rgb(79 70 229 / 85%);
  border-color: hsl(243.4 75.4% 58.6%);
  outline-color: hwb(243.4 27.5% 10.2%);
}

HSL y HWB controlan sRGB de otra forma

hsl() emplea matiz, saturación y luminosidad HSL; hwb() usa matiz, blancura y negrura. Ambas notaciones terminan describiendo colores sRGB. Los ángulos de matiz son cíclicos y el matiz puede carecer de efecto cuando los demás canales producen un resultado acromático. La luminosidad HSL no mide el brillo percibido, por lo que pasos numéricos iguales no garantizan pasos visuales iguales. HWB resulta práctico al pensar en mezclar blanco o negro con un matiz, pero conserva la gama sRGB y exige comprobar el contraste final.

• hsl() y hwb() son notaciones sRGB, no espacios de gama ampliada.
• La luminosidad HSL no es luminosidad percibida ni sustituye el cálculo de contraste.
• Un matiz impotente o ausente requiere tratamiento consciente durante la interpolación.
• Las conversiones redondeadas pueden mover canales aunque la intención no cambie.

Lab y OKLCH usan otras coordenadas

lab() usa luminosidad CIE y los ejes oponentes a y b. lch() expresa un modelo relacionado mediante luminosidad, croma y matiz. oklab() y oklch() se basan en OKLab, diseñado para que las diferencias de coordenadas se comporten con mayor regularidad en muchas tareas. Estas funciones pueden especificar colores fuera de sRGB. El navegador puede mapear el resultado a la gama real de la pantalla. Las coordenadas siguen siendo significativas, pero una captura en una pantalla sRGB no demuestra cómo se mostró el color amplio en todos los dispositivos.

Separadores modernos y alfa

La notación funcional moderna separa los canales con espacios y coloca alfa después de una barra. La sintaxis histórica con comas sigue disponible en rgb() y hsl() por compatibilidad, pero mezclar las dos gramáticas dentro de una función es inválido. La palabra none representa un componente ausente donde CSS Color 4 lo permite; durante una interpolación, ausente no equivale necesariamente a cero. Los porcentajes también dependen de cada función. Es mejor consultar la gramática seleccionada que trasladar automáticamente unidades y rangos entre modelos diferentes.

.wide-gamut {
  color: #4f46e5;
}

@supports (color: oklch(0% 0 0)) {
  .wide-gamut { color: oklch(62% 0.2 265); }
}

Elegir una sintaxis mantenible

HEX es apropiado cuando llega un sRGB opaco exacto desde una fuente basada en bytes y se desea una revisión compacta. rgb() es claro cuando el código manipula canales sRGB o necesita alfa. hsl() y hwb() ayudan en ajustes limitados compatibles con sus modelos, recordando sus límites perceptuales. oklch() resulta útil cuando el flujo de trabajo necesita luminosidad, croma y matiz más regulares. lab() conviene cuando se requiere explícitamente ese sistema o cierta interoperabilidad. Un token semántico puede ocultar la serialización concreta a los componentes.

• Registra el espacio de color junto con las coordenadas.
• Mantén una propiedad personalizada semántica estable sobre la notación cruda.
• Proporciona un fallback probado cuando lo exijan los navegadores compatibles.
• Mide el contraste después de componer alfa sobre el fondo real.

Comprobar el resultado calculado

La verificación debe examinar el color calculado o resuelto por el navegador, no solo el texto de origen. Hay que probar los fallbacks en los navegadores objetivo, los valores fuera de gama en pantallas representativas y el contraste sobre los colores finalmente compuestos. Alfa, fondos, filtros, modos de mezcla y color-scheme pueden cambiar el resultado después del análisis. Las pruebas automatizadas confirman tokens y soporte sintáctico, pero la comprobación visual y de accesibilidad necesita el contexto renderizado. Conservar el valor original evita acumular errores por conversiones y redondeos sucesivos.