Generador de Tonos y Sombras
Genera automáticamente los tonos más claros y las sombras más oscuras de cualquier color, con su código HEX.
Cómo generar tonos y sombras de un color
Elige un color base
Selecciona el color de partida con el selector visual o escribe su código HEX.
Consulta los tonos y sombras
Verás automáticamente 5 tonos más claros (tintas) y 5 más oscuros (sombras) generados a partir de tu color.
Copia el HEX que necesites
Haz clic en cualquier swatch para copiar su código HEX al portapapeles.
Preguntas frecuentes sobre el generador de tonos y sombras
Tener las variantes más claras y oscuras de un color es imprescindible para crear una paleta de diseño coherente (por ejemplo, para estados hover, fondos o bordes). Esta herramienta las calcula automáticamente.
¿Qué diferencia hay entre un tono (tint) y una sombra (shade)?
+
Un tono se obtiene mezclando el color con blanco (aclarándolo) y una sombra mezclándolo con negro (oscureciéndolo).
¿Cuántas variantes genera?
+
Genera 5 tonos más claros y 5 sombras más oscuras a partir de tu color base, 10 en total.
¿Puedo copiar los códigos?
+
Sí, haz clic en cualquier color de la lista para copiar su código HEX.
¿Sirve para crear una paleta de diseño tipo Tailwind?
+
Sí, es exactamente el mismo concepto que las escalas de color 50-900 que usan muchos sistemas de diseño.
¿Es gratis?
+
Sí, esta herramienta es completamente gratuita.
¿Se sube mi color a algún servidor?
+
No, todo el cálculo se hace directamente en tu navegador.
Colores
Conversor de colores (HEX, RGB, HSL, CMYK)
Convierte cualquier color entre HEX, RGB, HSL y CMYK al instante, con vista previa en vivo y el nombre de color más cercano.
Generador de paletas de colores
Crea paletas de 5 colores armoniosas (complementarias, análogas, triádicas o monocromáticas) a partir de un color base.
Generador de gradientes CSS
Crea degradados lineales o radiales con hasta 4 colores y copia el código CSS listo para usar.
Comprobador de contraste WCAG
Comprueba si la combinación de color de texto y fondo cumple los niveles de accesibilidad AA y AAA.
Color aleatorio
Genera un color aleatorio con un clic y descubre su nombre, su código HEX/RGB/HSL y colores similares.
Selector de color (cuentagotas)
Elige cualquier color de tu pantalla con la herramienta cuentagotas del navegador, o usa el selector clásico.
Simulador de daltonismo
Sube una imagen y comprueba cómo la verían personas con protanopia, deuteranopia o tritanopia.
Generador de Gradientes Mesh
Crea fondos con gradientes mesh (manchas de color difuminadas) y descárgalos en PNG o copia el código CSS.
Mezclador de Colores
Mezcla dos colores y descubre los tonos intermedios paso a paso, con su código HEX.
Rueda de Colores (Armonías)
Elige un color en la rueda y descubre sus combinaciones armoniosas: complementarios, análogos, triádicos y más.
Extractor de Paleta desde Imagen
Sube una imagen y extrae automáticamente sus colores dominantes en una paleta, con el código HEX de cada uno.
Color Promedio de una Imagen
Sube una imagen y calcula al instante su color promedio, con su código HEX, RGB y HSL.
Explora los colores por familia
Más de 469 colores con nombre, con su código HEX, RGB, HSL y CMYK, organizados en 12 familias de tonos.
