A colour palette built from one base colour uses fixed angles on the colour wheel rather than taste, which is why the results look deliberate. FindUtils Color Palette Generator takes a starting colour and produces six kinds of scheme, then exports them as a HEX list, CSS custom properties or JSON.

This guide covers what each scheme is for, how to export it, and why contrast and colour blindness are separate checks this tool does not perform.

What Do the Six Schemes Actually Do?

Each one is a rule about angles on the colour wheel, and each suits a different job.

SchemeRuleUse it for
ComplementaryOpposite, 180° apartMaximum contrast; a call to action against a brand colour
AnalogousNeighbours, ±30° and ±60°Calm, cohesive surfaces; backgrounds and large areas
TriadicThree colours 120° apartVivid but balanced; category or series colours
TetradicFour colours 90° apartRich sets where one colour dominates and three support
Split-complementary150° and 210°Complementary contrast with less tension
MonochromaticOne hue, varied lightnessHierarchy without introducing a second hue

The practical rule: analogous for the surface, complementary for the thing you want clicked. A palette that is entirely complementary is exhausting, and one that is entirely analogous has nothing that stands out.

How Do You Export the Palette?

Four ways, and it is worth being precise because they produce different things.

  1. Click a swatch — copies that one hex code.
  2. Copy All — the whole palette as a comma-separated HEX list.
  3. Copy CSS — a :root block of custom properties, ready to paste into a stylesheet:
CSS
1
2
3
4
:root {
  --color-1: #3b82f6;
  --color-2: #f6903b;
}
  1. Download JSON — the base colour, the scheme type and a named array, for a design-token pipeline.

There is no image export and no Adobe ASE file. If you need swatches inside a design tool, paste the hex codes; every major editor accepts them.

Why Does a Palette Fall Apart in a Real Interface?

Because a palette is a set of hues, and an interface needs contrast and hierarchy, which hue alone does not provide.

Three things this tool deliberately does not decide for you:

  • Legibility. Two colours can be a perfect complementary pair and still fail as text on a background. Contrast is a measured ratio between two specific colours, and the Contrast Checker reports it against WCAG AA and AAA. This generator makes no accessibility claim.
  • Colour vision deficiency. Roughly one in twelve men sees red and green compressed towards the same yellow-brown. A triadic scheme built on red and green is the classic failure. The Color Blindness Simulator shows the palette under four deficiencies.
  • Proportion. The old 60/30/10 split holds up: one dominant colour, one secondary, one accent. Five colours at equal weight reads as a swatch sheet, not a design.

How Do You Pick the Base Colour?

Three reasonable starting points, in order of how often they apply.

  • You already have one. A brand colour, a logo colour, a colour from a photograph. Pull it out of an image with the Image Color Extractor.
  • You have a mood. Blues read as stable and institutional, greens as natural and safe, oranges and reds as urgent or energetic, purples as premium. These are conventions rather than laws, but a reader's first impression follows them.
  • You have nothing. Use the random button and stop on something that feels close, then nudge it. Starting from an arbitrary colour and adjusting beats staring at a picker.

Is Anything Uploaded?

No. The schemes are calculated in your browser from the base colour you choose, and nothing is transmitted. The page itself loads advertising and analytics scripts like the rest of the site.

Common Mistakes

Mistake 1: Using All Five Colours Equally

Weight them. One dominant, one secondary, one accent, and the rest as support.

Mistake 2: Treating the Palette as an Accessibility Check

It is not one. Run the pairs you will actually use through the Contrast Checker.

Mistake 3: Red and Green as the Only Difference

That is the pair most colour vision deficiencies flatten. Add a second signal, or separate them by lightness.

Mistake 4: Forgetting Neutrals

Almost every interface needs greys for text, borders and backgrounds. A harmony scheme does not produce them.

Mistake 5: Judging Swatches Instead of a Layout

Colours look different at 400px square than they do as a 1px border or 14px text. Test them in place.

Tools Used in This Guide

FAQ

Q1: Is the color palette generator free? A: Yes. No signup, no limits, and the palette is calculated in your browser.

Q2: What can I export? A: A single hex code per swatch, the whole palette as a comma-separated HEX list, a :root block of CSS custom properties, or a JSON file. There is no image export and no Adobe ASE file.

Q3: Does it check accessibility? A: No, and it does not claim to. Contrast is a measured ratio between two specific colours — use the Contrast Checker for a pass or fail.

Q4: How many colours should a palette have? A: Three to five, plus neutrals. More than five and most of them go unused or dilute the ones that matter.

Q5: What is the difference between complementary and split-complementary? A: Complementary uses the single colour directly opposite, which is the highest-tension pair available. Split-complementary uses the two colours either side of it, keeping most of the contrast with less vibration.

Q6: Can I build a palette from an image? A: Not directly here. Extract the dominant colours with the Image Color Extractor, then use one of them as the base colour on this page.

Next Steps