Tool to define stylesheet colors only once

I’ve read (I don’t remember where) that there’s a tool or method that will let you define your stylesheet’s color hex codes just once, and then refer to them throughout the rest of the stylesheet as a keyword. For isntance, my site will use a particular shade of orange, #cc3f27, and my theory is there’s a way to make “orange” = #cc3f27 so later on I can write:

h1 { color:orange; }

and it will be read as:

h1 { color:#cc3f27; }

Does anyone know how to do this or have a link?

Mucho Gracias,


Wow, awesome. If it’s that easy, my whole CSS life just changed.


I didn’t try it, so i can’t give feedback. Please let us know.

If and only if you use PHP then try this:

<link type='text/css' href='<?php echo 'my_stylesheet.php'; ?>' rel='stylesheet' />

  // my_stylesheet.php'

  header("Content-type: text/css;charset:UTF-8");
  $cg1= $bg1;

strong,a:link,a:visited,a:hover{color:<?php echo $cg1;?>}
.calendar td:hover, 
a:hover{background-color:<?php echo $bg3;?>}
a:active{background-color:transparent;color:<?php echo $cg1;?>}
body,#box_styles{background-color:<?php echo $bg1;?>;color:<?php echo $cg5;?>}
#new_left,#box_smiling{border-right:solid 18px <?php echo $bg1;?>}
.box_menu{border:solid 2px <?php echo $bg1;?>}
.btn a,
.hvr:hover,.alternator_1{background-color:<?php echo $bg2;?>}
.alternator_2{background-color:<?php echo $bg4;?>}
.hvr:hover{outline:inset 8px <?php echo $bg1;?>}

<?php include 'style_layout.php';?>