Tooltrusty

Colour Palette Generator

Six harmony rules, a full tint and shade ramp, and a contrast check on every swatch.

Palette

Tints and shades of the base colour

Contrast against the base colour

    WCAG 2.1 requires 4.5:1 for normal body text and 3:1 for large text (18.66 px bold or 24 px regular).

    Runs in your browser. Everything you type or load here is processed locally by JavaScript on this page. Nothing is uploaded to Tooltrusty or to any third party.

    What the colour Palette Generator does

    Colour harmony rules are geometry applied to the colour wheel. Pick a base hue, and each rule tells you where the other hues should sit relative to it. This generator implements six of them and shows the result immediately, along with the information you actually need to use the colours: their HEX values, a full lightness ramp, and contrast ratios for text.

    Complementary takes the hue directly opposite, giving maximum contrast — strong for a call-to-action, exhausting for large areas. Analogous takes neighbours 30° apart, which is calm and cohesive and the safest default for interfaces. Triadic spaces three hues evenly for vivid, balanced schemes. Tetradic uses two complementary pairs and needs a firm hand, since four strong hues compete. Split complementary softens the complementary rule by taking the two hues either side of the opposite. Monochromatic varies only lightness, which is the easiest scheme to make look professional.

    The tint and shade ramp below the palette is arguably more useful than the palette itself. Real interfaces need one hue at many lightness levels — a background, a hover state, a border, a muted text colour, a bold accent — and this ramp gives you ten steps in a single click.

    The contrast panel calculates WCAG 2.1 ratios between your base colour and four common text colours. This is the step most palette generators skip and the one that matters most: a palette that looks lovely and fails contrast is unusable for text. Normal body text needs 4.5:1, large text needs 3:1, and 7:1 meets the stricter AAA level.

    How to use it

    1. Pick a base colour, type a HEX value, or press Random base colour to explore.
    2. Choose a harmony rule. Analogous or monochromatic are the safest starting points for interface work.
    3. Take working colours from the tint and shade ramp rather than the palette alone.
    4. Check the contrast panel before committing to any colour that will sit behind text. Click any swatch to copy it.

    A worked example

    Starting from a lime green base, #c6f24e, with the analogous rule:

    #e8f24e   base hue − 30°
#c6f24e   base
#9cf24e   base + 30°
#4ef26a   base + 60°

    The contrast panel is where the decision gets made. Against this base colour, black text scores about 16:1 (AAA, comfortably readable) while white text scores about 1.3:1 — a clear fail. So this lime works as a background only with dark text on it, or as an accent on a dark background where the roles are reversed.

    The ramp then gives the rest of the system: the 15% lightness step becomes a dark surface, 25% becomes a border, 63% is the accent itself, and 85% is a soft highlight — all from one hue, all guaranteed to sit together.

    Frequently asked questions

    Which harmony rule should I choose?

    For interfaces, analogous or monochromatic — they are cohesive and hard to get wrong. Save complementary for a single accent that needs to demand attention, such as a primary button. Triadic and tetradic are better suited to illustration and brand work than to dense screens.

    What contrast ratio do I actually need?

    WCAG 2.1 level AA requires 4.5:1 for normal body text and 3:1 for large text (18.66 px bold or 24 px regular) and for user interface components. Level AAA requires 7:1. Aim for AA as a minimum on anything anyone has to read.

    Why does my palette look wrong when I use it?

    Usually because of proportion rather than hue choice. A palette shown as equal swatches looks balanced; the same colours applied as 60% neutral, 30% secondary and 10% accent looks designed. Use the ramp for the large areas and reserve the saturated palette colours for small ones.

    Are these the same colours a designer would pick?

    The mathematics gives you harmonious relationships, not taste. Designers routinely adjust saturation and lightness away from the pure geometric result because perceived brightness varies by hue — a pure yellow reads far brighter than a pure blue at the same nominal lightness. Treat the output as a starting point.