Generador de tonos y matices de color online
Genera los matices claros y oscuros de un color para tu paleta, en tu navegador.
Tints (lighter)
#57ff37#74ff5b#92ff7e#b0ffa1#ceffc4#ebffe8Base
#39ff14Shades (darker)
#061a02#0e4005#176608#1f8c0b#28b30e#30d911Tints = mixed toward white, shades = mixed toward black.
🔒 100 % en el cliente — no se envía ningún dato
Genera al instante una paleta de matices más claros y tonos más oscuros a partir de un solo color. Perfecto para crear una escala coherente (50 a 900) para tus design systems e interfaces. La herramienta se ejecuta 100% en tu navegador, así que ningún color se envía nunca a la red.
What is it for?
- ▸ Crear una escala de color coherente para un design system
- ▸ Obtener las variantes hover, active y disabled de un botón
- ▸ Generar fondos claros accesibles y texto oscuro a partir de un color de marca
- ▸ Ampliar un color de Tailwind o una variable CSS a diez pasos
FAQ
¿Cuál es la diferencia entre un matiz (tint) y un tono (shade)?
Un matiz se crea añadiendo blanco a un color para aclararlo, mientras que un tono se produce añadiendo negro para oscurecerlo.
¿Cómo genero una paleta a partir de un solo color?
Introduce tu color en hex, RGB o HSL, y la herramienta calcula automáticamente una serie de tonos más claros y más oscuros lista para copiar.
¿Son estos colores compatibles con Tailwind CSS?
Sí, la escala generada sigue la lógica de 50 a 900 que usa Tailwind, así que puedes integrarla directamente en la configuración de tu tema.