Generador de Escala de Tintes y Sombras
Convierte un color de marca en una escala de sistema de diseño 50-900 — diez tintes y sombras con códigos hex, clic para copiar.
735 visitas
Haz clic en una muestra para copiar su hex
De un color a un sistema
Los sistemas de diseño (Tailwind, Material) nunca entregan un único color de marca — entregan una escala de 50 (casi blanco) a 900 (casi negro), con la marca situada alrededor de 500. Los pasos claros (tintes) mezclan la base hacia el blanco; los pasos oscuros (sombras) hacia el negro. Este generador produce las diez paradas estándar con códigos hex y variables CSS; haz clic en cualquier muestra para copiarla.
Cómo se usa la escala: 50-100 para fondos y estados hover, 200-300 para bordes, 500-600 para botones y enlaces, 700-900 para texto sobre fondos claros. Emparejar pasos de la misma escala mantiene la interfaz armoniosa, y los pasos ≥700 sobre ≤100 suelen superar el contraste WCAG — verifica el par exacto con nuestro comprobador de contraste.
Preguntas Frecuentes
¿Por qué mi color vivo se ve descolorido en los tintes claros?
Mezclar hacia el blanco puro reduce la saturación — eso es justo lo que se busca en los fondos. Si quieres tintes más vivos, aumenta la saturación del color base antes de generar.
¿Dónde debería situarse mi color de marca en la escala?
Apunta a 500-600. Si tu color de marca es muy claro u oscuro, colócalo en el paso que coincida con su luminosidad y deja que el generador rellene ambas direcciones.
¿Son los mismos valores que daría Tailwind?
No son idénticos — las paletas de Tailwind están ajustadas a mano por matiz. Esta escala usa una mezcla consistente, predecible para colores de marca personalizados y suficientemente cercana para proyectos reales.
Herramientas Similares
Reportar un Problema
Generador de Escala de Tintes y Sombras