Generador de Tintes y Sombras
Genera tintes (más claros) y sombras (más oscuros) desde cualquier color base. Construye una escala de colores completa.
Acerca de esta herramienta
El generador de tintes y sombras crea variantes más claras y oscuras desde cualquier color base. Los tintes se crean mezclando el color base con blanco (añadiendo luminosidad), mientras que las sombras se crean mezclando con negro (reduciendo luminosidad).
La herramienta genera hasta 5 niveles de tintes y 5 de sombras, más el color base original, dándote una paleta de 11 pasos centrada en el tono elegido. Haz clic en cualquier muestra para copiar su código hex.
Cómo usar
- Elige un color base usando el selector de color o escribe un código hex.
- Usa los botones de muestra para probar colores predefinidos rápidamente.
- Ajusta el número de niveles (3–5) para controlar la amplitud de la paleta.
- Haz clic en cualquier muestra para copiar su código hex. Usa Copiar todo para copiar la escala completa.
Casos de uso
Los sistemas de diseño necesitan una escala de colores sistemática para cada color de marca. Los diseñadores UI generan estados hover, activo y deshabilitado desde un único color de acción. Los desarrolladores frontend crean variantes de color consistentes.
Preguntas frecuentes
- Cual es la diferencia entre tinte y sombra? — Un tinte mezcla el color con blanco (mas claro); una sombra mezcla con negro (mas oscuro). Un tono mezcla con gris y no se genera aqui.
- Como se calculan los niveles? — Cada nivel mezcla el color base con blanco o negro en proporciones de 10%, 30%, 50%, 70% y 90%, dando pasos visuales consistentes.
- Puedo obtener variables CSS de esto? — La salida son codigos hex. Puedes pegarlos en tu CSS como --color-500, --color-400, etc.