Cómo convertir un color de marca en tokens de diseño, del 50 al 950

El método detrás de una escala de tokens (mantener el tono, recorrer la luminosidad y asignar tareas a los pasos midiendo) se explica en Cómo crear una paleta accesible a partir de un solo color de marca. Esta guía es la mitad mecánica: qué hace el generador de escalas y tokens con el hex que le das, dónde sorprende el resultado y cómo sacar de él dos tipos de token sin mezclarlos.

Un token de diseño es un valor con nombre al que los componentes hacen referencia en lugar de un color directo. La herramienta te da dos tipos. Un token de paso, como --brand-600, nombra una posición en la escala. Un token de rol, como --brand-text, nombra una tarea, y en cada tema apunta al paso que cumpla esa tarea.

Cómo generar la escala y sus roles

1. Escribe el color de marca. Ingrésalo en el campo “Brand colour” (color de marca) o usa la muestra que está al lado. El campo acepta un código hex y también valores rgb(), hsl() u oklch().
2. Ponle nombre a la escala. “Token name” (nombre del token) empieza como brand. Se pasa a minúsculas, y todo lo que no sea letra, dígito o guion se convierte en guion, así que “Ocean Blue” da --ocean-blue-500.
3. Lee la franja. Once muestras, del 50 al 950. La que tiene la etiqueta “yours” (el tuyo) es el paso cuya luminosidad objetivo está más cerca de la de tu color.
4. Lee las tarjetas Light theme y Dark theme (tema claro y tema oscuro). Cada una lista cuatro roles con el paso elegido, para qué sirve el rol y el contraste medido.
5. Pulsa Copy roles en la barra inferior. Copia los tokens de rol de los dos temas como propiedades personalizadas de CSS.
6. Copia los pasos desde el panel de código. Elige CSS, Tailwind o JSON arriba del panel y pulsa Copy.
7. Pulsa Share (compartir) si un desarrollador necesita la misma escala. El enlace lleva el color y el nombre del token, así que reconstruye exactamente esta.

Los once valores objetivo son fijos

La herramienta toma solo dos cosas de tu color: su tono y su croma. La luminosidad sale de una tabla fija, la misma para cualquier marca, y el croma se ajusta en cada paso para que los extremos claro y oscuro se puedan mostrar en pantalla. Si un paso aun así no puede sostener ese croma en pantalla, se reduce más, sin tocar el tono ni la luminosidad.

Paso	Luminosidad OKLCH	Porcentaje de tu croma
50	0.972	14%
100	0.938	26%
200	0.878	46%
300	0.800	68%
400	0.702	88%
500	0.608	100%
600	0.524	96%
700	0.442	84%
800	0.362	68%
900	0.286	50%
950	0.212	36%

La separación no es uniforme. Es más estrecha en el extremo claro, donde 0.034 separa el 50 del 100, frente a 0.098 entre el 300 y el 400, así que los tintes más claros quedan mucho más juntos que los tonos medios.

Tu hex exacto no está en la escala

Esta es la sorpresa. Como la luminosidad sale de la tabla, tu color aparece en la escala solo si su luminosidad coincide justo con un valor objetivo. Si no, el paso marcado “yours” es un vecino construido con la luminosidad objetivo, a menudo con otro porcentaje de tu croma.

La herramienta abre con #2563eb, que tiene una luminosidad OKLCH de 54.6%. El objetivo más cercano es el 600, en 0.524 (a 0.022 de distancia, frente a 0.062 del 500), así que el 600 queda marcado como “yours” y el botón de la barra dice “Base is 600” (la base es 600). Ese paso se construye en 0.524 con el 96% del croma, así que se parece mucho a #2563eb, pero no es #2563eb.

Pulsar ese botón reemplaza el color que ingresaste por el valor que la escala tiene para ese paso. Hazlo solo si de verdad quieres adoptar la versión de la escala como color de marca. Si el hex de marca tiene que aparecer exacto en el código, guárdalo como un token propio junto a la escala en lugar de editar un paso.

