Generador de Tonos y Matices de Color

Construye una escala de nueve pasos a partir de un color base: cuatro matices más claros mezclados hacia blanco, el propio color base y cuatro tonos más oscuros mezclados hacia negro.

Introduce un color HEX de tres o seis dígitos. El color base se normaliza y aparecen ocho muestras de matiz/tono al instante; haz clic en cualquiera para copiar su valor HEX.

Un color base #3b82f6 produce matices al 80%, 60%, 40% y 20% mezclados hacia blanco, y tonos al 20%, 40%, 60% y 80% mezclados hacia negro — nueve muestras en total.

Cada paso interpola linealmente los canales rojo, verde y azul del color base hacia blanco (255, 255, 255) para los matices o hacia negro (0, 0, 0) para los tonos, en el porcentaje indicado, y redondea el resultado.

Esto es interpolación directa de canales sRGB, no una mezcla perceptual HSL, OKLCH ni corregida por gamma, así que pasos porcentuales iguales no siempre se ven igual de espaciados al ojo — algunos pasos pueden parecer un salto mayor que otros.

El conjunto de nueve colores funciona bien como punto de partida para estados hover/activo, bordes, fondos y combinaciones de texto sobre fondo en un sistema de diseño — verifica el contraste por separado antes de usar cualquier par para texto.

La generación ocurre enteramente en tu navegador; el color que introduces no se sube.