Using variables for a hex color

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.

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