Éxito, advertencia, error, info: colores funcionales bien hechos

Imagina un panel empresarial apagado: un color de marca azul pizarra, grises tintados, nada por encima de un murmullo — una paleta afinada para jornadas de ocho horas. Se completa un guardado y entra deslizándose un toast: verde neón a todo gas, directo de los valores por defecto de una biblioteca de componentes. El verde, como verde, no tiene nada de malo. En esta interfaz parece pegado desde otro producto — y la costura que deja al descubierto atraviesa toda la categoría de colores a la que pertenece.

Los colores funcionales — verde de éxito, ámbar-naranja de advertencia, rojo de error, azul de info — son los cuatro colores de intención convencionales del diseño de interfaces, y hacerlos bien implica dos compromisos: mantén los tonos en la convención, porque los usuarios llegan ya entrenados para leerlos, y construye cada uno como una rampa completa afinada a tu paleta — el croma igualado al nivel general de la paleta, la luminosidad colocada de modo que los cuatro se sientan igual de intensos y pasen el contraste, y el tono nunca dejado solo para cargar un significado. El toast neón falla en la mitad de la afinación. Este artículo cubre ambas mitades; la maquinaria de rampas que hay debajo vive en nuestra guía de escalas de color.

¿Por qué verde, ámbar, rojo y azul — y no los tonos que tú elijas?

Porque el código es aprendido, no natural. Nada en la percepción hace que el verde signifique éxito; la asociación es una convención, reforzada por los semáforos y por décadas de interfaces que repiten las mismas asignaciones, y los usuarios la traen consigo a cada producto nuevo. Ese entrenamiento previo es todo el valor: un borde rojo se lee como «algo falló» antes de analizar una sola palabra.

Pelearse con la convención cuesta comprensión. Un error morado es primero un acertijo y después un mensaje, y el impuesto se cobra en los peores momentos posibles — cuando algo ya ha salido mal. La marca se expresa en todo lo demás de la paleta; estos cuatro son el lugar donde conformarse. Lo que conservas sigue siendo sustancial: el ángulo de tono exacto dentro de cada banda, el nivel de croma, la colocación de la luminosidad — libertad suficiente para hacer los cuatro inconfundiblemente tuyos sin romper el código.

¿Por qué cada color funcional es una rampa y no una muestra?

Sigue el error a lo largo del envío de un formulario. El campo que falla necesita un fondo rojo pálido — un tinte de nivel 50. El icono y el borde del campo necesitan un núcleo de fuerza media, un 500 o 600. El texto del mensaje bajo el campo necesita un 700 que supere 4,5:1 contra el tinte pálido que tiene detrás. Una intención, tres pasos — y los estados hover, las superficies oscuras y los gráficos siguen añadiendo más. Esa es la misma anatomía tinte–núcleo–texto que tiene una rampa de marca, y una sola muestra de la clase #ff0000 no puede proporcionarla.

En Scale Composer, las cuatro intenciones son un grupo fijo en la UI de la paleta, y cada una se genera como una rampa completa de 50–900 con la misma maquinaria que el color de marca: pasos en la curva de luminosidad, croma modelado por un perfil y limitado por debajo del techo de gama, roles semánticos derivados por superficie frente a los mínimos de WCAG y APCA.

Abre las cuatro rampas funcionales en Scale Composer — éxito, advertencia, error e info como escalas de diez pasos, cada una con sus pasos de tinte, núcleo y texto derivados igual que los de la rampa de marca.

¿Cómo haces que los cuatro se sientan nativos en lugar de pegados?

Iguala su croma al nivel general de la paleta. El toast neón falla por distancia: una paleta apagada cuyo pico de marca se sitúa en torno a un croma ≈0,09 no puede absorber un verde de éxito a ≈0,22 — el verde está tocando en otro registro. Lleva el croma pico de los cuatro hacia el nivel de la paleta, situándolo ligeramente por encima para que sigan señalando: en torno a ≈0,11–0,13 frente a esa marca ≈0,09, como cifra de trabajo. El fallo inverso también existe — una paleta de consumo vívida con colores funcionales tímidos hace que los estados reales parezcan decorativos.

Esta regla solo se puede enunciar porque el croma de OKLCH es absoluto entre tonos: «los cuatro alcanzan su pico dentro de ≈0,02 respecto de la marca» significa la misma cantidad de color para el verde, el ámbar, el rojo y el azul por igual.

¿Por qué el rojo grita mientras el verde susurra con la «misma» intensidad?

Porque los primarios a plena fuerza son perceptualmente desiguales. El rojo pleno #ff0000 es oklch(≈0.63 0.26 29); el verde pleno #00ff00 es oklch(≈0.87 0.29 142). Elige ambos a «plena intensidad» y habrás emparejado un color pesado y oscuro con uno aéreo y claro — el error domina cada composición que comparte con el éxito, leyéndose más enfadado de lo previsto mientras el verde se desvanece hasta volverse papel pintado.

La solución es la colocación, no la intuición: da a los cuatro un croma parecido y una luminosidad de núcleo parecida en OKLCH — digamos núcleos cerca de L ≈0,55–0,60 con croma igualado — y salen igual de intensos. La intensidad pareja es una propiedad de la paleta que puedes construir, no una coincidencia que esperas que ocurra.

¿Por qué la advertencia es la más difícil de los cuatro?

Porque el ámbar vive arriba. La banda de tono que los usuarios leen como «advertencia» alcanza su mejor viveza en luminosidad alta — un ámbar representativo se sitúa en torno a oklch(≈0.77 0.19 70) — y contra un fondo blanco eso da aproximadamente 2,1:1. Eso falla en todo: el mínimo de 3:1 para iconos y bordes y el mínimo de 4,5:1 para texto.

El caso trabajado: para superar 3:1 contra el blanco, un icono o borde ámbar necesita bajar su luminosidad hasta cerca de L ≈0,67; el texto de advertencia sobre blanco necesita cerca de L ≈0,57. Pero oscurecer el ámbar lo arrastra hacia el marrón, así que el oficio consiste en mantener el croma alto a medida que los pasos se oscurecen, aceptar que los pasos 600–700 se leen más naranjas que el 500, y apoyarse en la anatomía de la rampa: una superficie ámbar pálida de 50–100 con texto ámbar-marrón oscuro de 700–800 carga la intención, mientras que el 600 que supera 3:1 dibuja el borde. (En fondos oscuros el problema se alivia — el ámbar brillante está en su casa allí.)

¿Y los usuarios que no pueden leer el tono en absoluto?

Aproximadamente 1 de cada 12 hombres tiene una deficiencia en la visión del color rojo–verde, que colapsa precisamente la distinción éxito–error en la que se apoya la convención. Por eso el tono nunca es la única señal: el criterio de uso del color de WCAG lo convierte en una regla estricta, y la forma práctica es que un icono y texto acompañen siempre al color. La anatomía de la rampa también ayuda aquí — un fondo con tinte pálido y texto oscuro transmite «algo necesita atención» solo a través de la estructura de luminosidad, incluso para alguien que no puede distinguir el campo rojo del verde.

La mitad de la afinación es la parte que hay que practicar, porque es la parte que las bibliotecas de componentes se saltan. Reafina las cuatro rampas funcionales contra una paleta de marca apagada — lleva su croma hacia el nivel de la paleta y observa el momento en que el toast deja de gritar y empieza a pertenecer.