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