Cómo elige su paso cada rol

Cada rol tiene un requisito, y la herramienta recorre la escala desde el extremo de la superficie hasta que un paso lo cumple. En la tarjeta clara el recorrido empieza en el 50 y avanza hacia el 950, midiendo cada paso contra blanco; en la tarjeta oscura empieza en el 950 y avanza hacia el 50, midiendo contra negro. Se toma el primer paso que lo supera, es decir, el paso menos extremo que todavía cumple.

Rol	Para qué sirve según la herramienta	Requiere	Tema claro	Tema oscuro
text	Texto de cuerpo sobre el fondo de la página	4.5:1	El primer paso desde el 50 que lo supera sobre blanco	El primer paso desde el 950 que lo supera sobre negro
text-large	Títulos de 24px o más	3:1	Igual que arriba, con 3:1	Igual que arriba, con 3:1
border	Bordes de campos y otros controles que deben poder encontrarse	3:1	Igual que arriba, con 3:1	Igual que arriba, con 3:1
surface	Bloques de fondo teñidos	Nada	Paso 50	Paso 950

De aquí salen dos cosas. Text-large y border comparten umbral y búsqueda, así que siempre caen en el mismo paso. Y el rol border queda más oscuro de lo que mucha gente espera. En una escala neutra, donde la luminosidad OKLCH es la raíz cúbica de la luminancia relativa, el paso 500 da 1.05 ÷ (0.608³ + 0.05) ≈ 3.8:1 sobre blanco y el paso 400 da 1.05 ÷ (0.702³ + 0.05) ≈ 2.7:1. Así que un borde que indica dónde está un campo, y que por eso necesita 3:1, queda en el 500 o más oscuro sobre blanco. Un divisor puramente decorativo no tiene requisito y puede ser tan claro como quieras.

Si ningún paso de una escala alcanzara el contraste de un rol, Copy roles escribiría esa línea como un comentario que lo indica, en lugar de omitir el rol sin avisar.

Cómo conectar los tokens de rol con los tokens de paso

Copy roles escribe valores hex: un bloque :root para el tema claro y un segundo bloque dentro de una media query prefers-color-scheme: dark. El panel de código escribe los tokens de paso: CSS da de --brand-50 a --brand-950, Tailwind da un objeto colors en hex para una configuración de JavaScript, y JSON anida los once pasos bajo el nombre del token.

Para que los dos sigan sincronizados cuando cambie el color de marca, pega los tokens de paso y luego apunta cada rol al paso que indicó su tarjeta, en lugar de a un hex copiado:

:root {
  --brand-text: var(--brand-600); /* the step the Light theme card chose */
}

Si tu sitio cambia de tema con una clase o un atributo en lugar de la configuración del sistema, mueve el bloque oscuro bajo ese selector.

Para los pasos, usa el panel de código y no el botón Export de la barra inferior. Export es común a todas las herramientas de color y nombra los colores por posición, de brand-1 a brand-11, no por paso.

Otras formas de hacerlo

No hay un método integrado en macOS, Windows ni iPhone para generar una escala de tokens, ni una vía por línea de comandos entre las que estas guías respaldan. A mano, el método de la guía anterior funciona con cualquier selector de color que muestre OKLCH y un verificador de contraste para medir cada paso contra cada fondo.

Cómo comprobar que no se envía nada

No hay ningún archivo de por medio, y el color y el nombre del token se guardan después del # en la barra de direcciones, una parte que los navegadores no envían al servidor. Con DevTools abierto en el panel Network (Red), cambia el color de marca unas cuantas veces y observa: nada de lo que sale lo lleva.

Abre el generador de escalas y tokens con el hex de tu marca y lee las dos tarjetas de roles antes que las muestras. Si trabajas con Tailwind v4, la herramienta Tailwind colours genera los mismos once pasos y los exporta como un bloque @theme.