Hex representation of a color with alpha channel?
ColorsStandardsW3cColors 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.