# Generador de tonos oscuros de color

Genere tonos más oscuros de un color mezclándolo con negro en pasos iguales. Introduzca un color en cualquier formato CSS, elija de 2 a 20 pasos y un espacio de mezcla, y obtenga una tabla con valores HEX, RGB, HSL y OKLCH para cada tono, empezando por el color original. La mezcla en sRGB coincide con las herramientas clásicas de tonos y Sass, mientras que OKLab ofrece pasos perceptualmente uniformes. Ideal para crear escalas de color UI.

## Preguntas frecuentes

### ¿Qué es un tono oscuro?

Un tono oscuro es un color mezclado con negro. Conserva su tono y se oscurece, a diferencia de un tinte, que se mezcla con blanco, o un matiz, que se mezcla con gris.

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

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

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

La mezcla en sRGB promedia los valores de canal codificados con gamma, que es lo que hacen Sass mix() con negro y la mayoría de los generadores de tonos clásicos. La mezcla en OKLab se realiza en un espacio perceptual, por lo que los pasos parecen más uniformes en luminosidad y los tonos más oscuros conservan mejor su color.

### ¿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 oscuros 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, la proporción de negro, el código hexadecimal, rgb(), hsl() y oklch() en la sintaxis moderna de CSS. Los canales RGB son números enteros, los porcentajes de HSL tienen hasta dos decimales, y la luminosidad y el croma de OKLCH, hasta cuatro.

### ¿Qué ocurre con los colores transparentes?

El alfa de la entrada se conserva en cada tono oscuro, porque el negro se mezcla con el mismo valor alfa. Los códigos hexadecimales tienen entonces 8 dígitos y las funciones CSS terminan con el alfa después de una barra.

### ¿Qué ocurre con los colores fuera de sRGB?

La mezcla usa el color completo, pero HEX, RGB y HSL solo pueden mostrar sRGB, por lo que los pasos fuera de gama se convierten a sRGB con el algoritmo CSS Color 4 en esas columnas. La columna OKLCH conserva el valor sin convertir.

### ¿Cómo uso los tonos oscuros en CSS?

Copie los valores hexadecimales o de oklch() en propiedades personalizadas como --brand-600 y --brand-700. Para hacer la mezcla en el navegador, color-mix(in oklab, var(--brand) 80%, black) produce el mismo tono al 20 % que la opción OKLab.

### ¿Los tonos oscuros son accesibles automáticamente?

No. Compruebe el contraste del texto con cada tono oscuro, porque uno que parezca oscuro aún puede no alcanzar 4.5:1 sobre otro color oscuro o sobre texto de color.

¿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)