Color Palette Generator

Pick a base colour and a harmony rule. Click a swatch to copy its HEX; the RGB is shown too.

    Click a swatch to copy its HEX.

    Building a usable palette

    Start with one colour you like, then let a harmony rule generate the rest so they belong together. A practical UI palette is usually: one or two neutral surface colours, one brand colour for primary actions, and one accent for highlights — five swatches is plenty.

    Generation happens with an HSL model in the browser. Nothing is sent anywhere, so you can iterate as fast as you can click.

    A repeatable method

    1. Pick one base colour that fits the mood — a brand colour, a colour from a photo, or one you like.
    2. Apply a harmony rule (analogous or monochrome for a website, complementary for one standout accent).
    3. Assign a role to each colour: surface, text, primary action, accent.
    4. Check text-on-background contrast (aim for 4.5:1) and adjust the lightness of the text colour if it fails.
    5. Mock it up on a real screen — colours shift depending on area and what surrounds them.

    Common mistakes

    • Too many hues. Two or three is plenty; neutrals carry the design.
    • Pure #000000 on pure #FFFFFF — softening both is easier on the eyes.
    • Relying on colour alone to convey meaning (add an icon or label for colour-blind users).

    See how to pick a colour palette for the long version.

    Related tools

    Password GeneratorQR Code GeneratorUUID GeneratorRandom Number GeneratorLorem Ipsum GeneratorRandom PickerBarcode GeneratorWord CounterCase ConverterJSON FormatterBase64 Encode / DecodeURL Encode / DecodeHash GeneratorPercentage CalculatorJWT DecoderRegex TesterText DiffCSV ⇄ JSONAge CalculatorUnix Timestamp Converter

    Frequently asked questions

    What do the harmony rules mean?
    Analogous uses hues next to each other on the colour wheel (calm, cohesive). Complementary uses opposite hues (high contrast). Triadic uses three evenly spaced hues (balanced but vivid). Monochrome varies the lightness of one hue.
    Which should I use for a website?
    Analogous or monochrome for backgrounds and surfaces, with one complementary or accent colour for buttons and links. Keep it to two or three hues total.
    Are these colours accessible?
    Not automatically. Always check text-on-background contrast against WCAG (4.5:1 for body text). A vivid palette often needs a darker or lighter variant for text.
    Can I get RGB or HSL?
    The RGB value is shown under each swatch and HEX copies on click. To convert to HSL, most design tools accept HEX directly, or paste it into a colour-picker.
    How many colours should a palette have?
    For a user interface, usually five: one or two neutral surface colours, one brand colour for primary actions, and one accent for highlights. More than three distinct hues gets hard to control. The neutrals do most of the visual work.
    How do I check colour contrast for accessibility?
    Body text needs a contrast ratio of at least 4.5:1 against its background to meet WCAG AA (3:1 for large text). A vivid mid-tone almost never passes as text — you'll need a darker or lighter variant. Any online contrast checker gives you the number from two HEX values.
    What's the difference between the harmony rules?
    Analogous = hues next to each other (calm, cohesive). Complementary = opposite hues (maximum contrast, use sparingly). Triadic = three evenly spaced hues (balanced but vivid). Monochrome = one hue at different lightness levels (safe, elegant). Random ignores harmony entirely.

    Last reviewed: September 2026. Figures and formulas are checked against their published sources; see the site's data notes.