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!

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!

• javascript
• css

• It's not fully supported in all browsers but you could look into developer.mozilla/en-US/docs/Web/CSS/Using_CSS_variables. – Stardust Commented Jul 29, 2017 at 1:51
• Possible duplicate of How can I define colors as variables in CSS? – Vadim Ovchinnikov Commented Jul 29, 2017 at 5:20

4 Answers 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

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 remend 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;

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 patible with browsers as it just gets converted into standard CSS.

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.