Color Picker

What this does and who it is for

Pick a colour, or paste a HEX code, and get it back in every format you might need: HEX for CSS and design tools, RGB, HSL, HSV, and CMYK for anything going to print. From there it will build the standard palette relationships — complementary, analogous, triadic, split-complementary — and, more usefully, tell you the WCAG contrast ratio between any two colours you have chosen.

It is for the moment when you have a brand colour and a decision to make: can I actually set body text in this, or on this. Most colour tools will answer the first half of that question, generating a tidy palette and leaving you to discover months later that your link colour is unreadable for a meaningful fraction of your visitors. The contrast number is the part with a specification behind it, so it is the part this page spends its time on.

Both spellings work, incidentally — "color picker" and "colour picker" describe the same tool, and CSS only accepts the American spelling in property names, which is why you will see color in code samples and "colour" in the prose below.

How to read the output — a worked example on a real colour

Take #3B82F6. It is a pleasant mid-blue, it is the default blue in several popular utility CSS frameworks, and it is on a very large number of buttons and links. Here is what the contrast checker does with it.

First, convert each 8-bit channel to a fraction: R = 59/255 = 0.2314, G = 130/255 = 0.5098, B = 246/255 = 0.9647.

Then linearise each one. W3C's technique for this criterion gives the formula: if the channel value is at or below 0.04045, divide it by 12.92; otherwise take ((value + 0.055) / 1.055) to the power 2.4. All three channels here are above the threshold, so:

• R = ((0.2314 + 0.055) / 1.055) ^ 2.4 = 0.0437
• G = ((0.5098 + 0.055) / 1.055) ^ 2.4 = 0.2232
• B = ((0.9647 + 0.055) / 1.055) ^ 2.4 = 0.9216

Then weight them, because the eye is far more sensitive to green than to blue:

L = 0.2126 × 0.0437 + 0.7152 × 0.2232 + 0.0722 × 0.9216 = 0.2355

White has a relative luminance of 1.0. The contrast ratio is (L1 + 0.05) / (L2 + 0.05) with the lighter colour on top:

(1.0 + 0.05) / (0.2355 + 0.05) = 1.05 / 0.2855 = 3.68:1

That single number decides several things at once. WCAG 2.2 success criterion 1.4.3, at level AA, requires a contrast ratio of at least 4.5:1 for text, dropping to 3:1 for large-scale text — which the specification defines as at least 18 point, or 14 point bold. Criterion 1.4.6, at level AAA, wants 7:1, or 4.5:1 for large text. And criterion 1.4.11 requires 3:1 for the visual information needed to identify user interface components and their states.

So #3B82F6 on white, at 3.68:1:

• Fails AA for normal body text and for link text in a paragraph.
• Passes AA for large-scale headings at 18pt or 14pt bold.
• Passes the 3:1 requirement for the border of a button or an input, or an icon that carries meaning.
• Fails AAA at any text size.

That is the most common accessibility defect on the modern web, and it is not an obscure one. It is the default blue, on white, used for link text. The tool tells you in the time it takes to paste the hex code.

Two footnotes worth knowing. Text that is part of a logo or brand name has no contrast requirement at all under 1.4.3, so the argument "but it is our brand colour" is valid for the logo and nowhere else. And the threshold in the linearisation step used to be 0.03928 before May 2021; W3C notes the change has no practical effect on the calculation, which is reassuring if you find two calculators disagreeing in the fourth decimal place.

Why your palette generator will not save you

Here is the thing that makes contrast counter-intuitive, and it is the reason palettes generated from HSL relationships so reliably fail.

HSL has a lightness channel. It is tempting to read it as perceived brightness. It is not. Pure yellow is hsl(60, 100%, 50%) and pure blue is hsl(240, 100%, 50%) — identical lightness values, 50% each. Their relative luminances are 0.9278 and 0.0722. Against a white background, the yellow manages 1.07:1 and the blue manages 8.59:1. Same declared lightness, an eightfold difference in contrast, one of them completely invisible.

The cause is the green weighting in the luminance formula. Green contributes 0.7152 of the total, red 0.2126, blue only 0.0722. Any colour scheme built by rotating hue at fixed HSL lightness will produce members that differ enormously in real contrast, with the yellows and greens far too light and the blues and purples far too dark. This is why an analogous palette can look balanced in the swatch strip and fall apart the moment you put text on it.

The practical consequence: generate the palette however you like, then check every pairing you intend to actually use. The palette is a starting point, not a result.

The same blue, measured across a ramp

This is the table worth bookmarking. One blue hue at six lightness steps, each measured against a white background and against a dark #111827 background, with the verdict from the criteria above.

Read down both columns and the finding is stark: not one shade in this ramp passes AA for normal text on both backgrounds. Shade 500 fails on white. Shade 600 fails on dark. Nothing bridges it.

That is not a flaw in the ramp, it is arithmetic — a colour cannot be simultaneously far from white and far from near-black. But it does invalidate the way most design systems are built. If your dark mode reuses the same --color-primary token as your light mode, one of the two modes is inaccessible, and it is almost certainly the one you look at less often. Dark mode needs its own token pointing at a lighter shade, typically two steps up the ramp: 600 on white, 400 on dark, and both pass.

About colour psychology

The claim that blue means trust, green means growth and red means urgency appears on virtually every page about brand colour, usually with a list of well-known companies attached. The observations about the companies are accurate — the brands cited really do use those colours. The causal claim is much weaker than the confident tone suggests. Colour associations vary substantially by culture and by context, most of the widely circulated studies are small, and the effect of a colour is difficult to separate from the effect of everything else about a well-designed brand. Where a colour genuinely does the work attributed to it, it is usually because a category has converged on a convention and the colour is signalling "I am a member of this category", which is a real effect but a different one.

