Generador de sombras y tintes
Cree una escala de color completa a partir de un color de marca, listo para las variables Tailwind o CSS.
- Tus datos nunca salen de tu dispositivo
- 100 % gratis
- Sin registro
- Funciona sin conexión después de la primera carga
Cómo hacer tonos y matices
- Elige o pega tu color.
- Elija el número de pasos y el método de mezcla.
- Copie cualquier muestra o exporte la escala como código o una imagen.
Acerca de Tonos y matices de color
Haga una escala de color 50–950 completa de un color, además de tintes, tonos y tonos en cualquier número de pasos.
Todo funciona en su navegador, por lo que es instantáneo y privado. Sus colores y configuraciones recientes se recuerdan en este dispositivo, y la barra de direcciones mantiene su color para que pueda compartirlo o marcarlo.
Ideal para
- Sistemas de diseño y temas Tailwind
- Desplazamiento y estados activos para los botones
- Fondos y bordes que coinciden con el color de una marca
Consejo: Utilice los pasos 50–100 para fondos y 700–900 para texto en fondos claros.
Preguntas frecuentes
¿Cuál es la diferencia entre tintes, tonos y tonalidades?
Un tinte es el color mezclado con blanco, un tono se mezcla con negro y un tono se mezcla con gris.
¿Cómo se hace la escala 50-950?
Los pasos de ligereza se establecen en OKLCH, un espacio de color perceptual, por lo que los saltos se ven pares; el croma se estrecha hacia pasos muy claros y muy oscuros para permanecer en gama. Tu color se mantiene en su paso más cercano.
¿Puedo usarlo con Tailwind CSS?
Sí — copie la configuración de Tailwind v3 o el bloque theme de Tailwind v4, y utilice clases como bg-primary-500.
¿Qué tono debo usar para el texto?
Por lo general, 700–900 en un fondo claro y 50–200 en uno oscuro. Compruebe el par con el comprobador de contraste antes de usarlo.
¿Por qué se hace la escala en OKLCH?
OKLCH cambia la luminosidad de manera uniforme, por lo que cada paso se ve igual de diferente al siguiente, y los colores no cambian de tono a medida que se oscurecen.