Generador de tintes y sombras
Elige un color de partida y consigue al instante 10 variaciones más claras hacia el blanco (tintes) y 10 más oscuras hacia el negro (sombras). Haz clic en cualquier muestra para copiar su código hex.
☀️ Tintes — hacia el blanco
🌑 Sombras — hacia el negro
Por qué los tintes y las sombras importan en un sistema de diseño
Un solo color nunca basta para construir una interfaz: necesitas sus variaciones. Los tintes (el color mezclado con blanco) funcionan bien para fondos, etiquetas, estados hover y superficies suaves; las sombras (el color mezclado con negro) son ideales para textos, bordes, iconos y estados activos que necesitan un contraste sólido. Es la misma idea que hay detrás de las escalas numeradas 50–900 de Tailwind CSS y Material Design: con una única escala coherente dejas de inventar grises y tonos raros al azar en cada pantalla.
Cómo se calculan las variaciones
Cada paso mezcla tu color de partida con blanco o con negro en cantidades crecientes: la primera muestra contiene alrededor de un 9 % de blanco (o de negro) y la última cerca de un 91 %. La mezcla se hace sobre los canales RGB —el método más habitual en las herramientas de diseño—, así que obtienes una escala uniforme y predecible con códigos hex listos para pegar en tu CSS, en Figma o en las variables de tu sistema de diseño.