〈 Palette Picker

This is a color picker I wrote based on the traditional color wheel as an educational exercise. This tool provides a convenient way to interact with the ideas described in Wikipedia’s article on Color Scheme. All of the code can be viewed in the page source and is not obscured or minified.

As I explored this idea I looked at a few existing tools for inspiration. My goal here was not feature parity, but a simpler interaction model:

• Adobe
• Canva
• Figma

My Goals

This tool prioritizes intuition over precision. It is intended for exploration rather than exact color science, and currently focuses on complementary, split, triadic, and monochromatic relationships derived from a single point on the wheel.

Why LCH instead of HSL or RGB

For this picker I used OKLCH(Can I use OKLCH), which is derived from CIELAB which is designed to match human vision and perceptual uniformity. I chose a fixed, medium lightness and a high chroma value which is beyond what most displays can fully reproduce, meaning it will be downscaled. With hues evenly spaced around the spectrum, the resulting color wheel feels more evenly distributed to the eye than what you would get using HSL.

Sampling colors from the canvas

In order to retrieve the colors I used a simple approach and sample the colors directly from the canvas. This means the hex values match what is rendered though it may be inaccurate near boundaries due to anti-aliasing and color interpolation.

The tool

Without further ado, have fun playing with the wheel, click and/or drag around the wheel to select the base colors. All other colors will be calculated automatically.