Generador de sombras y tintes de color

Genera sombras y tintes desde cualquier color base

Introduce un color hex y elige cuántos pasos quieres. La herramienta produce dos escalas: las sombras mezclan el color base hacia el negro y los tintes lo mezclan hacia el blanco. Haz clic en cualquier muestra para copiar su valor hex. Las escalas están distribuidas uniformemente, formando una rampa suave y predecible adecuada para sistemas de diseño, propiedades personalizadas de CSS o definiciones de paleta de Tailwind.

Cada muestra muestra su valor hex al pasar el cursor. El color base aparece entre las dos escalas para ver el rango completo de un vistazo. Todo se calcula en el navegador — no se sube nada.

Preguntas frecuentes

¿Cuál es la diferencia entre una sombra y un tinte? Una sombra mezcla el color con negro (más oscuro), mientras que un tinte lo mezcla con blanco (más claro). Juntos crean una escala de luminosidad completa.

¿Puedo usar el resultado en Tailwind? Sí. Asigna los valores hex a las claves de color de Tailwind (50 a 950) asignando los tintes a las claves más claras y las sombras a las más oscuras.