Color original
Color original

Tintes y sombras

Un tinte es un color mezclado con blanco, haciéndolo más claro. Una sombra es mezclado con negro, haciéndolo más oscuro. Juntos crean una escala de brillo para un tono, como en Tailwind o Material.

Saturación y temperatura

La saturación muestra la intensidad del color — de gris a vívido. La temperatura desplaza el tono hacia el lado cálido (rojo-amarillo) o frío (azul-verde), manteniendo las demás características.

Para qué sirve

Las variaciones se usan en sistemas de diseño para estados hover y active, sombras y fondos. Sin límites y sin registro.

Preguntas frecuentes
¿Qué son un tinte y una sombra?
Un tinte es un color aclarado con blanco, una sombra es oscurecido con negro. Por ejemplo, para azul #3B82F6: los tintes serán azul claro, las sombras azul oscuro.
¿Cómo funciona técnicamente?
Todas las variaciones se calculan en el espacio HSL. La luminosidad cambia para tintes/sombras, la saturación para variaciones de intensidad, y el tono se desplaza para cambios de temperatura.
¿Se puede exportar el resultado?
Sí. Haz clic en «Copiar como CSS» para obtener propiedades CSS personalizadas para todas las variaciones. O «Copiar todos los HEX» — una lista separada por comas de todos los códigos.
¿Es gratuita esta herramienta?
Sí, completamente gratuito y sin límites. Sin registro.

Más herramientas de color

Selector de colorSube una foto y haz clic en cualquier punto — obtén HEX, RGB, HSL y nombre Paleta de imagenExtrae 5–8 colores dominantes de cualquier imagen Paleta para proyectoGenera N colores con legibilidad de texto garantizada Armonías de colorComplementarias, análogas, triádicas y split-complementarias Generador de degradadosCrea hermosos degradados y copia el código CSS Contraste WCAGVerificación de accesibilidad AA y AAA — gratis Simulador de daltonismoCómo ven los colores personas con protanopía, deuteranopía y otros tipos Convertidor TailwindLa clase Tailwind más cercana para cualquier color HEX Convertidor de colorHEX ↔ RGB ↔ HSL ↔ CMYK al instante, con copia de código Color por nombreEncuentra HEX por nombre — «terracota», «índigo», «azur» Filtro CSS para SVGRecolorea iconos SVG con cualquier color vía CSS sin editor Paletas de coloresPaletas listas por temas — clic en un color para copiar HEX