# Generador de matices de color

Genera tonos de un color mezclándolo con gris neutro en pasos uniformes, lo que reduce la saturación sin cambiar el tono. Introduce un color en cualquier formato CSS, elige de 2 a 20 pasos y un espacio de mezcla, y obtén una tabla con valores HEX, RGB, HSL y OKLCH para cada tono, empezando por el color original. Ideal para paletas apagadas, estados desactivados, superficies sutiles y variantes de marca más sobrias.

## Preguntas frecuentes

### ¿Qué es un tono?

Un tono es un color mezclado con gris. Conserva su matiz y se vuelve más apagado, a diferencia de un tinte, que se mezcla con blanco, o una sombra, que se mezcla con negro.

### ¿Qué gris se utiliza?

El gris medio sRGB #808080, rgb(128 128 128). Por eso, los colores claros se oscurecen ligeramente y los oscuros se aclaran un poco al acercarse a ese valor; para mezclar con otro gris, utiliza el Mezclador de colores con el gris que prefieras.

### ¿Cómo se distribuyen los pasos?

Con N pasos, la fila k mezcla el color con (k - 1) / N de gris, así que 10 pasos dan 0%, 10%, 20% y así sucesivamente hasta 90%. La primera fila siempre corresponde al color original, y el gris puro nunca aparece en la lista.

### ¿En qué se diferencia un tono de reducir la saturación HSL?

Reducir la saturación HSL mantiene la luminosidad HSL, mientras que mezclar con gris también acerca la luminosidad al valor medio. Por eso, los tonos parecen el color visto a través de un filtro gris, algo adecuado para fondos apagados y estados desactivados.

### ¿Qué diferencia hay entre mezclar en sRGB y en OKLab?

La mezcla sRGB promedia los valores de los canales codificados con gamma, el enfoque clásico de las cartas de tonos similares a la pintura y Sass mix(). La mezcla en OKLab se realiza en un espacio perceptual, por lo que la cromaticidad disminuye de forma más uniforme en cada paso.

### ¿Qué formatos de entrada puedo usar?

Códigos hexadecimales con o sin #, nombres de color CSS, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color() y cmyk(). Introduzca un color por ejecución.

### ¿Cuántos tonos puedo generar?

Entre 2 y 20 por ejecución, 10 de forma predeterminada. El recuento incluye el color original en la primera fila.

### ¿Qué valores muestra la tabla?

Para cada paso, se muestran la proporción de gris, el código hexadecimal, rgb(), hsl() y oklch() en la sintaxis moderna de CSS. Los canales RGB son números enteros, los porcentajes HSL tienen hasta dos decimales y la luminosidad y cromaticidad OKLCH, hasta cuatro.

### ¿Qué ocurre con los colores transparentes y de amplia gama?

La transparencia de entrada se conserva para cada tono, por lo que los códigos hexadecimales tienen 8 dígitos. Los pasos fuera de la gama se adaptan a sRGB con el algoritmo CSS Color 4 en las columnas HEX, RGB y HSL, mientras que la columna OKLCH conserva el valor sin adaptar.

### ¿Cómo puedo recrear un tono en CSS?

Copia el valor hexadecimal o oklch(), o deja que el navegador lo mezcle con color-mix(in oklab, var(--brand) 70%, #808080) para obtener el tono del 30% con el ajuste OKLab. color-mix() funciona en todos los navegadores principales actuales.

¿Su anuncio aquí?

[Envíenos un correo](mailto:hi@dennn.is?subject=Publicidad%20en%20OneClick%20Pro)

[Anuncio El conjunto de plugins listo para agentes de WordPress.](https://sleekwp.com/?ref=oneclickpro)