rojo - opacidad imagen de fondo css

¿Cómo convertir rgba a un hexágono ajustado por transparencia?

Question

Me pregunto si existe una herramienta para convertir rgba en hex , que pueda traducir el color rgba visible, incluida la transparencia en un valor hexadecimal.

Di que tengo esto:

rgba(0,129,255,.4)

Que es una especie de "azul claro" ...

Me gustaría saber si hay una manera de obtener el mismo color "visible" azul claro en hexadecimal, por lo que no quiero el #0081ff convertido sino algo parecido al color visible en la pantalla.

Pregunta:
¿Cómo convertir rgba a un hex de transparencia ajustada?

Answer 1

Depende del fondo al que se aplicará su color transparente. Pero si conoce el color del fondo (por ejemplo, el blanco), puede calcular el color RGB resultante del color RGBA aplicado al fondo específico.

Es solo la media ponderada entre el color y el fondo, siendo el peso el canal alfa (de 0 a 1):

Color = Color * alpha + Bkg * (1 - alpha);

Para su rgba(0,129,255,.4) azul claro transparente rgba(0,129,255,.4) contra rgb(255,255,255) blanco rgb(255,255,255) :

Red   =   0 * 0.4 + 255 * 0.6 = 153
Green = 129 * 0.4 + 255 * 0.6 = 204.6
Blue  = 255 * 0.4 + 255 * 0.6 = 255

Lo que da rgb(153,205,255) o #99CDFF

Answer 2

function hexify(color) {
  var values = color
    .replace(/rgba?/(/, '''')
    .replace(//)/, '''')
    .replace(/[/s+]/g, '''')
    .split('','');
  var a = parseFloat(values[3] || 1),
      r = Math.floor(a * parseInt(values[0]) + (1 - a) * 255),
      g = Math.floor(a * parseInt(values[1]) + (1 - a) * 255),
      b = Math.floor(a * parseInt(values[2]) + (1 - a) * 255);
  return "#" +
    ("0" + r.toString(16)).slice(-2) +
    ("0" + g.toString(16)).slice(-2) +
    ("0" + b.toString(16)).slice(-2);
}

var myHex = hexify(''rgba(57,156,29,0.05)''); // "#f5faf3"

console.log(myHex);