Color Hex Stepper

You can mix your own color charts using the Color Hex Stepper tool on this page. Instructions are at the bottom of this page. The Color Hex Stepper creates a chart of color swatches arranged in rows and columns based the origin swatch in the lower left corner of the chart and the horizontal and vertical hex increments.

Color Hex Stepper Instructions

• The Color Hex Stepper mixes a chart of colors based on increments of red, green, and blue as measured by hexadecimal codes. It is useful to get an idea of how adding slightly more red, green, or blue to a color would look.
• Initial values are set just to show what kind of charts are possible.
• You can change the origin value, vertical increment, and horizontal increment for the red, green, and blue values:
  • Upward pointing triangles move hexadecimal digits up
  • Downward triangles move hexadecimal digits down
• You can pan the chart using the silver triangles at the sides of the chart:
  • The origin value will change as you pan the chart
  • When a particular color value reaches its hexadecimal maximum (FF), you can still keep panning the chart as long as other colors are below their maximum, but you'll notice that as you keep panning in one direction, if you have some color increment in that direction, eventually the color will become lighter and then white.
• 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 vertical and maximum horizontal increment swatch in that corner. Note that this maximum may be less than FFFFFF because this snap position will not go further than one of the values red, green, or blue being over FF. If you want to go beyond these snap points, use the pan controls, but remember you'll not be adding any more color to a red, green, or blue value for a swatch that has reached its maximum at FF.

Color Hex Stepper Implementation

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