Преобразование RGBA в HEX

Задано значение цвета css, например: 

 rgba(0, 0, 0, 0.86)

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

4 20
hex html css colors 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, которое вы имеете, является: ргба(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