Generador de sombras y tintes
Variaciones más claras y más oscuras de cualquier color base
Añade un color arriba para generar sombras y tintes
Admite #RGB y #RRGGBB: puedes introducir varios colores a la vez
Cómo funciona el generador de sombras y tintes
Crea una escala de color completa a partir de cualquier color base: tintes más claros y sombras más oscuras para sistemas de diseño y desarrollo de interfaces.
Tintes (más claros)
Genera variaciones cada vez más claras mezclando tu color base con blanco. Perfectas para fondos, estados hover y superficies sutiles de la interfaz.
Sombras (más oscuras)
Crea variaciones más profundas mezclando con negro. Úsalas para texto sobre fondos de color, estados activos y alternativas para el modo oscuro.
Pasos ajustables
Controla el número de pasos de cada escala: 5 variaciones rápidas o 20 incrementos finos para sistemas de tokens de diseño detallados.
Copia y comparte
Copia cualquier valor en HEX, RGB o HSL. Comparte la escala completa con un enlace para que tus colaboradores vean exactamente el mismo conjunto de colores.
Preguntas frecuentes
Una sombra es un color mezclado con negro, por lo que es más oscuro. Un tinte es un color mezclado con blanco, por lo que es más claro. Juntos forman una escala completa que va del tinte más claro a la sombra más profunda de cualquier color base.
Los sistemas de diseño usan escalas de color numeradas (50, 100, 200... 900) para que los colores se apliquen igual en todo el producto. Los valores más claros sirven para fondos y bordes, los intermedios para iconos y texto secundario, y los oscuros para el texto principal y los énfasis.
Sí. Introduce cualquier color en formato HEX, RGB o HSL como base y el generador creará a partir de él la escala completa de tintes y sombras. También puedes elegir el color base visualmente con el selector de color.
La opacidad afecta a todo el elemento, incluidos el texto y los bordes, y el resultado depende del fondo que haya detrás. Los tintes son colores sólidos que se ven igual sobre cualquier fondo: son más predecibles y accesibles que la transparencia.