Color Spot Tables: tables of color swatches and color codes used in HTML and CSS

Color Scheme Maker

You can create and view your own color scheme using this Color Scheme Maker tool. Based on your settings for hue, saturation, and light, you'll see a palette of color swatches used in a page mockup. Further instructions are at the bottom of this page. (Takes a few moments to load.)

Color Scheme Maker Instructions

  • You might want to review the color terms hue, saturation, and light and the terms for different color schemes if you are already not familiar with them.
  • You can select the color scheme in the SCHEMES area by clicking in the circle of your choice; the selected circle will darken, and the mockup area will show this scheme.
  • In the LIGHT CONTROLS section, adjust the hue in the first row to be your base hue by clicking on the grey triangles pointing up to increase a digit or a gray triangle pointing down to decrease a digit. All the other hues are calculated based on this hue and your scheme selection. The values of these other hues are shown, but they can't be changed as they are fixed by the color scheme and your base hue.
  • You can, however, change the saturation and light levels of any of the colors shown. Adjust the saturation and light levels of any of the color swatches by clicking on the gray triangles pointing up to increase a digit or a gray triangle pointing down to decrease a digit.
  • In the SHUFFLE section, you can change the function (e.g., "Text," "Background," etc) of a color by shuffling its function name. To do this, click on the gray triangle above or below a function name, and it will switch places with the function in the direction of the arrow. In this way, you can change how the color scheme uses the colors. Note that the base hue always is the first row. If you want to change the base hue, adjust its hue control.
  • In the HUE SEP° section, the control box will have a white background when you select a color scheme that uses the concept of a "nearby" color hue. You can adjust separation quantity by clicking on the gray triangles to increase or decrease it, ranging from 0° to 90°.
  • When you get a set of colors that you like, you'll need to copy down the hexadecimal codes for those colors. The hex code text is selectable, so you can use a copy and paste method to record the colors and their function.

Color Scheme Maker 2000 Implementation

The Color Scheme Maker is implemented in Scalable Vector Graphics (SVG). To use the Color Scheme Maker, 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). The Color Scheme Maker also uses an ECMA script. If you see a blue panel on the right-hand side and 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.

Save this page to any social bookmarking site! Share · Search · Market · Directory
2015-11-01 · John December · Contact · Terms of Use © December Communications, Inc.