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?
Asked
Active
Viewed 1.1e+01k times
133
-
9It's coming in CSS Color Level 4 [source](http://lists.w3.org/Archives/Public/www-style/2013Apr/0051.html) (see fourth bullet point) – Šime Vidas May 06 '13 at 12:37
-
@cirosantilli Do I look like I need the rep? `:-P` – Šime Vidas Feb 14 '14 at 00:56
-
1@ŠimeVidas lol, if you care to share some then... =) – Ciro Santilli OurBigBook.com Feb 14 '14 at 07:55
-
There's a similar CSS-specific question about this here: [CSS hexidecimal RGBA?](http://stackoverflow.com/questions/7015302/css-hexidecimal-rgba) – James Donnelly Jan 06 '16 at 15:29
5 Answers
98
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 Color Level 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 Color Module Level 4 spec*)
As of July 2022, >95% 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
thelem
- 2,642
- 1
- 24
- 34
96
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.
Mischa
- 42,876
- 8
- 99
- 111
guitarranalon
- 985
- 1
- 6
- 2
15
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
Patrick Klug
- 14,056
- 13
- 71
- 118
Kelly Robins
- 7,168
- 6
- 43
- 66
-
2
-
8from the W3 link you posted: Unlike RGB values, there is no hexadecimal notation for an RGBA value. – Patrick Klug Sep 14 '09 at 04:18
-
2
-
For Android drawables, it appears to be ARGB: http://developer.android.com/reference/android/graphics/drawable/ShapeDrawable.html#attr_android:color – Derek Kurth Sep 27 '12 at 16:56
13
Chrome 52+ supports alpha hex:
background: #56ff0077;
For older browsers, you'll have to use:
background-color: rgba(255, 220, 0, 0.3);
Oded Breiner
- 28,523
- 10
- 105
- 71
-
4No it doesn't, unless you enable experimental web features, because it was causing problems on Android. See my answer above for browser support details. – thelem Feb 27 '17 at 17:26
3
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.
Jinjubei
- 338
- 3
- 12
-
1This was voted down, which seems a bit harsh. It doesn't answer the question asked, but the question doesn't say why they want to know. If they just want to use an RGBA colour in CSS, then this answer is correct. – thelem Jun 24 '15 at 14:37