Hue
Where the colour sits on the wheel: red, orange, yellow, green, blue, violet and round to red again. It's measured in degrees, 0 to 360.
Colour by Qyrian
Colour that works.Before it ships.
How we pick colours for the sites we build, in plain words. Then bring your own: choose a few colours and the grader scores them for readability, harmony and balance.
Hue · Harmony · ContrastScroll for the basicsGrader below
№ 03 · Colour01 · The three dials
Every colourhas three dials.
Hue, saturation and lightness. Any colour on a screen can be described with those three numbers, and almost every colour decision is a choice about one of them. Turn them here and watch what changes.
Drag on the wheel, or use the sliders. Around the edge is hue; toward the centre, saturation falls to grey.
- Hex
- #8B3DFF
- HSL
- 265° 100% 62%
- Value
- 45 of 100
Saturation
How much colour there is against grey. At 100% you get the purest version of the hue; at 0% you get a grey of the same lightness.
Lightness and value
How close the colour is to black or white. Value is lightness as the eye reads it, shown here as a grey. Yellow and blue can share an HSL lightness and still sit far apart in value.
Warm and coolare directions.
Warm hues run from red through orange to yellow. Cool hues run from green through blue to violet. Greens and purples sit on the border, and designers treat them as either depending on the mix around them.
Most palettes let one temperature lead and borrow a little of the other, so a single cool colour in a warm palette (or the reverse) has something to stand out against.
On the hue wheel, 330 to 90 degrees is warm, 150 to 270 degrees is cool, and the greens and purples in between can go either way.
№ 03 · Colour02 · Harmony
Six ways huesget along.
Harmonies are patterns on the colour wheel. They don't guarantee a good palette, but they give the hues a reason to be together. Move the starting hue and all six patterns turn with it.
№ 03 · Colour03 · Proportion
Sixty, thirty,ten.
A rule of thumb designers use to stop colours fighting: one colour covers most of the page, a second supports it, and a third is saved for the few things you want people to notice, usually buttons and links.
- 60%Cream: the page itself.
- 30%Navy: text, the photo panel, the footer.
- 10%Coral: the button and small markers.
With the split at 60/30/10, the coral button is the loudest thing on the page, so it's where the eye goes. Switch to equal thirds and the button has to compete with the header and the hero.
№ 03 · Colour04 · Contrast
Can peopleread it?
Contrast is the one part of colour with a published standard. The Web Content Accessibility Guidelines (WCAG) give a formula and two thresholds: 4.5:1 for body text and 3:1 for large text. Try any pair.
Large text, 24 pixels.
Body text at 17 pixels. This is the size most of a website is read at, so it needs the higher of the two thresholds.
Contrast ratio
4.48:1
How it's worked out: each colour's red, green and blue are converted to linear light, then weighted by how strongly the eye responds to each, giving a relative luminance from 0 (black) to 1 (white).
L = 0.2126 R + 0.7152 G + 0.0722 B
ratio = (L lighter + 0.05) ÷ (L darker + 0.05)
The ratio runs from 1:1 (the same colour) to 21:1 (black on white). Large text means at least 24px, or about 18.7px in bold.
Source: WCAG 2.2, 1.4.3 Contrast (Minimum), 1.4.6 Contrast (Enhanced), 1.4.11 Non-text Contrast and the relative luminance definition.
№ 03 · Colour05 · Real palettes
Palettes fromsites we built.
Five live sites, five palettes, each shown at the share of the page its colours take. Load any of them into the grader to see how it scores and why.
№ 03 · Colour06 · The grader
Grade yourcolours.
Pick two to five colours. Leave the roles on Auto or tell the grader which colour is the background, the text and the accent. The score updates as you go, with the working shown.
Your palette
Starter swatches
Tap one to add it to your palette.
0of 100
Two suggestions
Live preview
Readability
Harmony
Balance
Temperature
How the score works
The total
Readability is worth 40 points, harmony 30 and balance 30. Each part is scored out of 100 and weighted, so the parts add up to the total. If the body text is below 3:1, the total is capped at 49, because a palette people can't read can't be a good one.
The same colours always get the same score. Nothing is random, and nothing you pick leaves this page.
Roles
On Auto, the background is the lightest or darkest of your calmer colours, the text is the colour with the most contrast against it, and the accent is the most saturated colour left over. Anything else is a support colour. You can set any role yourself.
Readability (40)
Every text colour is checked against every background with the WCAG 2.x contrast ratio. The weakest pair sets three quarters of this part: 7:1 or better earns full marks, 4.5:1 (the AA line for body text) earns 80, 3:1 earns 45, and it falls to zero at 1:1.
The last quarter checks the accent: it should stand out from the background by 3:1, and carry a button label (the best of your colours, white or black) at 4.5:1.
Harmony (30)
Only colours with real colour in them count; greys, black, white and near-neutrals go with anything. Hues within 15° are treated as one. The hues are then matched to the classic patterns, within 10° to 20° depending on the pattern.
Complementary 95; one accent on neutrals 92; split-complementary 92; monochromatic, analogous and triadic 90; tetradic 85; part of a pattern 76 to 86; neutrals only 72; no clear relationship 25 to 48, lower the more unrelated hues there are. Sitting slightly off a pattern costs up to 8 points.
Balance (30)
Lightness spread is 40% of this part: the gap between your lightest and darkest colour in CIE lightness, with full marks at 60 points of 100 or more. Loudness is 40%: one strongly saturated colour is ideal, a second costs a little, and three or more cost a lot. Distinctness is 20%: two colours that are nearly the same cost points.
The 60/30/10 split puts the background on the biggest share, the accent on 10%, and the calmer colours on the rest.
Temperature
Reported, not scored. Hues from 330° to 90° read as warm, 150° to 270° as cool, and the greens and purples between as either. Neutrals are left out.
№ 03 · ColourYour site
Want colours like theseon your site?
We'll choose a palette with you, check every pair for readability, and build it into a site you own.