Hex representation of a color with alpha channel?

ColorsStandardsW3c

Colors Problem Overview


Is there a W3 or any other noteworthy standard on how to represent a color (including alpha channel) in hex format?

Is it #RGBA or #ARGB?

Colors Solutions


Solution 1 - Colors

It looks like there is no hex alpha format: http://www.w3.org/TR/css3-color/

Anyway, if you use a CSS preprocessor like SASS then you can pass an hex to rgba: background:

rgba(#000, 0.5);

And the preprocessor just converts the hex code to rgb automatically.

Solution 2 - Colors

In CSS 3, to quote from the spec, "there is no hexadecimal notation for an RGBA value" (see CSS Level 3 spec). Instead you can the use rgba() functional notation with decimals or percentages, e.g. rgba(255, 0, 0, 0.5) would be 50% transparent red. RGB channels are 0-255 or 0%-100%, alpha is 0-1.

In CSS 4*, you can specify the alpha channel using the 7th and 8th characters of an 8 digit hex colour, or 4th character of a 4 digit hex colour (see CSS Level 4 spec*)

As of July 2021, >93% of users can be expected to understand the #RGBA format

It has been supported since:

  • Firefox 49, released Sept 2016 (Mozilla bug 567283).
  • Safari 10, released Sept 2016.
  • Chrome 62, released Oct 2017. For earlier versions you could enable experimental web features to use this syntax. See Chromium Issue 618472 and Webkit bug 150853.
  • Opera 52, released March 2018 (or Opera 39 when experimental web features are enabled).
  • Edge 79, released Jan 2020 (the first version of Edge based on Chromium)
  • Samsung Internet 8.2, released Dec 2018
  • Android P (your app must target Android P or newer)

It is not supported in:

  • IE
  • Original Edge (version numbers up to and including 18)
  • Opera Mini
  • UC Browser

Up to date browser support information is available on CanIUse.com

*Technically still in draft, but given the browser support this is unlikely to be changed.

Solution 3 - Colors

I'm not sure if there is an official standard-

RGBA is the representation I've seen for Web Macromedia and others use ARGB

I believe that RGBA is the more common representation.

If it helps this is from W3 for CSS3
http://www.w3.org/TR/css3-color/#rgba-color

EDIT (Patrick): quote from the above W3 link

> Unlike RGB values, there is no hexadecimal notation for an RGBA value

Solution 4 - Colors

Chrome 52+ supports alpha hex:

background: #56ff0077;

For older browsers, you'll have to use:

background-color: rgba(255, 220, 0, 0.3);

Solution 5 - Colors

You could try putting the hex color into the color picker of GIMP or photo shop to get the RGB value and then using the alpha value. eg. red is #FF0000 or rgb(255,0,0) if you want red with an alpha value of .5 then rgba(255,0,0,.5).

Maybe not exactly what you wanted but hopefully helps.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionPatrick KlugView Question on Stackoverflow
Solution 1 - ColorsguitarranalonView Answer on Stackoverflow
Solution 2 - ColorsthelemView Answer on Stackoverflow
Solution 3 - ColorsKelly RobinsView Answer on Stackoverflow
Solution 4 - ColorsOded BreinerView Answer on Stackoverflow
Solution 5 - ColorsJinjubeiView Answer on Stackoverflow