Treat it as a weak prior, then. Useful for narrowing an initial shortlist, not worth arguing over, and no basis for overruling a contrast failure. The contrast ratio has a specification, a formula and a pass mark. The psychology does not, and a brand colour nobody can read is not communicating anything at all.

Common mistakes

Testing the palette against white only. Half your visitors may be in dark mode. The ramp table above shows why one token cannot serve both.

Reading HSL lightness as perceived lightness. It is not, and the yellow-versus-blue example above is the eightfold proof.

Testing text colour against the page background instead of against what is behind the text. If your text sits on a card, a gradient or an image, the relevant background is the pixels immediately next to the letters. On a gradient, the worst point on the gradient is the one that has to pass.

Assuming the brand exemption covers more than the logo. Criterion 1.4.3 exempts text that is part of a logo or brand name. It does not exempt your navigation, your buttons or your body copy.

Forgetting the 3:1 requirement on non-text elements. A very light grey input border may be invisible against a white card and still be the only thing indicating a field exists. Criterion 1.4.11 applies to the visual information needed to identify components and their states, which includes focus and hover.

Using CMYK values as if they were reliable. CMYK is not a CSS colour type and the conversion from RGB is device-dependent; the values here are a reasonable starting point for a print job, not a colour-managed result. If the print run matters, ask the printer for the profile.

Placing pure yellow, cyan or lime text on white. They will be somewhere between 1:1 and 1.4:1. Bright colours feel high-contrast because they are saturated; contrast is about luminance, and saturation is not luminance.

Checking accessibility at the end. Contrast failures found after the design system is built are expensive, because the fix is usually a token change that ripples through every component. Check the two or three pairings you will use most before anything is built on them.

Frequently Asked Questions

What contrast ratio do I actually need?

For normal-size text, 4.5:1 to meet WCAG 2.2 at level AA. Large-scale text — 18 point or larger, or 14 point bold — needs 3:1. Level AAA raises those to 7:1 and 4.5:1. Non-text elements such as button borders, form field outlines and meaningful icons need 3:1 under criterion 1.4.11.

Why does a colour that looks bright have terrible contrast?

Because contrast is calculated from relative luminance, not from saturation, and the formula weights green at 0.7152 against blue at 0.0722. A vivid yellow is very close to white in luminance terms and a vivid blue is very close to black, regardless of how intense either looks.

Is my brand colour exempt because it is our brand colour?

Only in the logo. WCAG 2.2 explicitly exempts text that forms part of a logo or brand name from the contrast requirement. Everything else on the page — including buttons in your brand colour with white text on them — has to meet the ratio.

Can I use the same primary colour in light and dark mode?

Almost certainly not, if you want both to pass. A colour with enough contrast against white is by definition close to black, which leaves it with very little contrast against a dark background. Define separate tokens and pick a lighter shade for dark mode.

Does HSL lightness tell me anything about contrast?

Very little across different hues. It is useful for generating a consistent-looking ramp within one hue, which is why design systems are built that way, but two colours with the same HSL lightness can differ by a factor of eight in contrast ratio.

What about CMYK — can I trust these numbers?

Use them as a starting point. CMYK output depends on the ink, paper and press profile, and there is no single correct conversion from a screen colour. For anything where colour accuracy matters commercially, get the profile from whoever is printing it.

Which formula does the contrast figure use?

The WCAG one: linearise each sRGB channel, weight them 0.2126 red, 0.7152 green and 0.0722 blue to get relative luminance, then take (L1 + 0.05) / (L2 + 0.05) with the lighter colour as L1. The worked example above shows every step on #3B82F6.

Does passing 4.5:1 mean my design is accessible?

No. It means one specific criterion is met. Contrast says nothing about text size, line length, focus indicators, motion, whether colour alone carries meaning, or whether the thing works with a keyboard. It is a necessary condition and a long way from a sufficient one, which is worth saying plainly because "we checked contrast" is often where accessibility work stops.

Where a colour tool stops being enough

A picker gives you the numbers. Getting the numbers to stay right across a real project is a different problem, and it is a systems problem rather than a design one.

The version that actually holds up looks like this: the palette lives in one place as tokens rather than as hex codes typed into components, light and dark variants are defined separately and both checked, and the contrast assertions run in the build so a regression fails rather than ships. The same applies past the website — every automatically generated graphic, email template and social image should be reading brand colours from that one source rather than from whatever was pasted in when the template was written, or they drift apart within a quarter.

Building that plumbing — the token layer, the checks in CI, and the generation pipeline that consumes it — is the sort of front-end and automation work I take on. If you have a design system that has quietly diverged from itself, or you are starting one and would rather not discover the contrast problem in month six, book a call and we can look at it. Smaller scoped pieces are available through Upwork or Fiverr.

If you already have the code and only need it in another notation, the hex to RGB converter does that one job, with alpha and HSL.

Related reading and tools: Automate Social Media Posting is where the brand-colour-in-a-central-config point matters most, because every generated graphic has to stay on brand without a human checking it. The QR Code Generator has its own contrast constraint — a low-contrast QR code does not scan, which is a harsher pass mark than 4.5:1 — and the Open Graph Preview is where you find out whether the colours you picked survive being rendered as a link card at thumbnail size.

Sources: WCAG 2.2, success criteria 1.4.3, 1.4.6 and 1.4.11 for the required ratios and the large-text and logotype exceptions; W3C Technique G17 for the relative luminance and contrast ratio formulae, including the note on the 0.03928 to 0.04045 threshold change.