๐ŸŒ
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
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
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
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
๐ŸŒ
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.
๐ŸŒ
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.
๐ŸŒ
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
๐ŸŒ
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)'};...
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/
๐ŸŒ
OpenReplay
openreplay.com โ€บ tools โ€บ rgba-to-hex
RGBA to HEX Converter
Convert RGBA color values to hexadecimal format with alpha channel support.
๐ŸŒ
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]
๐ŸŒ
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)
๐ŸŒ
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. Example for rgba(79, 163, 194, 0.8) 1) Clamp: r_c = 79, g_c = 163, b_c = 194, a_c = 0.8 2) Convert RGB: 79 -> 4F 163 -> A3 194 -> C2 3) Convert alpha: A_dec = round(0.8 * 255) = 204 204 -> CC 4) Final: #4FA3C2CC
๐ŸŒ
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).
๐ŸŒ
RGBA Color Picker
rgbacolorpicker.com
RGBA Color Picker
RGB 0-1 or Float RGB is another alternative representation of RGB colors that uses three decimal numbers between 0 and 1 to represent the color: one each for red, green, and blue, and one for an optional alpha channel. To pick RGB 0-1 colors, check out our RGB 0-1 Color Picker. To pick RGB/RGBA/Hex/HSL colors from an image (without uploading it to any server), check out our Image Color Picker.
๐ŸŒ
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.