Note: See my Color Wheel Renderer Rust repository for a faster, improved version of this library.
This tools lets you generate a wide variety of color wheels to your specifications.
npm install -g color-wheel-renderer
Color Wheel Renderer is released under the MIT License. See LICENSE file for details.
Each color wheel represents a mapping from the 3D HSL or HSV cylinder to a 2D circle. However this is not limited to a simple slice through the cylinder.
There are four base types of color wheel, two for HSL and two for HSV cylinders. For HSL there is either a fixed lightness or fixed saturation, and for HSV there is either a fixed value or fixed saturation.
In either case, you can specify one or more values for of the fixed variable.
Each fixed value will create a new color wheel, or if the --expand option is used it will expand a single
color wheel using each value in turn.
You can bucket in either the angular or radial directions using the --angular-buckets and --radial-buckets options.
You can reverse the colors in the radial direction using the --reverse-radial-colors option.
This option also automatically reverses the radial bucketing direction from outwards to inwards, however you can also
independently reverse the radial bucketing direction with the --reverse-radial-bucketing option.
You can set the diameter of each wheel in pixels using the --diameter option, and add a margin using the --margin option.
> color-wheel-renderer color-wheel --help
Usage: color-wheel [options] <type>
Renders one or more color wheels. Type can be one of [hsl-fixed-saturation, hsl-fixed-lightness, hsv-fixed-saturation, hsv-fixed-value].
Options:
-a --angular-buckets <count> Number of angular buckets to divide colors into. Defaults to 0, which gives a smooth output.
-r --radial-buckets <count> Number of radial buckets to divide colors into. Defaults to 0, which gives a smooth output.
-f --fixed <number> Fixed values at which to render. Can be specified multiple times. Defaults to 0.5 for lightness or 1 for saturation and value. (default: )
-o --output <filePath> Path to file where color wheel should be saved.
-d --diameter <pixels> Diameter of the color wheel in pixels.
-m --margin <pixels> Size of margin around color wheel in pixels.
-e --expand Add additional wheels to outside of previous wheel.
-c --reverse-radial-colors Reverses the order of colours from the center to edge of the wheel.
-b --reverse-radial-bucketing Reverses the direction of radial bucketing from the default. Defaults to outwards, or inwards if colors are reversed.
--verbose Enable verbose logging.
-h, --help output usage information
18 Angular Buckets, 12 Radial Buckets, 3 Values
color-wheel-renderer color-wheel hsv-fixed-value -f 1 -f 0.6 -f 0.2 -a 18 -r 12
18 Angular Buckets, 12 Radial Buckets, 3 Lightness Values
color-wheel-renderer color-wheel hsl-fixed-lightness -f 0.8 -f 0.5 -f 0.2 -a 18 -r 12
18 Angular Buckets, 12 Radial Buckets, 3 Saturation Values
color-wheel-renderer color-wheel hsv-fixed-saturation -f 1 -f 0.6 -f 0.2 -a 18 -r 12
18 Angular Buckets, 12 Radial Buckets, 3 Saturation Values
Note that for this wheel the outermost band is white and therefore only 11 buckets are visible.
color-wheel-renderer color-wheel hsl-fixed-saturation -f 1 -f 0.6 -f 0.2 -a 18 -r 12
No Bucketing
color-wheel-renderer color-wheel hsl-fixed-saturation
No Bucketing, Reversed Colors
color-wheel-renderer color-wheel hsl-fixed-saturation -c
36 Angular Buckets
color-wheel-renderer color-wheel hsl-fixed-saturation -a 36
12 Radial Buckets
Note that for this wheel the outermost band is white and therefore only 11 buckets are visible.
color-wheel-renderer color-wheel hsl-fixed-saturation -r 12
12 Angular Buckets, 5 Radial Buckets, 3 Saturation Values, Expand Color Wheel
color-wheel-renderer color-wheel hsv-fixed-saturation -f 0.25 -f 0.5 -f 1 -a 18 -r 12 -e
12 Angular Buckets, 5 Radial Buckets, 3 Saturation Values, Expand Color Wheel, Reverse Bucketing Direction
color-wheel-renderer color-wheel hsl-fixed-saturation -f 0.1 -f 0.5 -f 1 -a 18 -r 12 -e -b
12 Angular Buckets, 5 Radial Buckets
color-wheel-renderer color-wheel hsv-fixed-saturation -a 12 -r 5
The following script generates the exact set of color wheels rendered on this page.
Note that the HSL Fixed Saturation wheels which use radial bucketing have a slightly larger diameter to compensate for the outer
bucket being pure white. An alternative to this would be to reverse the radial bucketing direction with the
--reverse-radial-bucketing option. This would in turn result in the center circle being pure black, which may or may not be desirable.
color-wheel-renderer color-wheel hsv-fixed-value -f 1 -f 0.6 -f 0.2 -a 18 -r 12 -d 720 -m 40 -o color-wheel-hsv-fixed-value-three.png
color-wheel-renderer color-wheel hsl-fixed-lightness -f 0.8 -f 0.5 -f 0.2 -a 18 -r 12 -d 720 -m 40 -o color-wheel-hsl-fixed-lightness-three.png
color-wheel-renderer color-wheel hsv-fixed-saturation -f 1 -f 0.6 -f 0.2 -a 18 -r 12 -d 720 -m 40 -o color-wheel-hsv-fixed-saturation-three.png
color-wheel-renderer color-wheel hsl-fixed-saturation -f 1 -f 0.6 -f 0.2 -a 18 -r 12 -d 780 -m 10 -o color-wheel-hsl-fixed-saturation-three.png
color-wheel-renderer color-wheel hsl-fixed-saturation -d 720 -m 40 -o color-wheel-hsl-fixed-saturation-smooth.png
color-wheel-renderer color-wheel hsl-fixed-saturation -c -d 720 -m 40 -o color-wheel-hsl-fixed-saturation-smooth-reversed-colors.png
color-wheel-renderer color-wheel hsl-fixed-saturation -a 36 -d 720 -m 40 -o color-wheel-hsl-fixed-saturation-angular.png
color-wheel-renderer color-wheel hsl-fixed-saturation -r 12 -d 780 -m 10 -o color-wheel-hsl-fixed-saturation-radial.png
color-wheel-renderer color-wheel hsv-fixed-saturation -f 0.25 -f 0.5 -f 1 -a 18 -r 12 -e -d 720 -m 40 -o color-wheel-hsv-fixed-saturation-expand.png
color-wheel-renderer color-wheel hsl-fixed-saturation -f 0.1 -f 0.5 -f 1 -a 18 -r 12 -e -b -d 720 -m 40 -o color-wheel-hsl-fixed-saturation-expand.png
color-wheel-renderer color-wheel hsv-fixed-saturation -a 12 -r 5 -d 720 -m 40 -o color-wheel-hsv-fixed-saturation-coarse.png