Generador de Tonos de Color
Genera tintes y sombras para cualquier color. Elige un color base y el número de tonos, obtén valores HEX, RGB y HSL. Gratis, 100% en tu navegador.
Referencia
¿Qué son tintes y sombras?
En teoría del color, un tinte es cualquier color mezclado con blanco (haciéndolo más claro), y una sombra es cualquier color mezclado con negro (haciéndolo más oscuro). Juntos, forman una paleta monocromática — variaciones de un solo tono a diferentes niveles de luminosidad. Esta herramienta genera una escala completa de blanco a negro pasando por tu color base, dándote una rampa de colores lista para usar en diseño y desarrollo.
Casos de uso para tonos de color
Sistemas de diseño — genera una escala de 9 o 11 pasos para un color de marca, siguiendo el patrón usado por Tailwind CSS (50–950), Material Design y la mayoría de los sistemas de diseño modernos. Estados de componentes UI — usa tintes más claros para fondos y estados hover, el color base para acciones principales y sombras más oscuras para texto, bordes y estados activos. Visualización de datos — crea escalas de color secuenciales de claro a oscuro para mapas de coropletas, mapas de calor y gráficos donde la intensidad representa magnitud. Accesibilidad — encuentra pares de tonos que cumplan los requisitos de contraste WCAG (4,5:1 para texto normal, 3:1 para texto grande).
Cómo se generan los tonos
Los tonos se generan interpolando linealmente en espacio RGB desde blanco (#FFFFFF) a través del color base hasta negro (#000000). Para N tonos, el color base aparece en el punto medio de la escala. Cada paso se mezcla uniformemente, produciendo una progresión de luminosidad consistente. La salida está disponible en formatos HEX, RGB y HSL — copia valores individuales o la paleta completa de una vez.
Privacidad
Toda la generación de colores se ejecuta 100% en tu navegador. No se envían datos a ningún servidor.