CSS Colors: Take Control Using PHP

Neo: Do you always look at it encoded?
Cypher: Well, you have to ... there's way too much information.

– The Matrix

While many web sites use powerful programming environments to create HTML, these same tools are usually ignored when it comes to creating Cascading Style Sheets (CSS). This article describes how to take control of your colors in CSS using PHP. You will learn how to:

• Centralize your color definitions using variables.
• Separate presentation and content by referring to colors using abstract names such as base and highlight.
• Automatically generate a color gradient from a single base color:
  
  -5
  -4
  -3
  -2
  -1
  0
  +1
  +2
  +3
  +4
  +5
• Automatically adjust the contrast of foreground colors so they can viewed on top of your background colors:
  
  -5
  -4
  -3
  -2
  -1
  0
  +1
  +2
  +3
  +4
  +5

Using PHP to Generate CSS

To use PHP in your CSS file:

1. Rename your style.css file to style.php, then add the following to the top of the file:

   <?php header("Content-type: text/css"); ?>

   This line tells the browser that the file is CSS instead of HTML.

2. In your HTML files, change the stylesheet references from style.css to style.php. For example:

   <link rel="stylesheet" type="text/css"
    media="screen" href="style.php">
   

Centralizing Your Color Definitions

I don't even see the code. All I see is blonde... brunette... redhead...

– The Matrix

In a typical CSS file, color codes are scattered throughout the page, and the same colors are used in multiple places. Unless you have a talent for visualizing hex color codes, it can be hard to determine which colors belong to which codes.

Our first goal is to name the color codes and define them in a central location. Then if we want to change a color, we can change it once and the change will be propagated throughout the stylesheet.

Let's start with the following sample stylesheet:

body {
 background:#fff;
 color:#333;
}
h1, h2, h3, h4 {
 color:#00840;
}
blockquote {
 color:#008400;
}

And transform it into this:

<?php
header("Content-type: text/css");
$white = '#fff';
$dkgray = '#333';
$dkgreen = '#008400';
?>
body {
 background:<?=$white?>;
 color:<?=$dkgray?>;
}
h1, h2, h3, h4 {
 color:<?=$dkgreen?>;
}
blockquote {
 color:<?=$dkgreen?>;
}

Abstracting Your Colors

Try to realize the truth... there is no spoon.

– The Matrix

What if we wanted to make our headings red? If we changed the value of $dkgreen, then the variable name would not reflect the actual color. Furthermore, if we change $dkgreen, both the heading elements and the blockquote element would change color.

We need to change the way we name our colors, and create variables according to the function of the color instead of the value of the color:

<?php
header("Content-type: text/css");
$pageBG = '#fff';
$pageFG = '#333';
$heading = '#a00000'
$quote = '#008400';
?>
body {
 background:<?=$pageBG?>;
 color:<?=$pageFG?>;
}
h1, h2, h3, h4 {
 color:<?=$heading?>;
}
blockquote {
 color:<?=$quote?>;
}

For a more complex, real-word example, read my Case Study: Abstracting Colors for Hewlett-Packard Company.

Generating Palettes With PHP

We're supposed to start with these operation programs first. That's major boring shit. Let's do something a little more fun.

– The Matrix

Now let's take this a step further, and use PHP to generate new colors. We'll start with a base color and a highlight color, then generate a palette of lighter and darker shades:

Notice that the text is not readable on some of the swatches. Let's use PHP to adjust the foreground color, using color visibility guidelines recommended by the W3C:

To define these colors in our CSS file, simply add the following lines:

<?php
include_once("csscolor.php");
$base = new CSS_Color('C9E3A6');
$highlight = new CSS_Color('746B8E');
?>

Then to use the colors, do something like this:

/* Use the base color, two shades darker */
background:#<?= $base->bg['-2'] ?>;

/* Use the corresponding foreground color */
color:#<?= $base->fg['-2'] ?>;

/* Use the highlight color as a border */
border:5px solid #<?= $highlight->bg['0'] ?>

Here is an example of the style in action.

Download

You can download csscolor.php here:

• csscolor.zip