Color tool

Primary
Luminance:

This tool takes a hex value or HSL color and suggests tints and shades, as well as complementary colors. Luminance is calculated for each color, and WCAG contrast levels to black and white.

The numbers in the name correlates to the luminance, where 25 is perceived as lightest and 950 as darkest. Have fun!

Primary tints & shades
Primary-25
Luminance:
Primary-50
Luminance:
Primary-100
Luminance:
Primary-200
Luminance:
Primary-300
Luminance:
Primary-400
Luminance:
Primary-500
Luminance:
Primary-600
Luminance:
Primary-700
Luminance:
Primary-800
Luminance:
Primary-900
Luminance:
Primary-950
Luminance:
Secondary colors
Complementary (+180°)
Luminance:
Split-complementary (-150°)
Luminance:
Split-complementary (+150°)
Luminance:
Triadic (-120°)
Luminance:
Triadic (primary)
Luminance:
Triadic (+120°)
Luminance:
Analogous (-60°)
Luminance:
Analogous (-30°)
Luminance:
Analogous (primary)
Luminance:
Analogous (+30°)
Luminance:
Analogous (+60°)
Luminance: