Page 1 of 1 pages

CSS Color Charts

January 28, 2007

I have a client who manufactures and sells candles, lotions and accessories. We were always listing the colors or scents available. I was asked to show them visually as well.

Instead of making a gazillion little .gifs of the swatches, I thought there must be an easier way. There is, using the CSS border property and a list.

The CSS:

#colorbar {

  font: 11px Verdana, Arial, Helvetica, sans-serif;

  color: #666666;

  width: 200px;

  float: right;

  margin-right: 2em;

  border: solid 1px #ccc;

  padding: 5px;

  }


#colorbar ul {

  list-style: none;

  margin: 0;

  padding: 0;

  }

  #colorbar li {

  padding-left: 5px;

  color: #000;

  text-decoration: none;

  margin-bottom: 3px;

  border-left: 80px solid;

  }


  #colorbar li.apple {border-color: #E40050; }

  #colorbar li.chard {border-color: #F7E8AA;}

  #colorbar li.cinn {border-color: #C0004E;}

  #colorbar li.dog {border-color: #fff;}

  #colorbar li.highland {border-color: #006B3F;}

  #colorbar li.honeydew {border-color: #D3E8A3;}

  #colorbar li.lavendar {border-color: #BAAFD3;}

  #colorbar li.lemon {border-color: #F9E814;}

  #colorbar li.mist {border-color: #A8CEE2;}

  #colorbar li.pine {border-color: #546856;}

  #colorbar li.van {border-color: #F7E8AA;}

  #colorbar li.wild {border-color: #F9E814;}

The XHTML:

<div id="colorbar">

  <ul>

  <li class="apple">Apple Orchard</li>

  <li class="chard">Chardonnay</li>

  <li class="cinn">Cinnamon</li>

  <li class="dog">Dogwood</li>

  <li class="highland">Highland</li>

  <li class="honeydew">Honeydew Melon</li>

  <li class="lavendar">Lavendar</li>

  <li class="lemon">Lemon Zest</li>

  <li class="mist">Mountain Mist</li>

  <li class="pine">Southern Pine</li>

  <li class="van">Vanilla</li>

  <li class="wild">Wild Flower</li>

  </ul>

  </div>

The width of the border (in this case, 80px) is determining the width of the color area.

You can also use background images for your bullets. In this case, the images are 50px square. In <li> padding, I've assigned a value of 55px. This moves the text out of the way of the image, and gives 5px of space.

The CSS:

#patternbar {

font: 11px Verdana, Arial, Helvetica, sans-serif;

color: #666666;

width: 125px;

float: left;

margin-right: 2em;

border: solid 1px #ccc;

padding: 5px;

}


#patternbar ul {

  list-style: none;

  margin: 0;

  padding: 0;

  }


  #patternbar ul li {

  padding-left: 55px;

  color: #000;

  text-decoration: none;

  margin-bottom: 10px;

  height: 50px;

  }

  

  #patternbar li.aqua {background: url(images/aqua-moss-coaster.gif) no-repeat  0 50%} 

  #patternbar li.lime {background: url(images/cool-lime-coaster.gif) no-repeat  0 50%} 

  #patternbar li.psplash {background: url(images/pink-splash-coaster.gif) no-repeat  0 50%} 

  #patternbar li.rsand {background: url(images/red-sand-coaster.gif) no-repeat  0 50%} 

  #patternbar li.skymist {background: url(images/mint-sky-coaster.gif) no-repeat  0 50%} 

  #patternbar li.tealc {background: url(images/teal-coral-coaster.gif) no-repeat  0 50% }

The XHTML:

<div id="patternbar">

  Available Patterns:<br /><br />

  <ul>

  <li class="aqua">Aqua Moss</li>

  <li class="lime">Cool Lime</li>

  <li class="psplash">Pink Splash</li>

  <li class="rsand">Red Sand</li>

  <li class="skymist">Sky Mist</li>

  <li class="tealc">Teal Coral</li>

  </ul>

</div>

If you're generating the color lists dynamically, you don't have use class names. You can use inline styles, like:

<li style="border-color: #D3E8A3">HoneyDew Melon</li>

Permanent Link Filed under: CSS

Page 1 of 1 pages

Next entry: The Recycled House

Previous entry: Debra’s Dynamic Gallery

Your Comment: