Genera tintes, sombras y tonos a partir de cualquier color base. Perfecto para crear escalas de color, sistemas de diseño y degradados. 100% del lado del cliente — resultados instantáneos.
Versiones más claras (mezclado con blanco)
Versiones más oscuras (mezclado con negro)
Versiones apagadas (mezclado con gris)
Esta herramienta genera variaciones sistemáticas de color a partir de cualquier color base. Los tintes mezclan el color con blanco para crear versiones más claras, las sombras mezclan con negro para versiones más oscuras, y los tonos mezclan con gris para versiones apagadas. Estas escalas de color son esenciales para construir sistemas de diseño consistentes, componentes UI y paletas de color accesibles. Todo el procesamiento ocurre en tu navegador — no se envían datos a ningún servidor.
Los tintes se crean mezclando un color con blanco, haciéndolo más claro. Las sombras se crean mezclando con negro, haciéndolo más oscuro. Los tonos se crean mezclando con gris, lo que reduce la saturación manteniendo la luminosidad relativa. Juntos forman una escala de color completa.
Para la mayoría de los sistemas de diseño, 10 pasos proporcionan suficiente granularidad (por ejemplo, 50–900 en Tailwind CSS). Para proyectos más simples, 5 pasos funcionan bien. Para sistemas muy detallados, puedes usar hasta 20 pasos.
¡Sí! Exporta como variables CSS y referéncialas en tus estilos, o exporta como JSON para integrar en tokens de diseño. Muchos desarrolladores usan escalas de 10 pasos (50, 100, 200, ..., 900) como base para sus sistemas de color.
Las escalas de color se usan para crear componentes UI consistentes — tintes más claros para estados hover y fondos, color base para acciones primarias, sombras más oscuras para estados presionados y texto. Garantizan jerarquía visual y accesibilidad en toda tu aplicación.