Generar una paleta completa a partir de un solo color de marca

El rebranding se lanza y la marca llega como un único color aprobado — digamos el azul #2563eb — más un logo, un tipo de letra y una colección de imágenes de ambiente. Entonces alguien abre el backlog del producto: estados hover, botones deshabilitados, bordes de campos, franjas de tablas, un toast de éxito, un estado de error, series de gráficos, un tema oscuro. Diez pasos de una rampa de marca, diez neutros, cuatro colores funcionales con sus propias rampas, alrededor de diecisiete roles semánticos por superficie — la interfaz necesita del orden de un centenar de valores relacionados, y la guía nombra exactamente uno. Ese hueco es donde la mayoría de los rebrandings se topan con su primer ticket de ingeniería.

El hueco se puede cerrar por derivación: un color de marca puede generar una paleta completa en un orden fijo — (1) la semilla se convierte en su propia rampa de diez pasos, (2) una escala de neutros se construye con la misma lógica de luminosidad y un susurro del tono de marca, (3) se proponen colores de apoyo candidatos a partir de la geometría de tonos de la semilla, (4) los cuatro colores funcionales se ajustan al nivel de saturación de la paleta, y (5) se asignan roles semánticos frente a los mínimos de contraste. La generación te lleva a un 80 % coherente; las decisiones restantes son criterio de diseño. Este artículo recorre la derivación en orden; la mecánica de rampas que hay debajo vive en nuestra guía de escalas de color.

¿Cómo se convierte un solo hex en una rampa?

Primera etapa. #2563eb se convierte en oklch(0.546 0.215 262.9), y cada coordenada siembra una parte distinta de la rampa. El tono, 262,9°, se mantiene a lo largo de los diez pasos. El croma, 0,215, se convierte en el pico de saturación de la rampa, con el color atenuándose hacia los extremos. Los pasos en sí van desde un L ≈0,97 casi blanco (#F1F5FE) hasta un L ≈0,25 (#192233) a lo largo de una curva de luminosidad — y la propia luminosidad de la semilla, 0,546, cae entre el 500 generado (L ≈0,63) y el 600 (L ≈0,52). La rampa enmarca el color de marca en lugar de reproducirlo necesariamente, y cuál de esos dos pasos sirve como núcleo de trabajo es una de las decisiones de criterio que vienen después.

¿De dónde sale la escala de neutros?

Segunda etapa. Los neutros reutilizan la misma maquinaria de luminosidad con una saturación casi nula — casi nula, no nula: un susurro de croma dirigido al tono de marca (262,9° aquí), porque los grises puros de canales iguales tienden a leerse desconectados junto a una paleta con color. El resultado son diez grises que se inclinan imperceptiblemente hacia el azul, de modo que las páginas, tarjetas y bordes — la mayoría de los píxeles de una interfaz — pertenecen a la misma familia que la rampa de marca. El neutro hereda su estructura de la semilla; su temperatura sigue siendo una decisión que un diseñador puede anular.

¿De dónde salen los colores de apoyo?

Tercera etapa, y el punto donde la derivación se hace visible. A partir de la posición de la semilla en la rueda de tonos, Scale Composer propone cuatro candidatos de apoyo — rotaciones del tono de marca, cada uno además atenuado en luminosidad o croma para que apoye en vez de competir:

Derivar de la geometría de la rueda es la jugada clásica del esquema de color — relaciones entre ángulos de tono que hacen las veces de parentesco visual — y su límite honesto va justo al lado: la geometría garantiza que los candidatos están relacionados con el color de marca, no que sean adecuados para la marca. Estos cuatro son propuestas para que un diseñador las cure — quédate con el bronce y descarta el resto, o no te quedes con ninguno. Cada uno que sobreviva se convierte en su propia rampa completa, con la misma maquinaria que la de la marca.

Abre toda la derivación a partir de este azul en Scale Composer — la semilla, su rampa, los neutros tintados, las cuatro propuestas de apoyo y los colores funcionales, todos generados a partir del único hex.

¿Qué pasa con éxito, advertencia, error e info?

Cuarta etapa. Los cuatro propósitos funcionales conservan sus tonos convencionales — los usuarios llegan ya entrenados en verde, ámbar, rojo y azul — pero su saturación se ajusta hacia el nivel de la paleta, de modo que una marca apagada produce colores funcionales que murmuran en vez de gritar, y una marca vívida produce cuatro que se defienden solos. Cada uno se genera como una rampa completa, porque un estado de error necesita un tinte pálido, un núcleo de intensidad media y un paso de texto legible — no un solo rojo.

¿Dónde entran los roles y las comprobaciones de contraste?

La quinta etapa es donde los colores reciben su trabajo. Se derivan alrededor de diecisiete roles semánticos por superficie — fondo, niveles de texto por capas, bordes, colores de acción — con los mínimos de contraste WCAG aplicados y APCA comprobado en paralelo. Una variante oscura se deriva en lugar de invertirse, sobre su propia curva de luminosidad con un aumento de croma de alrededor del 20 %, porque los entornos oscuros atenúan el colorido percibido. Esta etapa convierte la paleta de una imagen en un artefacto: el resultado se exporta como DTCG, CSS, Tailwind o variables de Figma, con el hex al lado.

¿Qué sigue necesitando un diseñador?

El 20 % restante se concentra en unas pocas decisiones concretas. Qué candidatos de apoyo sobreviven — ningún generador sabe si el producto necesita un tono para ilustración o una segunda serie de datos. Si el núcleo de marca de trabajo es el 500 o el 600 — el contraste con texto blanco suele decidirlo. Cuán cálidos deben sentirse los neutros. Cuán fuertes pueden ser los cuatro funcionales en este producto en particular. La derivación garantiza que la paleta sea coherente; solo el criterio puede hacerla correcta. Lo que la derivación aporta más allá de la velocidad es que todo el sistema sigue siendo una función de su semilla — lo que lo hace re-ejecutable.

Y esa propiedad es lo más rápido de probar. Cambia la semilla y observa cómo el sistema se vuelve a derivar — reemplaza el azul por un color de marca distinto y cada etapa anterior se recalcula: rampa, neutros, propuestas de apoyo, relaciones de contraste. Una paleta construida así es una decisión más curación, y la herramienta hace que la primera parte sea instantánea para que la segunda reciba la atención.