Как преобразовать rgba в прозрачный-шестнадцатеричный?

Мне интересно, есть ли инструмент для преобразования rgba в hex, который может преобразовать видимый цвет rgba, включая прозрачность, в шестнадцатеричное значение.

Скажем, у меня есть это:

rgba(0,129,255,.4)

Какая-то "голубая"...

Я хотел бы знать, есть ли способ получить один и тот же голубой "видимый" цвет в шестнадцатеричном виде, поэтому я не хочу преобразованный #0081ff, а что-то близкое к цвету, видимому на экране.

Вопрос:
Как преобразовать rgba в прозрачный-hex-hex?

ОТВЕТЫ

Ответ 1

Это зависит от фона, к которому будет применен ваш прозрачный цвет. Но если вы знаете цвет фона (например, белый), вы можете рассчитать цвет RGB, полученный в результате цвета RGBA, примененного к конкретному фону.

Это просто взвешенное среднее между цветом и фоном, причем вес является альфа-каналом (от 0 до 1):

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

Для вашей прозрачной светло-голубой rgba(0,129,255,.4) против белого 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

Что дает rgb(153,205,255) или #99CDFF

Ответ 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);