Jak przekonwertować rgba na hex dostosowany do przezroczystości?

Question

Zastanawiam się, czy istnieje narzędzie do konwersji rgba na hex, które może przetłumaczyć widoczny kolor rgba wraz z przezroczystością na wartość szesnastkową.

Say mam to:

rgba(0,129,255,.4) 

Która jest swego rodzaju "light blue" ...

chciałbym wiedzieć, czy istnieje sposób, aby uzyskać ten sam jasnoniebieski „widoczny "kolor na hexie, więc nie chcę przekonwertowanego #0081ff, ale coś zbliżonego do koloru widocznego na ekranie.

Pytanie:
Jak przekonwertować rgba na heksadecymalny?

Answer 1

To zależy od tła, do którego zostanie zastosowany przezroczysty kolor. Ale jeśli znasz kolor tła (np. Biały), możesz obliczyć kolor RGB wynikający z koloru RGBA zastosowanego do określonego tła.

To tylko średnia ważona pomiędzy kolorem a tłem, ciężar bycia kanału alfa (od 0 do 1):

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

Dla Twojej przejrzystego światła niebieskiego rgba(0,129,255,.4) białym 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 

Który daje rgb(153,205,255) lub #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);