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
Desat.
WCAG
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.
FAQ
-
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
-