Colour Schemes

Features

• Seven harmonies: monochromatic, analogous, complementary, split complementary, triadic, tetradic, neutral-anchored
• ⚠️ It also generates random palettes across nine themes: soft, vivid, dark, light, warm, cool, neon, earth and monochrome. Each theme’s ranges (saturation and lightness) are printed on the option itself, so it is not an opaque algorithm
• Random hues are spread evenly, not drawn independently — independent draws readily collide into two near-identical blocks, which is exactly what people dislike about random palettes
• No duplicates within a batch, and lightness alternates between two bands so the blocks do not blur into one another
• Any base colour recalculates the whole set; shorthand (#36f) and long form both work
• A swatch on every colour — a row of hex codes carries almost no information
• Hex for every colour, copyable row by row
• Each scheme says when to use it, and what it costs
• Plus the 60 / 30 / 10 area proportions — wrong proportions are more obvious than wrong colours
• The neutrals are greys tinted with the base hue, so the page reads as one palette rather than blocks on a background
• States whether black or white text reads better on the base colour, with the WCAG contrast ratio
• Common base colours sit in a searchable dropdown — pick one and it computes
• Empty input uses a default base colour as an example, so the first screen is never blank
• Paste tolerance: quotation marks and full-width characters do not break the calculation
• Everything is computed in your browser; the value you enter is not uploaded

How to use

1. Enter a base colour such as #3366ff, or open the dropdown and pick a common one
2. The result lists seven harmonies in groups, every colour with a swatch and a value
3. Each group ends with a line on how to use it and what it costs
4. The last group gives the 60 / 30 / 10 proportions, telling you how much area each colour should take

FAQ

Why do these schemes look different from the ones I expected?

Because a scheme depends entirely on the colour you entered. The same "complementary" scheme yields a completely different pair on red than on blue — and that is exactly the difference between computing harmonies and collecting palettes. A collection gives you someone else’s finished choice; this derives one from your colour. If you want to see a particular effect, enter that colour and compute again.

Where do the names (monochromatic, triadic, and so on) come from?

They are shared knowledge from colour theory, describing angular relationships on the colour wheel: 30° apart is analogous, 180° apart is complementary, dividing the wheel into thirds gives a triadic scheme. This vocabulary was settled in Itten’s writings on colour and in earlier colour theory — it belongs to no one and needs no attribution. The tool simply applies those relationships to your base colour.

Can I use the resulting colours directly in a design?

As a starting point, yes — copied wholesale, no. What it guarantees is that the relationships are right (hue angles, light-to-dark structure). It does not guarantee brand fit, accessibility or context. Two things in particular to check yourself: contrast — body text against its background needs to reach WCAG 4.5:1, and while the tool gives the black/white contrast for the base colour, other pairs are yours to verify — and print, where the RGB values you see will not match what comes off a press. For anything manufactured, match against a physical colour chart.

What is 60 / 30 / 10?

An area ratio: neutrals (background, text, borders) take roughly 60%, the base colour 30%, and the accent 10%. It is the most quoted and most ignored rule in web colour — pick perfect colours and get the areas wrong and the page still looks wrong. The classic failure is flooding the page with the base colour: large areas of high saturation are tiring, and without space there is no hierarchy. Hence a group that puts the three areas next to their actual values.

Why are the neutrals not plain grey?

Because they are tinted with the base hue. Plain grey beside a vivid colour makes a page read as "one background plus some colour blocks"; add a trace of the base hue to the greys and the background, borders and secondary text look like part of the same family as the base colour, so the page holds together. It is also why many design systems ship two sets of neutrals, warm and cool — each is meant to sit with warm or cool brand colours.