Contrasting Color Calculator

Select a new background color for this page. The script will calculate a contrasting color for all the text on the page.

Black
Brown
Red
Orange
Yellow
Green
Blue
Violet
Gray
White

Extra special colors:

Chartreuse
Purple
Enter your color ...

The Assignment

Create a form with radio buttons represnting different colors.

Use the ID attribute for each radio button.

Change the background color to the color that was selected.

My Improvements

Instead of a form, I just used DIVs that respond to mouse clicks.

I show the color choices visually as well as with text.

Rather than hard-coding the color names into the JavaScript, we scan the HTML to figure out what colors were assigned to the button IDs.

This approach lets us change the IDs and get new colors for our project. It also lets us add new color choices at the end of the list. I tested this capability by adding more colors at the end.

I try to calculate a text color of contrasting brightness so the text doesn't become invisible. You can even see this in the color bars. Brighter color bars have darker text, and darker color bars have brighter text. The script calculates the "luma" in order to determine the brightness of the colors.