Since alpha value both attenuates the background color and the color value, something like this could do the trick:

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

(Try it interactively: https://marcodiiga.github.io/rgba-to-rgb-conversion)

Answer from Marco A. on Stack Overflow
🌐
SimpleCSS
simplecss.eu › rgbatohex.html
RGBA to HEX Converter - Simple CSS Media Query Generator
Use our simple tool below to convert your RGBA (R, G, B, A) color to a Hex Color CSS code.
Discussions

html - Convert RGBA to HEX - Stack Overflow
Given a css color value like: rgba(0, 0, 0, 0.86) How do I convert that to a RGB hex value that takes the alpha component into account, assuming a white background? More on stackoverflow.com
🌐 stackoverflow.com
css - How to convert RGBA to Hex color code using javascript - Stack Overflow
I tried to convert rgba to hex color code, but unable to covert opacity value remaining color I able to convert, Below is my code var colorcode = "rgba(0, 0, 0, 0.74)"; var finalCode = rg... More on stackoverflow.com
🌐 stackoverflow.com
nuxt.js - Sass mistakenly converts rgba function to hex - Stack Overflow
But something is still wrong because the element is not transparent (it is if I replace the generated hex code with the rgba function call in the generated CSS) ... use string interpolation if you want the native functon instead of the sass function: background-color: #{'rgba(0, 0, 0, 0.87)'}; More on stackoverflow.com
🌐 stackoverflow.com
RGBA to Hex?
EDIT: Read the comment below for some information from u/StoneCypher that I didn't know when I posted this! Hey! Just a couple of things you might find interesting. 1 - While the old syntaxes will always work, as of the CSS Color Level 4 spec, the recommended syntax going forward is one of the following: rgb(0, 120, 212, 0.06) rgb(0 120 212 / 0.06) It was decided that there shouldn't be separate functions for adding an alpha channel, it should all just be a part of the same function. 2 - HSL is way more user-friendly than RGB. Sometimes people disagree, but I say those people just haven't tried it enough! HSL stands for Hue Saturation Lightness. Hue is on a 360 degree scale (0 and 360 are both red, 120 is green, 240 is blue). Saturation (how colorful it is) goes from 0% - 100%. Lightness goes from black (0%) to white (100%). So the equivalent of #FF0000 or rgb(255 0 0) is hsl(0 100% 50%). Once you sort of learn where the hues are in that range of 0-360, you can then just plug in how saturated and how light/dark you want it, and tweak it a bit from there. Similarly, you can do hsl(206 100% 42% / 0.06%). More on reddit.com
🌐 r/css
19
8
April 7, 2021
🌐
Qconv
qconv.com › home page › rgba → hex
Convert RGBA to ▷ HEX - Colors to qConv
HEX #0000007F · RGBA 76 78 100 0.87 · HEX #4C4E64DD · RGBA 0 0 0 .15 · HEX #00000026 · If you want to convert a color with transparency from web or UI design into a standard color code, you can convert RGBA to Hexadecimal.
🌐
10015
10015.io › tools › rgba-to-hex-converter
RGBA to HEX Converter Online | 10015 Tools
For the example in the image, if you convert each r, g, b number to hexademcimal, 0 => 00, 82 => 52, 204 => cc, you will get the HEX code. Since alpha opacity is 1, HEX color have 6 digits.
🌐
RGB.to
rgb.to › rgb › 0,0,87
RGB color (0, 0, 87) to Hex, Pantone, RAL, HSL, HSV, HSB, JSON. Get color scheme.
RGB color (0, 0, 87) to Hex, Pantone, RAL, HSL and HSB formats. Convert it to JSON format and generate color schemes for your design.
🌐
Coding
coding.tools › rgba-to-hex
RGBA to Hex Converter Online Tool - Coding.Tools
Wikipedia (RGBA color space): https://en.wikipedia.org/wiki/RGBA_color_space · import re def rgb_to_hex(rgb_color): rgb_color = re.search('\(.*\)', rgb_color).group(0).replace(' ', '').lstrip('(').rstrip(')') [r, g, b] = [int(x) for x in rgb_color.split(',')] # check if in range 0~255 assert 0 <= r <= 255 assert 0 <= g <= 255 assert 0 <= b <= 255 r = hex(r).lstrip('0x') g = hex(g).lstrip('0x') b = hex(b).lstrip('0x') # re-write '7' to '07' r = (2 - len(r)) * '0' + r g = (2 - len(g)) * '0' + g b = (2 - len(b)) * '0' + b hex_color = '#' + r + g + b return hex_color rgb_input = 'rgb(7,110,190)' hex_output = rgb_to_hex(rgb_input) print('Hex color result is:{0}'.format(hex_output)) ------------------- Hex color result is:#076ebe
Find elsewhere
Top answer
1 of 10
33

Since the alpha channel in your rgba() notation is expressed as a 0 ~ 1 value, you need to multiply it by 255 before trying to convert it to its HEX form:

var colorcode = "rgba(0, 0, 0, 0.74)";

var finalCode = rgba2hex(colorcode)

function rgba2hex(orig) {
  var a, isPercent,
    rgb = orig.replace(/\s/g, '').match(/^rgba?\((\d+),(\d+),(\d+),?([^,\s)]+)?/i),
    alpha = (rgb && rgb[4] || "").trim(),
    hex = rgb ?
    (rgb[1] | 1 << 8).toString(16).slice(1) +
    (rgb[2] | 1 << 8).toString(16).slice(1) +
    (rgb[3] | 1 << 8).toString(16).slice(1) : orig;

  if (alpha !== "") {
    a = alpha;
  } else {
    a = 01;
  }
  // multiply before convert to HEX
  a = ((a * 255) | 1 << 8).toString(16).slice(1)
  hex = hex + a;

  return hex;
}

function test(colorcode) {
  console.log(colorcode, rgba2hex(colorcode));
}

test("rgba(0, 0, 0, 0.74)");
test("rgba(0, 0, 0, 1)");
test("rgba(0, 0, 0, 0)");
test("rgba(0, 255, 0, 0.5)");

But note that this is just one of the rgba notation, and that it will e.g fail with percent based notation.
Note also that all browsers do not support RGBA HEX notation, so you might prefer an other method to convert your values depending on what you want to do with it.

2 of 10
11

Try this:

  • ✓ Works with alpha rgba(255, 255, 255, 0) => #ffffff00
  • ✓ Works with single digits rgba(0, 0, 0, 0) => #00000000
  • ✓ Works with RGB as well rgb(124, 255, 3) => #7cff03
  • ✓ You can slice alpha channel away rgba(255, 255, 255, 0) => #ffffff

function RGBAToHexA(rgba, forceRemoveAlpha = false) {
  return "#" + rgba.replace(/^rgba?\(|\s+|\)$/g, '') // Get's rgba / rgb string values
    .split(',') // splits them at ","
    .filter((string, index) => !forceRemoveAlpha || index !== 3)
    .map(string => parseFloat(string)) // Converts them to numbers
    .map((number, index) => index === 3 ? Math.round(number * 255) : number) // Converts alpha to 255 number
    .map(number => number.toString(16)) // Converts numbers to hex
    .map(string => string.length === 1 ? "0" + string : string) // Adds 0 when length of one number is 1
    .join("") // Puts the array to togehter to a string
}

//
// Only tests below! Click "Run code snippet" to see results
//

// RGBA with Alpha value
expect(RGBAToHexA("rgba(255, 255, 255, 0)"), "#ffffff00")
expect(RGBAToHexA("rgba(0, 0, 0, 0)"), "#00000000")
expect(RGBAToHexA("rgba(124, 255, 3, 0.5)"), "#7cff0380")
expect(RGBAToHexA("rgba(124, 255, 3, 1)"), "#7cff03ff")

// RGB value 
expect(RGBAToHexA("rgba(255, 255, 255)"), "#ffffff")
expect(RGBAToHexA("rgba(0, 0, 0)"), "#000000")
expect(RGBAToHexA("rgba(124, 255, 3)"), "#7cff03")

// RGBA without Alpha value
expect(RGBAToHexA("rgba(255, 255, 255, 0)", true), "#ffffff")
expect(RGBAToHexA("rgba(0, 0, 0, 0)", true), "#000000")
expect(RGBAToHexA("rgba(124, 255, 3, 0.5)", true), "#7cff03")
expect(RGBAToHexA("rgba(124, 255, 3, 1)", true), "#7cff03")

function expect(result, expectation) {
  console.log(result === expectation ? "✓" : "X", result, expectation)
}

Code is built based on:

  • https://css-tricks.com/converting-color-spaces-in-javascript/
🌐
Stack Overflow
stackoverflow.com › questions › 73462090 › sass-mistakenly-converts-rgba-function-to-hex
nuxt.js - Sass mistakenly converts rgba function to hex - Stack Overflow
But something is still wrong because ... interpolation if you want the native functon instead of the sass function: background-color: #{'rgba(0, 0, 0, 0.87)'};...
🌐
OpenReplay
openreplay.com › tools › rgba-to-hex
RGBA to HEX Converter
Convert RGBA color values to hexadecimal format with alpha channel support.
🌐
Hexcalculator
hexcalculator.org › rgba-to-hex
RGBA to Hex Converter
2 weeks ago - So, the hex output is #043D3B1A. ... The converter instantly enables designers and developers to translate easy-to-understand RGBA values into hexadecimal codes for consistent web styling and graphic work.
🌐
Reddit
reddit.com › r/css › rgba to hex?
r/css on Reddit: RGBA to Hex?
April 7, 2021 -

Is it possible to convert a RGBA to Hex? I want a specific color, but I also want to add transparency to it. The color I want is: "background-color: rgba(0, 120, 212, 0.06);" , but I need to convert it to hex. I know the hex for the specific color is #0078D4, but this does not add the transparency that I need.

Top answer
1 of 7
7
EDIT: Read the comment below for some information from u/StoneCypher that I didn't know when I posted this! Hey! Just a couple of things you might find interesting. 1 - While the old syntaxes will always work, as of the CSS Color Level 4 spec, the recommended syntax going forward is one of the following: rgb(0, 120, 212, 0.06) rgb(0 120 212 / 0.06) It was decided that there shouldn't be separate functions for adding an alpha channel, it should all just be a part of the same function. 2 - HSL is way more user-friendly than RGB. Sometimes people disagree, but I say those people just haven't tried it enough! HSL stands for Hue Saturation Lightness. Hue is on a 360 degree scale (0 and 360 are both red, 120 is green, 240 is blue). Saturation (how colorful it is) goes from 0% - 100%. Lightness goes from black (0%) to white (100%). So the equivalent of #FF0000 or rgb(255 0 0) is hsl(0 100% 50%). Once you sort of learn where the hues are in that range of 0-360, you can then just plug in how saturated and how light/dark you want it, and tweak it a bit from there. Similarly, you can do hsl(206 100% 42% / 0.06%).
2 of 7
6
In the chrome dev tools (elements tab, styles panel), if you find any color and click the square representing that color a color picker will come up. Click the eyedropper and your cursor will turn to a magnifying circle with a grid. If you mouse around the page you can get the raw value of any pixel. If a spot is transparent (ie background color has alpha) you'll get the combination of the color and it's background. So in reddit right now this post is in a modal (on desktop at least). The modal has a semitransparent backdrop and I can use the color picker to find out what color comes from the mask+anything underneath. (I realize your question was already answered, but thought this tip might be useful in general)
🌐
GitHub
gist.github.com › njvack › 02ad8efcb0d552b0230d
Color to hex and rgba converter · GitHub
color_convert.to_hex(color) # Converts color to a hex-based RGB triple; to_hex('red') returns '#ff0000' color_convert.to_rgba(color) # Converts color to an rgba() string; to_rgba('red') returns 'rgba(255,0,0,1)' And you'll probably never want it, but you can also color_convert.to_rgba_array(color) # Converts color to a 4-element Uint8ClampedArray: [R, G, B, A]
🌐
Progosling
progosling.com › en › color-converters › rgba-to-hexa
RGBA to HEXA Converter | Progosling | Progosling
The idea is simple: first make sure the RGBA values sit inside their valid ranges, then turn each channel into a two digit hexadecimal fragment, and finally concatenate the four fragments into a single HEXA string.
🌐
Rgbatohex
rgbatohex.com
RGBA to HEX Color Converter | Free Online Tool
HEX Equivalent: Our RGBA to HEX converter transforms this to #FF8000CC · Conversion Formula: Each RGBA component (0-255) converts to HEX (00-FF)
🌐
W3Schools
w3schools.com › css › css3_colors.asp
W3Schools.com
CSS supports 140+ color names, HEX values, RGB values, RGBA values, HSL values, HSLA values, and opacity. RGBA color values are an extension of RGB colors with an alpha channel - which specifies the opacity for a color. ... The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).
🌐
Colourcontrastchecker
colourcontrastchecker.com › rgba-to-hex-converter
RGBA to HEX Converter | Free Online Color Format Converter
For example, rgba(66, 135, 245, 0.8) converts to #4287f5cc: • 66 in decimal = 42 in hex (Red) • 135 in decimal = 87 in hex (Green) • 245 in decimal = f5 in hex (Blue) • 0.8 × 255 = 204 in decimal = cc in hex (Alpha) HEX with alpha (#RRGGBBAA) is supported in: • Chrome 62+ • Firefox 49+ • Safari 10+ • Edge 79+ For older browsers, it's recommended to use the rgba() format as a fallback.
🌐
JSFiddle
jsfiddle.net › Mottie › xcqpF › 1 › light
rgb(a) to hex - JSFiddle - Code Playground
The 3.0 updates brings a lot of changes, most notably a modern UI refresh.