The CMS I use defines color variables in hex values. Is there a way to convert that variable value to a lighter shade of that color using CSS?

Question

I can't change the CSS color variables in my company's CMS, which are written in 6-digit hex values. Can I use those variables to get a lighter shade of the predefined color value using just CSS?

Edit: I still need the color to refer to the variable. I'm building a templated page for different sites hosted on our CMS and different sites have different colors set for the --primary, --secondary, etc variables. So I can't outright just go put a static RGB value conversion for the template since it needs to be able to seamlessly be copied and pasted into the different sites.

My company uses a proprietary CMS that defines color values (--primary, --secondary, --neutral, --accent) in six-digit hex values. I can't change those. I am trying to define a background color as 50% of the neutral color.

Unfortunately, I'm not well versed on how to use javascript or jquery. It's just been a long, long time since I knew how to use anything other than .changeClass. That doesn't mean I can't, it's just I don't know how to do much more than copying and pasting.

So ideally I'm looking for a simple CSS fix to this, but if I have to copy and paste a line in my page, I absolutely can.

<style>
:root { /* This is all predefined and I have no control over it. */
  --primary: #e42525;
  --neutral: #606161;
  --secondary: #003d75;
}

.wrapper {
  background-color: rgba( var(--neutral), .5); /* Since my values are in hex, I can't use the rgba() function thing */
}

</style>

If there's a simple script I can copy and paste into my page that would convert --neutral into an rgb value and define that value as --neutral-rgb or something like that, I could use that. I'm just not confident in my script writing/understanding abilities.

Or, if there's a way to say:

background-color: hsl( var(--neutral) + "f0");

or

background-color: calc( var(--neutral) * (50%));

That would be so dope...

P.S. Don't crucify me if this question has been answered before. I'm not exactly sure how to phrase it right. I've been teaching myself Sass in my spare time, so I'm just barely beginning to figure this stuff out.

Many Thanks!

Did you try converting hex to rgb using https://www.rapidtables.com/convert/color/hex-to-rgb.html? after that you can use rgba()? — suketup, May 16 '19 at 20:51
@suketup so i'm building a template for a page that will appear on different sites that are hosted by this CMS. The value of the variable changes from site to site, so it needs to be variable. Should have added that to my description, sorry! — S. Ling, May 16 '19 at 20:53
hope this could help -https://stackoverflow.com/questions/7015302/css-hexadecimal-rgba & https://stackoverflow.com/questions/40010597/how-do-i-apply-opacity-to-a-css-color-variable — suketup, May 16 '19 at 21:00
You cant pass variables through css, you'll need to use javascript/JQuery — Adam Buchanan Smith, May 16 '19 at 21:03

Temani Afif · Answer 1 · 2019-05-16T21:34:41.067

If it's only about background, use an extra layer for the background where you can apply opacity:

:root { /* This is all predefined and I have no control over it. */
  --primary: #e42525;
  --neutral: #606161;
  --secondary: #003d75;
}

.wrapper {
  position:relative;
  z-index:0;
}
.one {
  --c:var(--neutral);
  --o:0.8;
}
.two {
  --c:var(--primary);
  --o:0.2;
}
.wrapper:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color: var(--c,transparent);
  opacity:var(--o,1);
}

<div class="wrapper">some content without background</div>
<div class="wrapper one">some content with neutral color</div>
<div class="wrapper two">some content with primary color</div>

You can even apply filter and be able to change the initial coloration like you want:

:root { /* This is all predefined and I have no control over it. */
  --primary: #e42525;
  --neutral: #606161;
  --secondary: #003d75;
}

.wrapper {
  position:relative;
  z-index:0;
}
.one {
  --c:var(--neutral);
  --o:0.8;
  --f:brightness(20%);
  color:#fff;
}
.two {
  --c:var(--primary);
  --o:0.2;
  --f:hue-rotate(130deg);
}
.wrapper:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color: var(--c,transparent);
  opacity:var(--o,1);
  filter:var(--f,none);
}

<div class="wrapper">some content without background</div>
<div class="wrapper one">some content with neutral color</div>
<div class="wrapper two">some content with primary color</div>

The CMS I use defines color variables in hex values. Is there a way to convert that variable value to a lighter shade of that color using CSS?

1 Answers1

Linked