Generador de tintes y sombras

• Generación instantánea de tintes y sombras: el generador actualiza toda tu paleta con cada cambio de color sin ningún retardo. Haz clic en cualquier muestra para copiar su código HEX al instante, sin botones que pulsar.
• Seguro y 100% privado: toda la generación de tintes y sombras se ejecuta por completo en tu navegador. Tus datos de color nunca se envían a ningún servidor, algo seguro para colores de marca no publicados y sistemas de diseño confidenciales.
• Exporta como variables CSS, configuración de Tailwind o lista HEX: exporta tu paleta generada en tres formatos: propiedades personalizadas CSS (:root), objeto de configuración de Tailwind CSS o una lista HEX simple. Nombre de variable y número de pasos configurables (5, 8, 10 o 12 pasos).
• 100% gratis, sin registro: totalmente gratis, sin cuenta, sin nivel premium, sin límites de uso y sin anuncios que bloqueen la interfaz. Genera tintes y sombras tantas veces como necesites.

• Escalas de color para sistemas de diseño: los ingenieros de sistemas de diseño usan el generador para crear escalas de color completas para bibliotecas de componentes. Exporta directamente como variables CSS o configuración de Tailwind para integrarlo en tu flujo de tokens de diseño.
• Ampliación de la paleta de color de marca: los diseñadores de marca usan el generador para ampliar un único color de marca en una paleta completa de variantes más claras y más oscuras, aportando el rango necesario para fondos, bordes, estados hover y texto.
• Bibliotecas de color de Figma y Sketch: los diseñadores de interfaz usan el generador para crear bibliotecas de color en Figma y Sketch. Copia los códigos HEX de la tabla de muestras y pégalos directamente en los estilos de color de tu herramienta de diseño.
• Sitios de comercio electrónico y marketing: los desarrolladores web usan el generador para crear estados hover, estados activos y variantes de fondo desde un único color de marca, garantizando la coherencia visual en páginas de producto y landings.
• Adaptación de colores para modo oscuro: los desarrolladores que crean temas de modo oscuro usan el generador para encontrar variantes más claras adecuadas de sus colores base para fondos oscuros, asegurando contraste suficiente sin cambiar el tono de marca.
• Colores personalizados de Tailwind CSS: los desarrolladores de Tailwind CSS usan el generador para crear escalas de color personalizadas que siguen la convención de nombres 50-900 de Tailwind. Exporta directamente como objeto de configuración de Tailwind y pégalo en tailwind.config.js.

En teoría del color, un tinte es un color mezclado con blanco, lo que lo hace más claro y menos saturado. Una sombra es un color mezclado con negro, lo que lo hace más oscuro y más saturado. Juntos, tintes y sombras forman una escala de color: un rango de valores desde casi blanco hasta casi negro que comparten el mismo tono que el color base. Las escalas de color son la base de los sistemas de diseño modernos: ofrecen toda la gama de valores necesaria para fondos, bordes, texto, estados hover e indicadores de foco manteniendo la coherencia visual. Nuestro generador de tintes y sombras en el navegador crea estas escalas al instante desde cualquier color base usando interpolación RGB lineal.

1. Introduce tu color base: escribe un valor HEX (p. ej. #3b82f6) o RGB en la entrada de color, o usa el selector de color nativo. También puedes seleccionar un color predefinido para empezar rápido.
2. Elige el número de pasos: selecciona 5, 8, 10 o 12 pasos por lado. Más pasos dan una granularidad más fina para sistemas de diseño complejos; menos pasos van mejor para paletas simples. El generador actualiza la paleta al instante con cada cambio.
3. Copia o exporta: haz clic en cualquier muestra para copiar su código HEX. Usa el panel de exportación para copiar la paleta completa como propiedades personalizadas CSS, un objeto de configuración de Tailwind CSS o una lista HEX simple, con un nombre de variable configurable.

• Fórmula del tinte: cada tinte se calcula interpolando linealmente entre el color base y el blanco (RGB 255, 255, 255). Un tinte con proporción r = base × r + blanco × (1 − r). El tinte más claro tiene el valor r más pequeño (más cercano al blanco); el tinte más oscuro tiene el valor r más grande (más cercano al color base).
• Fórmula de la sombra: cada sombra se calcula interpolando linealmente entre el color base y el negro (RGB 0, 0, 0). Una sombra con proporción r = base × r. La sombra más clara tiene el valor r más grande (más cercano al color base); la sombra más oscura tiene el valor r más pequeño (más cercano al negro).
• Distribución de pasos: los pasos se distribuyen uniformemente entre el color base y el blanco/negro, excluyendo los extremos puros. Esto garantiza que la paleta tenga un espaciado visual consistente entre cada paso.
• Formatos de salida: se ofrecen valores HEX, RGB y HSL para cada muestra. La representación HSL es útil para entender cómo cambia la luminosidad a lo largo de la escala mientras el tono y la saturación permanecen aproximadamente constantes.

Un tinte añade blanco a un color (aumenta la luminosidad y reduce la saturación). Una sombra añade negro a un color (reduce la luminosidad y puede aumentar o reducir la saturación). Un tono añade gris a un color (reduce la saturación sin cambiar la luminosidad de forma tan drástica). Nuestro generador se centra en tintes y sombras, las variantes más necesarias en los sistemas de diseño de interfaz. Para generar tonos, usa la herramienta Mezclador de colores para combinar tu color base con un gris neutro.