Web UtilitiesGenerador de Tintes y Sombras de Color
Genera tintes, sombras y tonos a partir de cualquier color base. Crea escalas de color estilo Tailwind 50–950, copia variables CSS y construye paletas completas al instante.
hsl(217, 91%, 60%)
210
Color Base
#3B82F6
Propiedades CSS Personalizadas
:root {
--tint-1: #DFEAFD;
--tint-2: #BED6FC;
--tint-3: #9EC1FA;
--tint-4: #7DADF9;
--tint-5: #5D98F7;
--color-base: #3B82F6;
--shade-1: #0B64F4;
--shade-2: #0950C3;
--shade-3: #073C92;
--shade-4: #052861;
--shade-5: #021431;
/* Tones */
--tone-1: #4C87E6;
--tone-2: #5B8BD7;
--tone-3: #6B8EC7;
--tone-4: #7A92B8;
--tone-5: #8A95A8;
}Tintes
#DFEAFD
#BED6FC
#9EC1FA
#7DADF9
#5D98F7
Sombras
Base#3B82F6
#0B64F4
#0950C3
#073C92
#052861
#021431
Tonos
#4C87E6
#5B8BD7
#6B8EC7
#7A92B8
#8A95A8
Haz clic en cualquier muestra para copiar su valor HEX
Herramientas Relacionadas
Acerca del Generador de Tintes y Sombras
Cómo Funciona
- Introduce o selecciona cualquier color base con el selector de color o el campo HEX.
- Elige el número de pasos (tintes y sombras a generar).
- Cambia entre el modo Clásico y el modo Tailwind (paradas 50–950).
- Haz clic en cualquier muestra para copiar su valor HEX al portapapeles.
- Usa Copiar Todo como CSS para obtener la paleta completa como propiedades CSS.
Casos de Uso Comunes
- Construir paletas de color para sistemas de diseño.
- Generar escalas de color compatibles con Tailwind CSS.
- Crear rampas de color accesibles que mantengan la identidad de marca.
- Explorar cómo luce un color de marca en todos los niveles de luminosidad.
- Producir tokens de color para entregas de diseño en Figma o Storybook.
Preguntas Frecuentes
¿Qué es un tinte de color?
Un tinte se crea añadiendo blanco a un color base, haciéndolo más claro y menos saturado. Los tintes conservan el tono original pero aumentan la luminosidad, produciendo variaciones similares a los pasteles, ideales para fondos y acentos sutiles de UI.
¿Qué es una sombra de color?
Una sombra se crea añadiendo negro a un color base, haciéndolo más oscuro. Las sombras mantienen el tono original al reducir la luminosidad y se usan habitualmente para texto, bordes y estados presionados.
¿Qué es un tono de color?
Un tono se crea añadiendo gris a un color base, lo que reduce su saturación sin cambiar significativamente la luminosidad. Los tonos producen variaciones de color más apagadas, ideales para componentes UI neutros.
¿Qué es el modo de paleta estilo Tailwind?
El modo Tailwind genera 11 paradas etiquetadas 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 y 950, imitando la convención de Tailwind CSS para crear familias de color que se integran directamente en tailwind.config.js.
¿Cómo uso las variables CSS generadas?
La herramienta genera un bloque :root { } con propiedades personalizadas CSS para cada color. Cópialas en tu hoja de estilos y referencíalas con var(--tint-1), var(--shade-3), var(--color-500), etc.
¿Cuántos pasos puedo generar?
En el modo Clásico puedes elegir entre 2 y 10 pasos para tintes y sombras. El modo Tailwind siempre produce la escala fija de 11 paradas.
¿Puedo copiar valores de color individuales?
Sí. Haz clic en cualquier muestra para copiar su valor HEX al portapapeles. También puedes usar el botón Copiar todo como CSS para obtener toda la paleta como propiedades CSS en un solo clic.
¿Qué formatos de color admite la herramienta?
Puedes introducir cualquier color HEX de 6 dígitos (p. ej. #3B82F6) en el campo de texto o usar el selector de color del navegador. Todos los valores de salida están en formato HEX.
¿Es accesible la paleta generada?
La herramienta genera colores con espaciado perceptivo, pero el cumplimiento WCAG depende de cómo combinas colores de texto y fondo. Usa la herramienta de Comprobador de Accesibilidad de Color para verificar los ratios de contraste.
¿Cómo es útil esta herramienta para los sistemas de diseño?
Los sistemas de diseño suelen requerir una escala completa de color para cada color de marca. Esta herramienta automatiza ese proceso: introduce tu color de marca una vez y obtén una escala lista para Figma, Style Dictionary o tailwind.config.js.
¿Esta herramienta almacena mis colores?
No. Todos los cálculos de color se realizan en tu navegador con JavaScript. No se envían datos al servidor y nada se almacena entre sesiones.
¿Cuál es la diferencia entre tintes/sombras y un gradiente?
Un gradiente es una transición visual suave entre dos o más colores. Los tintes y sombras son paradas discretas y con nombre dentro de una familia de tonos, usadas como valores de color individuales en tokens de diseño.