Color Token Generator

Por qué todo sistema de diseño necesita una escala de color

Una escala de color es la columna vertebral de un lenguaje visual coherente. Sin ella, diseñadores y desarrolladores toman decisiones ad hoc — 'un azul ligeramente más oscuro para el hover' o 'una versión muy clara para el fondo de la tarjeta' — que producen docenas de valores hexadecimales casi idénticos sin ninguna relación sistemática. Con el tiempo, esto crea un código lleno de valores de color únicos que resultan imposibles de actualizar de una sola vez.

Una escala de 11 pasos bien construida resuelve esto: los pasos claros (50–200) sirven para superficies y fondos con tinte, los pasos medios (300–600) llevan elementos interactivos como botones, enlaces y anillos de enfoque, y los pasos oscuros (700–950) gestionan el texto y los bordes de alto contraste. Cada decisión se remonta a la escala, y cambiar el color de marca significa actualizar un valor base en lugar de buscar en cientos de códigos hex en una hoja de estilos.

La convención de escala de color de Tailwind

Tailwind CSS popularizó la convención de nomenclatura numérica de 11 pasos — 50, 100, 200 hasta 900, 950 — y desde entonces ha sido adoptada como estándar por Radix UI, shadcn/ui, Material Design 3 y la mayoría de los ecosistemas de bibliotecas de componentes modernas. La ventaja es la previsibilidad: un desarrollador que ha usado cualquiera de estos sistemas sabe inmediatamente que un token de nivel 500 es el color base de rango medio, un token de nivel 100 es un tinte muy claro y un token de nivel 800 es un tono oscuro para usar sobre fondos claros.

Esta herramienta genera escalas visualmente compatibles con las paletas integradas de Tailwind (azul, rojo, verde, etc.), facilitando la adición de un color de marca personalizado que se integre de forma natural junto a los valores predeterminados de Tailwind. El formato de exportación de Tailwind coincide exactamente con lo que espera theme.extend.colors en tailwind.config.js, y la exportación de Variables CSS está formateada para el bloque @theme de Tailwind v4.

Comprender las relaciones de contraste WCAG

La relación de contraste entre un color de texto y su fondo se calcula a partir de su luminancia relativa — una medida del brillo que parece tener cada color al ojo humano. La fórmula WCAG es (L1 + 0.05) / (L2 + 0.05), donde L1 es la luminancia del color más claro y L2 la del más oscuro. El resultado va de 1:1 (colores idénticos, sin contraste) a 21:1 (texto negro sobre fondo blanco, contraste máximo).

WCAG AA requiere 4.5:1 para texto normal y 3:1 para texto grande (18pt+). WCAG AAA requiere 7:1 para texto normal. En esta herramienta, las relaciones de contraste de texto blanco y negro de cada muestra se calculan y se muestran como insignias W✓ y B✓. Los pasos de escala media (400–600) normalmente fallan ambos umbrales — están diseñados para rellenos decorativos y acentos interactivos, no para fondos de texto. Los pares de texto accesibles viven en los extremos: pasos muy claros para texto oscuro, pasos muy oscuros para texto blanco.

Espacios de color: HSL, OKLCH y por qué importa

Los generadores de paletas tradicionales trabajan en HSL — Matiz, Saturación, Luminosidad. HSL es intuitivo y está bien soportado, pero es perceptualmente no uniforme: el mismo paso numérico de luminosidad se ve dramáticamente diferente dependiendo del matiz. Un paso de 50% a 60% de luminosidad parece un gran salto para el azul pero un pequeño paso para el amarillo, porque el ojo humano percibe los colores de forma diferente en todo el espectro.

OKLCH es un espacio de color perceptualmente uniforme donde los pasos numéricos iguales de luminosidad se ven iguales al ojo humano independientemente del matiz. Tailwind CSS v4 cambió a OKLCH internamente por esta razón. Para un generador de paletas, OKLCH produce escalas donde cada paso genuinamente parece un paso uniforme hacia más claro o más oscuro — especialmente valioso para el diseño de paletas accesibles donde se necesitan pasos perceptuales consistentes para predecir de forma fiable las relaciones de contraste en toda la escala.

Exportar a CSS, Tailwind, SCSS, JSON y DTCG

La exportación de Variables CSS usa el patrón de nomenclatura --color-N dentro de :root { }. La exportación de Tailwind cae directamente en theme.extend.colors en tailwind.config.js — renombra 'color' a tu nombre de token (p.ej., 'primary' o 'brand'). La exportación de SCSS usa la sintaxis de variable $color-N compatible con Sass y Less. La exportación JSON sigue el formato de token DTCG W3C y es compatible con Style Dictionary, Theo, Supernova y cualquier herramienta en el ecosistema moderno de canalización de tokens.

Los cuatro formatos generan los mismos 11 valores hex, por lo que cambiar entre ellos después de la generación no requiere cambios. Haz clic en cualquier muestra individual para copiar su valor hex directamente al portapapeles — útil cuando necesitas un tono específico para un archivo de diseño de Figma, un estilo en línea puntual o una referencia de color rápida sin ejecutar una exportación completa.

Comparación con Coolors, Adobe Color y Material Design Color Tool

Coolors.co es una herramienta de descubrimiento de paletas diseñada para generar combinaciones de 5 colores aleatorias. Es excelente para inspiración, pero no produce escalas de tokens, no genera configuraciones de Tailwind y no muestra insignias de contraste WCAG por muestra. Puedes exportar valores hex, pero obtienes cinco colores independientes — no una rampa estructurada de oscuro a claro desde un único matiz.

Adobe Color ofrece generación de armonía de colores desde una rueda de colores y algunas opciones de exportación, pero requiere una cuenta de Adobe para guardar y exportar paletas. No genera una escala de colores compatible con Tailwind ni JSON DTCG, y carece de visualización de relación de contraste por paso.

La Material Design Color Tool de Google produce una escala de 10 pasos (sin el paso 50) y está diseñada específicamente para la temática de Material Design — el resultado no se mapea limpiamente a Tailwind u otros ecosistemas. También carece de formatos de exportación DTCG y SCSS.

Esta herramienta genera una escala completa de 11 pasos, muestra insignias WCAG W✓/B✓ en cada muestra, exporta a cuatro formatos y no requiere inicio de sesión. Todo funciona en tu navegador — ningún dato de color se sube a un servidor.