Generador de Tonalidades
Generá tonos más claros (tints) y más oscuros (shades) de cualquier color, listos para copiar en HEX, RGB o HSL. Funciona enteramente en tu navegador: no se envía nada a ningún servidor.
¿Qué son los tints y shades?
Un tint es un color mezclado con blanco, que lo aclara, y un shade es un color mezclado con negro, que lo oscurece. Generarlos en pasos parejos desde un color base te da una escala consistente, como la que usan los design systems para cosas como blue-100 a blue-900, sin elegir cada valor a ojo. Este generador mezcla el color base con blanco y con negro en pasos de 5, 10, 20 o 25 por ciento, lista cada resultado del tint más claro al shade más oscuro y te deja copiarlos en HEX, RGB o HSL.
Ejemplos
Mezclar un color con blanco o negro para obtener los mismos tints y shades en código:
/* color-mix() needs Chrome 111+, Firefox 113+, Safari 16.2+ */
--blue-300: color-mix(in srgb, #2563eb 70%, white);
--blue-700: color-mix(in srgb, #2563eb 70%, black);$tint: mix(white, #2563eb, 30%);
$shade: mix(black, #2563eb, 30%);const mix = (a, b, w) => a.map((c, i) => Math.round(c + (b[i] - c) * w));
mix([37, 99, 235], [255, 255, 255], 0.3); // tint 30%
mix([37, 99, 235], [0, 0, 0], 0.3); // shade 30%def mix(a, b, w):
return tuple(round(c + (d - c) * w) for c, d in zip(a, b))
mix((37, 99, 235), (255, 255, 255), 0.3)Casos de uso
Armar la escala de colores de un design system
Convertí un único color de marca en una rampa completa de claro a oscuro para fondos, bordes, estados hover y texto, todos claramente relacionados entre sí.
Estados hover y active
Elegí un shade uno o dos pasos más oscuro que el color de un botón para los estados hover y presionado, así las interacciones se sienten consistentes en toda la interfaz.
Fondos sutiles
Usá un tint claro de un color de acento para cajas de alerta, filas seleccionadas o secciones destacadas que tienen que seguir siendo legibles detrás del texto.
Gráficos y visualización de datos
Los tints secuenciales de un mismo tono funcionan bien para heatmaps y gráficos apilados donde los valores tienen un orden.