EN
PT
ES
Generador de Tintes, Tonos y Sombras
Genera diez tintes más claros, diez sombras más oscuras y diez tonos mezclados con gris a partir de cualquier color base. Haz clic en una muestra para copiar su hex.
Tintes, tonos y sombras — ¿cuál es la diferencia?
Los tres son derivaciones del color base, pero lo empujan en direcciones distintas. Un tinte es el color base mezclado con blanco, generando una versión más clara y suave — pensar pastel. Una sombra es el color base mezclado con negro, generando una versión más oscura y dramática. Un tono es el color base mezclado con gris, bajando saturación e intensidad sin comprometerse con más claro u oscuro — útil para paletas sobrias y sofisticadas. Juntos forman un vocabulario completo para construir escalas monocromáticas.
Cómo usar este generador
Elige un color base o pega un hex. La página genera diez tintes igualmente espaciados (filas que se aclaran), diez tonos (filas que se vuelven más sobrias) y diez sombras (filas que se oscurecen). El porcentaje en cada muestra es la cantidad mezclada con el color objetivo (blanco, gris o negro). Haz clic en una muestra para copiar su hex — útil para llenar una tabla de design tokens o un config de Tailwind.
Construyendo escalas que funcionan en producción
No publiques las 30 muestras — los diseñadores rara vez necesitan tanta granularidad. Elige 5-7 pasos bien espaciados y nómbralos como una escala tipográfica (50, 100, 200... 900) para que los desarrolladores predigan dónde caerá cada nuevo slot. Combina tintes y sombras para fondos y énfasis; recurre a tonos cuando necesites acentos sobrios que no peleen con el color de marca. Siempre verifica el contraste contra la superficie donde los usarás — los tintes claros suelen reprobar WCAG contra superficies blancas, y las sombras oscuras reprueban contra negras.
Cómo se calcula cada variante
Cada salida es una interpolación lineal en espacio sRGB: tinte(c, t) = mix(c, blanco, t), sombra(c, t) = mix(c, negro, t), tono(c, t) = mix(c, gris, t), donde mix(a, b, t) = a·(1−t) + b·t aplicado por canal. Tomamos once valores de t igualmente espaciados de 1/11 a 10/11, dejando el color base fuera de la tira — su posición queda implícita entre el tinte más fuerte y la sombra más fuerte.
Cuándo usar cada uno
Los tintes son la opción correcta para fondos de hover, callouts suaves e ilustraciones pastel — calientan el layout y transmiten calma. Las sombras pertenecen a estados activos, encabezados profundos y áreas de énfasis — proyectan gravedad y peso. Los tonos son el arma secreta para diseño editorial, sitios de museo y cualquier paleta que deba sentirse mesurada en lugar de vibrante; conectan marca y neutro sin aplanar a ninguno.