CSS Colors: Take Control Using PHP

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

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

Generating Palettes With PHP
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:

-5

-4

-3

-2

-1

0

+1

+2

+3

+4

+5

-5

-4

-3

-2

-1

0

+1

+2

+3

+4

+5

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:

-5

-4

-3

-2

-1

0

+1

+2

+3

+4

+5

-5

-4

-3

-2

-1

0

+1

+2

+3

+4

+5

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.