Using variables for a hex color

Question

Using HTML/CSS/JavaScript, Is there a way to use variable to control a hex color value, so I could say something like: color #variable1, variable2, variable3, a b c, and for example variable 1 2 and 3 are 1, 2 and 3, so the color code would be #123abc.

I guess what I'm asking is if you can use variables in place of an identifier for color if that makes sense. Thanks!

It's not fully supported in all browsers but you could look into https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables. — Stardust, Jul 29 '17 at 01:51
Possible duplicate of [How can I define colors as variables in CSS?](https://stackoverflow.com/questions/1875852/how-can-i-define-colors-as-variables-in-css) — Vadim Ovchinnikov, Jul 29 '17 at 05:20

score 4 · Answer 1 · answered Jul 29 '17 at 01:56

4

Custom properties define variables, referenced with the var() notation, which can be used for many purposes. For example, a page that consistently uses a small set of colors in its design can store the colors in custom properties and use them with variables:

:root {
  --main-color: #06c;
  --accent-color: #006;
}
/* The rest of the CSS file */
#foo h1 {
  color: var(--main-color);
}

The HTML

  <h1 id="foo">Hello</hi>

The output would result in "Hello" being #06c, as defined above.

See Custom Properties for Cascading Variables

answered Jul 29 '17 at 01:56

LLL

117
2
12

How well supported is this across browsers? – Charlie Fish Jul 29 '17 at 02:00
2

@Miro Not totally. I mean most modern browsers sure. But only got main stream support this year. Still very new and very modern. If you are targeting even a year old browser doesn't look like it's quite as compatible. Pros and cons to each method. Something to be aware of tho for this method. – Charlie Fish Jul 29 '17 at 02:03
1

@LisaL Still super cool and something I didn't know about. I'm sure this will be a popular feature as time goes on. – Charlie Fish Jul 29 '17 at 02:05

Wai Yan · Answer 2 · 2017-07-29T05:48:06.233

2

No, what you are describing is not possible in CSS. But it is possible to store the color in a javascript variable and change the value dynamically.

EDIT As other people have pointed out, variables are now supported in the latest releases of certain browsers. That being said, I would recommend using Less or Sass in case you need to support any old browser.

var color1 = "#123abc";
var myElement = document.querySelector("#myDiv");
myDiv.style.backgroundColor = color1;

edited Jul 29 '17 at 05:48

answered Jul 29 '17 at 01:50

Wai Yan

582
9
22

Yes, this is a good solution for Javascript. You could also use a pre-processor like I discussed in my answer. :) – Charlie Fish Jul 29 '17 at 01:51
Can you please correct your answer, because statement " is not possible in CSS" is false? – Vadim Ovchinnikov Jul 29 '17 at 04:55

Charlie Fish · Accepted Answer · 2017-07-29T05:08:18.883

1

You can't really use variables in CSS for colors. You could use something like Sass or Less which are pre-processors to do what you want tho.

EDIT as discussed in other answers you can use variables in CSS. This feature is very new and only works on super modern new browsers. So there are still benefits to using the above pre-processors since it is more compatible with browsers as it just gets converted into standard CSS.

edited Jul 29 '17 at 05:08

answered Jul 29 '17 at 01:50

Charlie Fish

18,491
19
86
179

@JoelBanks Honestly they aren't that difficult. They are basically CSS with some new syntax and some added benefits. You have to remember to run it through the system to convert back to CSS. So you write it in Sass or Less then put it through the system to convert back to normal CSS. You can write normal CSS and it works fine. I'd suggest Googling for tutorials. They are both pretty popular I'd say. – Charlie Fish Jul 29 '17 at 01:53
1

Alright, I'll get around to that. Do you recommend doing this in Sass or Less? – Joel Banks Jul 29 '17 at 01:54
That's a tough one. I haven't really used either a ton. I feel like Sass is a bit more popular. I'd look into both to see which one fits your needs better. It all depends on what you like and what you want to do. Remember to accept the answer if it helped :P haha – Charlie Fish Jul 29 '17 at 01:55
@TigranPetrossian I'm not sure how many browsers support Lisa's answer. The benefit to using Sass or Less is it gets converted back to CSS so it's supported on all browsers and very compatible with old browsers. – Charlie Fish Jul 29 '17 at 02:01
@JoelBanks Of course! Glad to help. Tons of solutions and ways you can do this. Sass and Less are good since they get converted back to CSS so they provide a lot of compatibility. – Charlie Fish Jul 29 '17 at 02:02
@CharlieFish Can you please correct your answer, because statement "can't really use variables in CSS" is false? – Vadim Ovchinnikov Jul 29 '17 at 04:53
@VadimOvchinnikov Done – Charlie Fish Jul 29 '17 at 05:08
@CharlieFish Thanks for editing. I would say that CSS preprocessors' variables have only one benefit: browser compatibility. And they have a lot of downsides due to their compiled to CSS nature. Native CSS variable is more flexible due to their dynamic nature. – Vadim Ovchinnikov Jul 29 '17 at 05:15

score 1 · Answer 4 · answered Nov 09 '17 at 01:17

Another unmentioned option, if you use, say, PHP, is to use PHP variables like this:

<?php $color = '333444'; ?>
<style type="text/css">
    .class {
        color: #<?php $color; ?>;
    }
</style>

This is best used when you generate the entire style (for whatever purpose) from your php server code.

$color = '333444';

echo "
    <style>
        .class {
            color: #$color;
        }
    </style>
";

Beyond the above, just know that you can do this, but this is not the best solution. Let's wait until CSS4 or 5, they might add variables there.

Using variables for a hex color

4 Answers4