Как преобразовать rgba в hex с регулировкой прозрачности?

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

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

rgba(0,129,255,.4)

что-то вроде "светло-голубой"...

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

вопрос:
Как преобразовать rgba в hex с регулировкой прозрачности?

18
colors css hex rgba transparency

2 ответов

это зависит от фона, к которому будет применяться ваш прозрачный цвет. Но если вы знаете цвет фона (например, белый), вы можете рассчитать цвет 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

44

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);
3