Oscurecer color

Qué hace Oscurecer color

Oscurecé un color HEX, RGB, HSV o HSL reduciendo su luminosidad hacia el negro por un porcentaje que elegís.

El color se interpreta como RGB, se mezcla con negro y se muestran los valores actualizados en los formatos HEX, RGB, HSV y HSL.

Ejemplo práctico

Color inicial: #3B82F6 (un azul)

Oscurecimiento: 20%

Color final: #2F68C5, un azul más oscuro.

El cálculo no cambia el matiz ni la saturación de forma directa: cada canal RGB se multiplica por (1 - porcentaje/100) y se redondea a un byte.

Cómo se calcula

La fórmula de oscurecimiento es una mezcla hacia negro por canal:

• canal_salida = canal_original × (1 - porcentaje/100)
• El resultado se redondea al entero más cercano de 0 a 255.
• Con 0% el color queda igual.
• Con 100% el resultado es #000000 (negro).
• Los porcentajes fuera de 0 a 100 se limitan y los valores no numéricos se ignoran.

Como los canales son enteros, una conversión de nuevo al mismo formato puede variar en una unidad.

Limitaciones y usos frecuentes

Este oscurecedor trabaja con un solo color y no retiene transparencia. Tampoco verifica si el color final tiene contraste suficiente sobre un fondo; siempre revisá el par de colores de primer plano y fondo en tu diseño.

¿Por qué el color oscurecido no parece exactamente el que esperaba?

HEX y RGB usan canales enteros, mientras que HSL y HSV suelen requerir conversiones decimales. Al redondear, el color puede diferir en una unidad por canal al pasar de un formato a otro.

¿Qué ocurre si uso un porcentaje muy alto?

A partir de 100% el color se vuelve negro y los valores de cada canal se reducen tanto que los colores tienden a parecerse. Para un oscurecimiento suave usá un porcentaje bajo, como 10% o 20%.

¿El resultado conserva transparencia?

No. Esta herramienta trabaja con un color opaco y no conserva ni agrega canal alfa. Si tu aplicación necesita transparencia, aplicá el valor oscurecido junto con el nivel de opacidad que corresponda fuera de esta herramienta.

Lista de verificación antes de usar el color

• Confirmá que el formato copiado (HEX, RGB, HSV o HSL) es el que acepta tu editor o hoja de estilos.
• Comprobá el resultado en tu pantalla y con la vista previa.
• Verificá el contraste entre el color de texto oscurecido y su fondo.
• Ajustá el porcentaje hasta que el matiz y la legibilidad sean correctos.
• Copiá el valor final y probalo en el contexto real de tu diseño.