Data Viz / Normalised Colour Palette Generator


Stan1ey UX Tools

What's this?

This tool generates a list of colors in different hue values and similar lightness (i.e. similar contrast ratio against a background); which is handy for designing charts or other graphical representation.

Color Picker

Contrast Ratio



Contrast Ratio:

Why a special color picker?

Designing to visualize data often involves choosing a series of colors with consistent contrast ratio against their background. As the traditional color representation conventions such as RGB or HSL/HSV doesn't reflect how humans perceive colors, the task is usually subjective and significantly affected by individual factors like monitor calibration, lighting condition, and personal preferences. There must be a better data-driven way to do that.

How does it work?

This tool uses a new color representation technique called "HSLuv" which is specially designed to match how we perceive lights from digital displays. When you want more than a handful of colors, you may also want to try offset to alternate the lightness of each other color for clearer differentiation betwen adjacent colors.


  1. How can I get a color with specific RGB or hex value? Getting any specific RGB codes from HSLuv inputs (hue, saturation, lightness) can be tricky. The calculation in this tool is a little simplified for efficiency, and with given decimal values available, the closest codes for "pure" red, green, and blue are as following:
    • #FF0000 ≈ ( 12.2°, 100%, 53.2%) ≈ #FE0101
    • #00FF00 ≈ (127.2°, 100%, 87.7%) ≈ #01FE04
    • #0000FF ≈ (265.9°, 100%, 32.3%) ≈ #0202FE