The CSS Color Module Level 4 will probably support 4 and 8-digit hexadecimal RGBA notation!

Three weeks ago (18th of December 2014) the CSS Color Module Level 4 editor's draft was submitted to the CSS W3C Working Group. Though in a state which is heavily susceptible to change, the current version of the document implies that in the somewhat near future CSS will support both the 4 and 8-digit hexadecimal RGBA notation.

Note: the following quote has irrelevant chunks cut out and the source may have been heavily modified by the time you read this (as mentioned above, it's an editor's draft and not a finalised document).
If things have heavily changed, please leave a comment letting me know so I can update this answer!

§ 4.2. The RGB hexadecimal notations: #RRGGBB

The syntax of a <hex-color> is a <hash-token> token whose value consists of 3, 4, 6, or 8 hexadecimal digits. In other words, a hex color is written as a hash character, "#", followed by some number of digits 0-9 or letters a-f (the case of the letters doesn’t matter - #00ff00 is identical to #00FF00).

8 digits

The first 6 digits are interpreted identically to the 6-digit notation. The last pair of digits, interpreted as a hexadecimal number, specifies the alpha channel of the color, where 00 represents a fully transparent color and ff represent a fully opaque color.

Example 3
In other words, #0000ffcc represents the same color as rgba(0, 0, 100%, 80%) (a slightly-transparent blue).

4 digits

This is a shorter variant of the 8-digit notation, "expanded" in the same way as the 3-digit notation is. The first digit, interpreted as a hexadecimal number, specifies the red channel of the color, where 0 represents the minimum value and f represents the maximum. The next three digits represent the green, blue, and alpha channels, respectively.

What does this mean for the future of CSS colours?

This means that assuming this isn't completely removed from the Level 4 document, we'll soon be able to define our RGBA colours (or HSLA colours, if you're one of those guys) in hexadecimal format in browsers which support the Color Module Level 4's syntax.

Example

elem {
    background: rgb(0, 0, 0);           /* RGB notation (no alpha). */
    background: #000;                   /* 3-digit hexadecimal notation (no alpha). */
    background: #000000;                /* 6-digit hexadecimal notation (no alpha). */
    background: rgba(0, 0, 0, 1.0);     /* RGBA notation. */

    /* The new 4 and 8-digit hexadecimal notation. */
    background: #0000;                  /* 4-digit hexadecimal notation. */
    background: #00000000;              /* 8-digit hexadecimal notation. */
}

When will I be able to use this in my client-facing products?

All jokes aside: it's currently only the start of 2015, so these will not be supported in any browser for quite some time yet - even if your product is only designed to work on the most up-to-date of browsers you'll probably not be seeing this in action in a production browser any time soon.

View current browser support for #RRGGBBAA color notation

However, that said, the way CSS works means that we can actually start using these today! If you really want to start using them right now, as long as you add a fall back any non-supporting browsers will simply ignore the new properties until they are deemed valid:

figure {
  margin: 0;
  padding: 4px;
  
  /* Fall back (...to browsers which don't support alpha transparency). */
  background: #FEFE7F;
  color: #3F3FFE;
  
  /* Current 'modern' browser support. */
  background: rgba(255, 255, 0, 0.5);
  color: rgba(0, 0, 255, 0.75);
  
  /* Fall... foward? */
  background: #ffff007F; /* Or, less accurately, #ff08 */
  color: #0000ffbe;      /* Or #00fc */
}
<figure>Hello, world!</figure>

As long as you're viewing this answer on a browser which supports the background and color properties in CSS, the <figure> element in result of the above snippet will look very similar to this:

Using the most recent version of Chrome on Windows (v39.0.2171) to inspect our <figure> element, we'll see the following:

The 6-digit hexadecimal fall back is overridden by the rgba() values, and our 8-digit hexadecimal values are ignored as they are currently deemed invalid by Chrome's CSS parser. As soon as our browser supports these 8-digit values, these will override the rgba() ones.

UPDATE 2018-07-04: Firefox, Chrome and Safari are support this notation now, Edge still missing but will probably follow (https://caniuse.com/#feat=css-rrggbbaa).

Answer from James Donnelly on Stack Overflow
Top answer
1 of 16
184

The CSS Color Module Level 4 will probably support 4 and 8-digit hexadecimal RGBA notation!

Three weeks ago (18th of December 2014) the CSS Color Module Level 4 editor's draft was submitted to the CSS W3C Working Group. Though in a state which is heavily susceptible to change, the current version of the document implies that in the somewhat near future CSS will support both the 4 and 8-digit hexadecimal RGBA notation.

Note: the following quote has irrelevant chunks cut out and the source may have been heavily modified by the time you read this (as mentioned above, it's an editor's draft and not a finalised document).
If things have heavily changed, please leave a comment letting me know so I can update this answer!

§ 4.2. The RGB hexadecimal notations: #RRGGBB

The syntax of a <hex-color> is a <hash-token> token whose value consists of 3, 4, 6, or 8 hexadecimal digits. In other words, a hex color is written as a hash character, "#", followed by some number of digits 0-9 or letters a-f (the case of the letters doesn’t matter - #00ff00 is identical to #00FF00).

8 digits

The first 6 digits are interpreted identically to the 6-digit notation. The last pair of digits, interpreted as a hexadecimal number, specifies the alpha channel of the color, where 00 represents a fully transparent color and ff represent a fully opaque color.

Example 3
In other words, #0000ffcc represents the same color as rgba(0, 0, 100%, 80%) (a slightly-transparent blue).

4 digits

This is a shorter variant of the 8-digit notation, "expanded" in the same way as the 3-digit notation is. The first digit, interpreted as a hexadecimal number, specifies the red channel of the color, where 0 represents the minimum value and f represents the maximum. The next three digits represent the green, blue, and alpha channels, respectively.

What does this mean for the future of CSS colours?

This means that assuming this isn't completely removed from the Level 4 document, we'll soon be able to define our RGBA colours (or HSLA colours, if you're one of those guys) in hexadecimal format in browsers which support the Color Module Level 4's syntax.

Example

elem {
    background: rgb(0, 0, 0);           /* RGB notation (no alpha). */
    background: #000;                   /* 3-digit hexadecimal notation (no alpha). */
    background: #000000;                /* 6-digit hexadecimal notation (no alpha). */
    background: rgba(0, 0, 0, 1.0);     /* RGBA notation. */

    /* The new 4 and 8-digit hexadecimal notation. */
    background: #0000;                  /* 4-digit hexadecimal notation. */
    background: #00000000;              /* 8-digit hexadecimal notation. */
}

When will I be able to use this in my client-facing products?

All jokes aside: it's currently only the start of 2015, so these will not be supported in any browser for quite some time yet - even if your product is only designed to work on the most up-to-date of browsers you'll probably not be seeing this in action in a production browser any time soon.

View current browser support for #RRGGBBAA color notation

However, that said, the way CSS works means that we can actually start using these today! If you really want to start using them right now, as long as you add a fall back any non-supporting browsers will simply ignore the new properties until they are deemed valid:

figure {
  margin: 0;
  padding: 4px;
  
  /* Fall back (...to browsers which don't support alpha transparency). */
  background: #FEFE7F;
  color: #3F3FFE;
  
  /* Current 'modern' browser support. */
  background: rgba(255, 255, 0, 0.5);
  color: rgba(0, 0, 255, 0.75);
  
  /* Fall... foward? */
  background: #ffff007F; /* Or, less accurately, #ff08 */
  color: #0000ffbe;      /* Or #00fc */
}
<figure>Hello, world!</figure>

As long as you're viewing this answer on a browser which supports the background and color properties in CSS, the <figure> element in result of the above snippet will look very similar to this:

Using the most recent version of Chrome on Windows (v39.0.2171) to inspect our <figure> element, we'll see the following:

The 6-digit hexadecimal fall back is overridden by the rgba() values, and our 8-digit hexadecimal values are ignored as they are currently deemed invalid by Chrome's CSS parser. As soon as our browser supports these 8-digit values, these will override the rgba() ones.

UPDATE 2018-07-04: Firefox, Chrome and Safari are support this notation now, Edge still missing but will probably follow (https://caniuse.com/#feat=css-rrggbbaa).

2 of 16
130

I found the answer after posting the enhancement to the question. Sorry!

MS Excel helped!

simply add the Hex prefix to the hex colour value to add an alpha that has the equivalent opacity as the % value.

(in rbga the percentage opacity is expressed as a decimal as mentioned above)

Opacity %   255 Step        2 digit HEX prefix
0%          0.00            00
5%          12.75           0C
10%         25.50           19
15%         38.25           26
20%         51.00           33
25%         63.75           3F
30%         76.50           4C
35%         89.25           59
40%         102.00          66
45%         114.75          72
50%         127.50          7F
55%         140.25          8C
60%         153.00          99
65%         165.75          A5
70%         178.50          B2
75%         191.25          BF
80%         204.00          CC
85%         216.75          D8
90%         229.50          E5
95%         242.25          F2
100%        255.00          FF
🌐
DigitalOcean
digitalocean.com › community › tutorials › css-hex-code-colors-alpha-values
How To Use CSS Hex Code Colors with Alpha Values | DigitalOcean
April 12, 2021 - Learn how to use hex codes in CSS and change the transparency of the color by using an alpha value. An introduction to hexadecimal numbers is included, too.
🌐
GitHub
googlechrome.github.io › samples › css-alpha-channel
Alpha Channel Support for CSS Hex Syntax Sample
Consider the example code below. Both .bottom <div> elements have a red background overlaid with yellow box. .overlay1 shows what all the examples would look like without an alpha channel. Yellow overlays red. .overlay2 shows the new syntax using two-character hex values.
🌐
GitHub
gist.github.com › lopspower › 03fb1cc0ac9f32ef38f4
Hexadecimal color code for transparency · GitHub
Hexadecimal color code for transparency ... color), you need to add 66 like this #66000000. 100% — FF · 99% — FC · 98% — FA · 97% — F7 · 96% — F5 · 95% — F2 ·...
Top answer
1 of 5
101

2025 answer:

Yes, in CSS use #RGBA or #RRGGBBAA.

2015 answer:

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 Feb 2025, >96% 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

2 of 5
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.

🌐
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › CSS › Reference › Values › hex-color
<hex-color> - CSS | MDN
The blue component of the color, as a case-insensitive hexadecimal number between 0 and ff (255). If there is only one number, it is duplicated: 9 means 99. ... The alpha component of the color, indicating its transparency, as a case-insensitive hexadecimal number between 0 and ff (255).
🌐
W3Schools
w3schools.com › css › css3_colors.asp
CSS Colors
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.
🌐
Chris Coyier
chriscoyier.net › 2023 › 05 › 12 › add-opacity-to-an-existing-color
Add Opacity to an Existing Color – Chris Coyier
May 12, 2023 - Well, one thing to consider is… not using hex codes 😬. That same orange is about hsl(26deg 95% 48%). That’s easier to apply alpha to. You do: hsl(26deg 95% 48% / 50%). ... html { --brandColorHSL: 26deg 95% 48%; --brandColor: hsl(var(--brandColorHSL)); } .use-with-opacity { background: hsl(var(--brandColorHSL) / 50%); }Code language: CSS (css)
Find elsewhere
🌐
npm
npmjs.com › package › postcss-color-hex-alpha
postcss-color-hex-alpha - npm
PostCSS Color Hex Alpha lets you use 4 & 8 character hex color notation in CSS, following the CSS Color Module specification.
      » npm install postcss-color-hex-alpha
    
🌐
GitHub
github.com › postcss › postcss-color-hex-alpha
GitHub - postcss/postcss-color-hex-alpha: Use 4 & 8 character hex color notation in CSS
PostCSS Color Hex Alpha lets you use 4 & 8 character hex color notation in CSS, following the CSS Color Module specification.
Starred by 28 users
Forked by 9 users
Languages   JavaScript 74.7% | CSS 25.3% | JavaScript 74.7% | CSS 25.3%
🌐
MangoHost
mangohost.net › mangohost blog › css hex code colors with alpha values – transparency explained
CSS Hex Code Colors with Alpha Values – Transparency Explained
August 3, 2025 - CSS Hex code colors with alpha values provide developers with precise control over color transparency without requiring separate RGBA declarations or additional CSS properties. This 8-character hex notation combines the familiar 6-digit hex ...
🌐
Can I Use
caniuse.com
"alpha hexadecimal" | Can I use... Support tables for HTML5, CSS3, etc
"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.
🌐
DEV Community
dev.to › wolfflucas › css-colors-understanding-rgb-hex-hsl-and-alpha-values-1gch
CSS Colors: Understanding RGB, HEX, HSL, and Alpha Values - DEV Community
July 12, 2023 - Learn to use RGB, HEX, and HSL formats to represent colors in CSS effectively. Use alpha values to control color transparency and create visually interesting effects.
🌐
Reddit
reddit.com › r/web_design › is there a way to modify hex color codes in css?
r/web_design on Reddit: Is there a way to modify HEX color codes in CSS?
March 27, 2023 -

I am working on a fan wiki with some other people. The admin has a variable list of colors for the wiki, but they are all in HEX. I just recently learned that hex codes have alpha properties now.

Here is the variable: --color-gold: #bf9e5d;

I had made a box with the HEX as the border and converted the HEX to RGB in order to use alpha (code: rgb(191 158 93 / 25%)). But then today in the process of trying to find out if I could use the HEX in RGB, I learned about HEX alphas. The equivalent HEX would be #bf9e5d40 after the alpha has been added.

Is there a way to use the variable and add the 40 at the end to get the alpha?

This doesn't work: background: var(--color-gold)40;

I read up on calc() on MDN and found nothing and it doesn't look like you can convert color codes without something like PostCSS or SCSS, which is not an option for this project.

🌐
W3Schools
w3schools.com › cssref › css_colors_legal.php
CSS Legal Color Values
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).
🌐
npm
npmjs.com › package › with-alpha-hex
with-alpha-hex - npm
A tiny TypeScript/JavaScript library which helps change/add alpha(opacity) of a css hexadecimal color.. Latest version: 1.0.6, last published: 5 years ago. Start using with-alpha-hex in your project by running `npm i with-alpha-hex`. There are ...
      » npm install with-alpha-hex
    
Published   Nov 15, 2020
Version   1.0.6
Author   tars0x9752
🌐
CSS-Tricks
css-tricks.com › 8-digit-hex-codes
8-Digit Hex Codes? | CSS-Tricks
September 13, 2016 - The other comments explain the actual series fine but I think the larger point to make here is that you’re not representing 0-100 in hex (which would be 0-64), you’ve just stretched the scale (50 is half of 100, 128 is half of 256, both are 50% of the maximum) and then changed the way you write the number (128 in decimal is 80 in hex so 80 gives you 50% in 8 digit hex), what is important is the fraction of your value to the maximum. Really the biggest mistake was going for a 0-100 scale for alpha in rgba() rather than the same 1-255 scale as the other channels.
🌐
Codecademy
codecademy.com › learn › intermediate-css-colors-and-typography › modules › learn-css-colors › cheatsheet
Intermediate CSS: Colors and Typography: Colors Cheatsheet | Codecademy
Alpha values can range between 0.0 (totally transparent) and 1.0 (totally opaque). The CSS transparent value can also be used to create a fully transparent element. ... CSS colors can be represented in hexadecimal (or hex) notation.
🌐
FFFuel
fffuel.co › cccolor
cccolor: HEX, RGB & HSL color picker for HTML & CSS | fffuel
HEX-8 (#RRGGBBAA): An additional optional set of two hexadecimal digits was introduced for HEX color codes. This extra set of digits represents the alpha value for the color (its level of transparency). For example, #61FAFF7F represents a light blue at 50% opacity. Refer to this CSS Tricks article for more details about the #RRGGBBAA color notation.