45

Like the title says, i would like to somehow add transparency to a hex color defined in css variable. I have seen solutions in other posts using rgb, but I need hex. Maybe with rgba(), calc() or linear-gradient(), but I didn't reach any result with my attempts.

Can someone help?

I couldn't find any related posts since I am using hex colors and css variables

For example:

:root {
  --blue: #0000ff;
}
 
.blue-with-alpha {
  color: var(--blue)66; /* I am trying to achieve something like this */
}
Jose Varela
  • 451
  • 1
  • 4
  • 5
  • The hexadezimal notation can't store alpha-channel information in CSS. The only browser to support such a feature were the early Internet Explorer versions, which used a set of four hexadezimal numbers, where the first one stored the alpha-channel value. (e.g. #99ffcccc) So in either case, the notation needs to be converted or you use another method to add the transparency independently of the colors alpha-channel; see: https://stackoverflow.com/questions/1751263/hex-colors-numeric-representation-for-transparent – feeela Aug 27 '18 at 11:03
  • 2
    @feeela, I am sorry but you're wrong. I am using the notation #rrggbbaa on google chrome and it is working properly – Jose Varela Aug 27 '18 at 11:05
  • Chrome 68 reports this as “Invalid property value”. Probably you have enabled some feature hidden behind a flag: “From version 52: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.” See also the compatibility table at: https://developer.mozilla.org/en-US/docs/Web/CSS/color So, **this is a relatively new feature with not-so-good- browser support**. – feeela Aug 27 '18 at 11:07
  • You can use like this `background:rgba(0, 0, 0, 0.5);` – Rohit Verma Aug 27 '18 at 11:07
  • can you show us the use case, you won't find generic solution but we can find specifc ones for your case – Temani Afif Aug 27 '18 at 11:09
  • Possible duplicate of [CSS hexadecimal RGBA?](https://stackoverflow.com/questions/7015302/css-hexadecimal-rgba) – feeela Aug 27 '18 at 11:10
  • @feeela I tested it on firefox and it worked. You can check this link https://drafts.csswg.org/css-color/#hex-notation and verify that 8 digit hex is supported – Jose Varela Aug 27 '18 at 11:12
  • 1
    It's not duplicate from https://stackoverflow.com/questions/7015302/css-hexadecimal-rgba, since I am using css variables – Jose Varela Aug 27 '18 at 11:13
  • For the record: [Browser support for `#rrggbbaa` is not great](https://caniuse.com/#feat=css-rrggbbaa). – str Aug 30 '18 at 16:41
  • Is there a reason not to use `opacity`? – andrew Jul 19 '21 at 08:26

3 Answers3

14

With the new color-mix function, this is possible:

:root {
  --blue: #0000ff;
}

.blue-with-alpha {
  background-color: color-mix(in srgb, var(--blue), transparent 66%);
}
<p class="blue-with-alpha">Some content</p>

Check browser support before using it on your project.

For more details you can check this article: https://una.im/color-mix-opacity/

Murat Çorlu
  • 8,207
  • 5
  • 53
  • 78
12

There are several potential solutions to this:

• adjusting your variable to use rgb values so you can easily add an alpha in CSS:

:root {
   --blue: 0, 0, 255;
}

.blue-with-alpha{
   color: rgba(var(--blue), 0.44);
}

• you could also add alpha as a variable:

:root {
   --blue: 0, 0, 255;
   --alpha: .44;
}

.blue-with-alpha{
   color: rgba(var(--blue), var(--alpha);
}

• using opacity:

:root {
   --blue: #0000ff;
}

.blue-with-alpha {
   color: var(--blue);
   opacity: .44;    
}

• defining a different variable for your highlight:

:root {
   --blue: #0000ff;
   --blue-highlight: #0000ff66;
}

.blue-with-alpha{
   color: var(--blue-highlight);
}
Maggie Cody
  • 619
  • 1
  • 6
  • 14
2

Starting from Safari 16.4, you can achieve it with Relative Color Syntax. But Chrome 111 and Firefox 111 haven't supported this syntax at the moment

.blue-with-alpha {
  color: rgb(from var(--blue) r g b / 0.4)
}
foray1010
  • 918
  • 6
  • 12