Color Palette Generator
Start from one brand colour and get matching tints, shades and colour harmonies, each with hex and RGB values and a WCAG contrast check. Everything runs in your browser.
FreeNo sign-upRuns in your browser
How do you use the Color Palette Generator?
- Pick a base colour or paste its hex code, for example #047857.
- Review the tints, shades and harmonies, along with each swatch's contrast against white and black text.
- Click a swatch to copy its hex code, or use Copy RGB for the RGB value.
How are the palettes calculated?
The tool converts your colour to hue, saturation and lightness, then changes lightness for tints and shades and rotates the hue for harmonies. Complementary adds 180 degrees, analogous moves 30 degrees either way, and triadic adds 120 and 240 degrees.
What do the AA and AAA labels mean?
They come from the W3C WCAG contrast criteria, which ask for at least 4.5:1 for AA and 7:1 for AAA with normal size text. The ratio shown is for text in white or black placed on that swatch.
What else do people ask about the Color Palette Generator?
How is the contrast ratio worked out?
It uses the WCAG 2.x relative luminance formula for sRGB colours, then divides the lighter luminance plus 0.05 by the darker luminance plus 0.05.
Do the labels apply to large text too?
The labels here use the normal text thresholds. WCAG allows lower ratios for large text, 3:1 for AA and 4.5:1 for AAA, so a swatch marked Fail may still pass for large headings.
Can I paste a three digit hex code?
Yes. A short code such as #0a7 is expanded to #00aa77 before the palettes are built.
Is my colour saved or sent anywhere?
No. The palettes and contrast checks are calculated in your browser and nothing is stored on InsightToolz.