X11 Color Names

JavaScript Class

by Mark Brautigam

Get It

You can make this project with just this one file:

» morecolors.js

Purpose

The purpose of this project is to translate standard X11 color names that aren't web color names to their RGB hex triplet values on the fly.

This allows you to use color names that web browsers won't understand, but still get the proper colors in your HTML and CSS presentation.

How It Works

This module does three things, in order:

  1. It searches all the document's style sheets and replaces any color names that it finds in its dictionary with their RGB hex triplet equivalents. It looks for both "color" and "background-color" references.
  2. It searches all the inline styles in your HTML document and does the same thing. The strategy is a little different, because it obtains the color information from the text strings, and not from the style object, because for some reason the style object doesn't always have the full information. (I think this happens when you insert styled objects into the DOM using JavaScript.)
  3. It searches all the HTML element "color" and "bgcolor" attributes, which aren't allowed in HTML5 documents, but may be used in older HTML 4 documents.

Example

The X11 Color Swatches page uses this module to parse the color names.

Getting Started

Here is how to use this on your own page.

  1. Download the file morecolors.js and reference it in the head section of your HTML file like this:
    <script type="text/javascript" src="morecolors.js"></script>
  2. Add this JavaScript code at the bottom of your file or in an onload event handler. Make sure this code is executed after any other JavaScript code that might add HTML elements that have inline styles.
    <script type='text/javascript'>
    moreColors.applyColorNameChanges();
    </script>
    
Copyright © 2007–2015 Mark Brautigam

The Purpose

I wanted to have menus so users can quickly navigate from project to project within each category (e.g. Animation, JavaScript, PHP/mySQL).

I also wanted to show the assignment, rationale, or case study for each project without it intruding on the project itself.

And I wanted to have quick access to validation methods that I use frequently while doing development.