This is Swatch Control!

You can make your own color using this Swatch Control tool. Based on your choices for hue, saturation, light, or red, green, and blue values, you'll see a swatch set to those values. Instructions and troubleshooting information are below. (The control does take a few moments to load.)

Swatch Control Instructions

• You might want to review the color vocabulary words such as RGB, hue, saturation, and light if you are already not familiar with them.
• At the top of Swatch Control is a big swatch of color with its hexadecimal code on top. You can set the color of this swatch in a variety of ways:
  • You can adjust the red, green, or blue values as well as the hue, saturation, and light. When you make an adjustment in one value, the others will be re-calculated based on this, and you'll see a new swatch.
  • You can adjust color values using the gauges or dials by clicking at the point where you want the new value. For example, to change the HUE, click on any area of the color circle, and the value will change.
  • It can be hard to click on the guages or dials to get an exact value. You can adjust values by clicking on the gray triangles pointing up to increase a digit or a gray triangle pointing down to decrease a digit.
• The FAVORITES and STACK sections give you a way to review swatches that you've made and save them temporarily while you look at others.
  • The STACK group of swatches: every time you make a new color, its swatch gets placed on the top of the STACK. The STACK fills up with a maximum of five swatches, and the old swatches are dropped off the bottom (the color from the old swatches is recycled to make new swatches). You can click on any of the STACK swatches to have it displayed as the big swatch.
  • The FAVORITES group of swatches: when you like the color of the big swatch, click on one of the left-pointing triangles in the FAVORITES section. This stores that color in that slot. You can click on any of the FAVORITES swatches to have it displayed as the big swatch.
  • Note that both the STACK and FAVORITES areas are cleared if you reload the page or if you exit the page.
• The RANDOM button produces a pseudo-random swatch. This is useful if you'd like to make some swatches until you find one that you like, and then adjust it using the other controls. Not to be used for wagering!
• The TEXT button toggles on and off sample text in black and in white placed on the big swatch. This is useful if you plan to use the color for a background on which text is placed.
• When you get a color that you like, you'll need to copy the hexadecimal code. The hex code text above the big swatch is selectable, so you can use a copy and paste method to record it in a file on your computer: highlight the hex code, then hold down the right mouse button and choose "Copy Selected Text," then paste into a file on your computer. Or you can just write it down. Or have another browser window or tab open where you need the hex code.

Swatch Control Implementation / Troubleshooting

• Known issues
  • For Mozilla Firefox for Windows (version 1.5), the graphics load, but the script does not work.
  • This works for Mozilla Firefox for Mac.
• Swatch Control is implemented in Scalable Vector Graphics (SVG). To use Swatch Control, you need a SVG viewer. If you can't see a color tool on this page, install this free SVG viewer from Adobe.
• If installed and if your browser recognizes the EMBED element, your viewer will show the tool after a few moments (up to three or four seconds).
• See this demonstration to see the difference between the OBJECT and EMBED elements used to place the SVG on the Web page.
• Swatch Control also uses an ECMA script. If the controls do not do anything, you'll need to allow scripts to execute on this page in your Web browser.
• Still having problems using this? Please let me know.