Generador de Tintes y Tonos
Genera tintes (más claros) y tonos (más oscuros) de cualquier color hex. Obtén vista previa de muestras de color y copia códigos hex para tu sistema de diseño.
Tints (lighter →)
Tint 1#eff0fe
Tint 2#e0e0fc
Tint 3#d0d1fb
Tint 4#c1c2f9
Tint 5#b1b3f8
Tint 6#a1a3f7
Tint 7#9294f5
Tint 8#8285f4
Tint 9#7375f2
Base
Base#6366f1
(← darker) Shades
Shade 1#595cd9
Shade 2#4f52c1
Shade 3#4547a9
Shade 4#3b3d91
Shade 5#323379
Shade 6#282960
Shade 7#1e1f48
Shade 8#141430
Shade 9#0a0a18
Full scale (click to copy)
Cómo usar Generador de Tintes y Tonos
- 1Ingresa un color hex base o selecciona uno con el selector de color.
- 2Elige la cantidad de tintes y tonos a generar.
- 3Obtén vista previa de las muestras de color de claro a oscuro.
- 4Haz clic en cualquier muestra para copiar su código hex.
ZenovayAnalytics
Convierte tu tráfico en clientes.
- Seguimiento de visitantes en tiempo real
- Privacidad primero, sin aviso de cookies
- Configurado en dos minutos
Herramientas relacionadas
Generador de Degradados CSS
Crea hermosos degradados CSS con un editor visual. Degradados lineales, radiales y cónicos.Generador de Sombra de Caja CSS
Diseña sombras de caja CSS con controles visuales. Ajusta desplazamiento, desenfoque, expansión y color.Generador de Borde Redondeado CSS
Crea valores de borde redondeado personalizados con controles visuales. Vincula o desvincula las esquinas para ajustes rápidos.Área de Juego CSS Flexbox
Aprende y genera diseños CSS Flexbox visualmente. Ajusta dirección, alineación, envoltura y espaciado en tiempo real.Preguntas frecuentes
¿Cuál es la diferencia entre un matiz y una sombra?▾
Un matiz (tint) se crea añadiendo blanco a un color, haciéndolo más claro. Una sombra (shade) se crea añadiendo negro a un color, haciéndolo más oscuro. Un tono se crea añadiendo gris. En el diseño digital, los matices y las sombras se usan para crear escalas de color cohesivas para componentes de la interfaz de usuario — matices más claros para fondos, rango medio para botones y elementos interactivos, sombras más oscuras para texto y bordes.
¿Cómo se calculan los matices y las sombras?▾
Este generador usa interpolación lineal entre el color base y el blanco (para matices) o el negro (para sombras). Cada paso mezcla el color base con blanco o negro en un porcentaje igual. Por ejemplo, con 9 pasos: el matiz 1 es 10% base + 90% blanco, el matiz 5 es 50/50, el matiz 9 es 90% base + 10% blanco.
¿Cómo uso estos colores en CSS?▾
Puede pegar los códigos hexadecimales directamente en CSS, o definirlos como propiedades CSS personalizadas: --color-100: #f5f3ff; --color-500: #7c3aed; --color-900: #1e0a4b; etc. Luego referenciarlos con var(--color-500). Para Tailwind CSS, puede añadir la escala generada a su tailwind.config.js bajo theme.colors. Para tokens de diseño, exporte como objeto JSON para usarlo en Figma, Storybook o herramientas de tokens de diseño.
¿Debo usar HSL en lugar de RGB para las escalas de color?▾
HSL (tono, saturación, luminosidad) a menudo se prefiere para generar escalas perceptualmente uniformes. Ajustar la luminosidad en HSL mientras se mantienen constantes el tono y la saturación produce colores de apariencia consistente. Sin embargo, la interpolación en sRGB (lo que usa esta herramienta) es más sencilla y produce resultados predecibles para el diseño de interfaces. Para espacios de color perceptuales más avanzados, considere OKLCH o LCH que son compatibles con el CSS moderno.
¿Cómo exporto estos colores a Figma?▾
En Figma, puede crear una biblioteca de colores haciendo un marco con rectángulos para cada muestra de color y añadiendo los valores hexadecimales como etiquetas. Luego, clic derecho → Crear componente para cada uno, y publicar en su biblioteca de equipo. Alternativamente, use la exportación de "Variables CSS" y péguelas en un complemento de Figma como Design Tokens o Token Studio.