Конвертировать RGBA в HEX

учитывая значение цвета css, например:

 rgba(0, 0, 0, 0.86)

Как преобразовать это в шестнадцатеричное значение RGB, которое учитывает Альфа-компонент, предполагая белый фон?

20
colors css hex html rgba

4 ответов

поскольку Альфа-значение ослабляет цвет фона и значение цвета, что-то вроде этого может сделать трюк:

function rgba2rgb(RGB_background, RGBA_color)
{
    var alpha = RGBA_color.a;

    return new Color(
        (1 - alpha) * RGB_background.r + alpha * RGBA_color.r,
        (1 - alpha) * RGB_background.g + alpha * RGBA_color.g,
        (1 - alpha) * RGB_background.b + alpha * RGBA_color.b
    );
}

(попробуйте в интерактивном режиме: http://marcodiiga.github.io/rgba-to-rgb-conversion)

35

предполагая, что значения равны 0...1 на канал. И предполагая, что аббревиатура в вызове метода / функции в вопросе соответствует аргументам, должно работать следующее.

A = 255 * 0.86
R = 255 * 0
G = 255 * 0
B = 255 * 0

Примечание Вы можете изменить, как он округляет здесь, как это может дать неточности в цветах.

на данный момент значения по-прежнему являются значениями с плавающей запятой, но приведение их к байту или символу (в зависимости от языка) теоретически должно работа.

var _A = (byte)219.3
var _R = (byte)0
var _G = (byte)0
var _B = (byte)0

теперь все, что вам нужно сделать, это преобразовать их в шестнадцатеричную строку Каждый, и объединить их (ARGB) и поставить хороший маленький хэш-тег впереди (#)

В C# вы можете сделать что-то похожее на:

var hexString = string.Format("#{0:X2}{1:X2}{2:X2}{3:X2}", _A, _R, _G, _B);

давая окончательный результат чего-то вроде:

#DB000000
1

вы можете конвертировать красный,зеленый и синий по отдельности с помощью .toString(16) а затем объединить результат в случае, если вы просто хотите преобразовать rgb в hex... поскольку вы ищете, чтобы преобразовать rgba в hex, я подумал, что было бы лучше преобразовать rgba в rgb, а затем в hex, как я сделал в следующем Скрипка, который также рассматривал бы background-color на parent div.

0

значение rgba у вас есть: rgba(0, 0, 0, 0.86)

Первый 0 означает красный
Второй 0 означает зеленое
Третий 0 означает синий
и последняя цифра 0.86 означает Альфа/непрозрачность

вот некоторые ссылки для rgb для hex конвертер:

http://www.javascripter.net/faq/rgbtohex.htm
http://www.rgbtohex.net/
http://www.yellowpipe.com/yis/tools/hex-to-rgb/color-converter.php

С Вы цифры 0, 0, 0. Шестнадцатеричный код будет

#000000

Ниже приведен код для низкой непрозрачности с белым фон

HTML-код

<div id="parentDiv">
    <div id="childDiv">

    </div>
</div>

в CSS

#parentDiv
{
height:100px;  /* The property of Child is Inherit */
width:100px;  /* The property of Child is Inherit*/
background-color:#ffffff;
}

#childDiv
{
height:inherit;
width:inherit;
background-color:#000000;
opacity:0.86;
filter:alpha(opacity="86");
}

теперь родительский Div является фоном с 

#ffffff (White color)
-1