Generador de tonos de color
Dale un color de marca y construye diez pasos, más claros (tintes) y más oscuros (sombras). La salida viene en la forma 50 · 100 · … · 900 que esperan Tailwind y la mayoría de sistemas de diseño.
🎨 Todo funciona en tu navegador. Sin instalar nada, sin registro.
Para qué sirve cada paso
- · 50~200 Fondos, realces suaves, estados desactivados
- · 400~600 Botones y enlaces: el color de marca en sí
- · 700~900 Estados pulsados y texto sobre fondos oscuros
- La nota a la derecha de cada fila indica si el texto blanco o negro supera el umbral de accesibilidad (4,5:1) sobre ese fondo.
Qué hace esta herramienta
- Diez pasos del 50 al 900
- HEX y HSL en cada paso
- Indica si se lee mejor texto blanco o negro
- Copia el conjunto como variables CSS
Otras herramientas de color
Los colores pueden verse algo distintos según tu pantalla y su perfil de color.