Generador de Tonos de Color

Generador de Tonos de Color - Construye la escala de tu marca

Los sistemas de diseño modernos funcionan sobre escalas de tono consistentes — las estructuras 50-100-200...900-950 que Tailwind, Material 3, Radix y Stripe Atlas usan para expresar el mismo color en distintos niveles de luminosidad. Este generador toma un color base HEX y construye una rampa de sombras (más oscuras, mezcladas hacia el negro) y tintes (más claras, mezcladas hacia el blanco) en sRGB, luego mapeada a una escala de nombres 50-950. Cada muestra muestra su relación de contraste WCAG 2.1 en vivo contra blanco puro y negro puro con insignias AA/AAA de aprobado o fallo, para que elijas combinaciones seguras de texto sobre color antes de publicar tus tokens. La salida está lista para botones, estados hover, paletas de gráficos, pares de modo oscuro y pruebas de impresión — exporta como custom properties CSS, tokens JSON de diseño o fragmento tailwind.config.js. (El rampeo perceptualmente uniforme OKLCH y la entrada HSL/OKLCH están en la hoja de ruta.)

¿Qué son los shades y tints?

Los tints mezclan el color con blanco para hacerlo más claro, mientras que los shades lo mezclan con negro para oscurecerlo. Una escala equilibrada aporta flexibilidad para estados hover, sombras, tarjetas y gráficos sin adivinar porcentajes.

¿Cómo uso el generador?

1) Ingresa o selecciona un color base HEX. 2) Define el total de muestras o ajusta cuántos tints y shades necesitas. 3) Haz clic en Generar. 4) Copia cualquier swatch o exporta variables CSS, JSON o configuración Tailwind para tu proyecto.

¿Por qué exportar en varios formatos?

Cada equipo usa un flujo distinto. Las variables CSS se pegan directo en estilos, JSON funciona para tokens o plugins de Figma, y Tailwind se integra con proyectos basados en utilidades.

¿Cuántos pasos debe tener mi rampa de color?

La mayoría de sistemas de diseño llegan a 9-11 pasos porque alcanza un punto óptimo: suficiente variación para primario, hover, focus, activo y estados deshabilitados además de fondos claros/oscuros y bordes, sin inflar tu archivo de tokens. Tailwind incluye 11 pasos (50, 100, 200, ..., 900, 950); Material 3 incluye 13 tonos (0-100 en incrementos de 5 o 10); IBM Carbon incluye 11; Radix incluye 12. Menos de 6 pasos suele dejarte improvisando colores durante la implementación; más de 13 desperdicia tokens que nadie usará. Elige 11 a menos que tengas una razón específica para mayor densidad.

¿Por qué mi sombra del medio no se parece al color base?

En escalas tipo Tailwind, el paso 500 es el punto medio perceptual de la rampa, no tu color literal de marca. Si tu entrada es un rojo de marca vivo y saturado, el algoritmo lo centra en un rango de luminosidad 0-100 — lo que a menudo significa que el color de marca cae en 600 o 700, no en 500, porque las marcas suelen elegir colores que se sitúan más oscuros que el gris medio perceptual para contraste contra blanco. Para anclar tu marca literal exactamente en el paso 500, aumenta la luminosidad de tu color de entrada o usa una herramienta que permita fijar un paso personalizado.

¿Qué es OKLCH y por qué importa el color perceptual?

OKLCH (Oklab en forma cilíndrica Luminosidad/Croma/Tono, introducido por Bjorn Ottosson en 2020 y enviado en CSS Color Module Level 4) es un espacio de color perceptualmente uniforme: cambios numéricos iguales se ven iguales al ojo humano. HSL — el modelo de conveniencia más antiguo — no es uniforme; un paso de luminosidad HSL de 10 unidades se ve diminuto en amarillos pero enorme en azules, por eso las rampas generadas en HSL se sienten desiguales. Esta herramienta actualmente mezcla las sombras hacia el negro y los tintes hacia el blanco en sRGB, lo cual es rápido y predecible pero no estrictamente uniforme a nivel perceptual; el rampeo OKLCH es una mejora planificada. Si necesitas una rampa perfectamente uniforme hoy, pega los valores HEX exportados en un editor OKLCH. El soporte de navegador para OKLCH ya es sólido (Chrome 111+, Safari 16.4+, Firefox 113+).

¿Cómo aseguro accesibilidad (contraste WCAG AA)?

WCAG 2.1 requiere que el texto del cuerpo tenga una relación de contraste 4.5:1 contra su fondo (AA), o 3:1 para texto de 18pt+ o negrita 14pt+ (AA Large), o 7:1 para AAA. Cada muestra de esta herramienta muestra dos insignias en vivo — su relación de contraste contra blanco puro (W) y negro puro (B), cada una etiquetada AAA, AA, AA Large o Fail — calculada con la fórmula exacta de luminancia relativa WCAG (linearización sRGB, luego (L1+0.05)/(L2+0.05)). Generalmente los pasos 50-300 sirven como fondos para texto oscuro, los pasos 700-950 como fondos para texto claro, y los pasos 400-600 fallan en ambas direcciones en texto de cuerpo (úsalos solo para texto de visualización grande o elementos de UI no textuales como bordes y divisores). Los azules vivos son particularmente complicados — incluso el paso 500 de un azul brillante a menudo falla AA en blanco, y la insignia lo indicará.

Características clave

• Genera hasta 16 tonos y matices desde un único HEX
• Cuadrícula interactiva con copia al hacer clic
• Controles independientes para variantes claras y oscuras
• Bloques de exportación CSS, JSON y Tailwind listos para pegar
• Generador de color aleatorio para explorar
• Insignias de contraste WCAG en vivo (contra blanco y negro, AA/AAA) en cada muestra
• Diseño responsive y accesible con teclado
• Estilos para modo oscuro y animaciones suaves
• Todos los cálculos se ejecutan localmente en tu navegador