Hue Stepper

You can mix your own color charts using the Hue Stepper tool on this page. Instructions are at the bottom of this page. The Hue Stepper creates a chart of hexadecimal color swatches arranged in rows and columns based on your settings for the hue and increments for saturation and light. (Takes a few moments to load.)

Hue Stepper Instructions

• The hue is initially set to 180° and the increments for saturation and light are initially set to 10%.
• The saturation increases from left to right by its increment. The hue, saturation, and light for each swatch is shown in the hsl(HUE, SAT%, LIGHT%) notation at the top of each swatch. The hex code for the swatch is shown below that.
• The light increases from bottom to top by its increment. Its value is also shown in the hsl notation.
• You can adjust the hue and increment (DELTA) values for saturation and light:
  • Upward pointing triangles move digits up.
  • Downward triangles move digits down.
• Pan the chart using the silver triangles at the sides of the chart:
  • The chart will change as you pan the chart.
  • The chart won't pan beyond the edge values of 0% or 100% saturation or light.
• The silver circles at the corners of the chart are "snaps" that place the chart to the extreme position for that corner. For example, the upper right corner snap places the maximum light and maximum saturation swatch in that corner.

Hue Stepper Implementation

The Hue Stepper is implemented in Scalable Vector Graphics (SVG). To use the Hue Stepper, 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 Hue Stepper 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.