Colour picker
Colour with a u, exactly as you would write it. Pick on the square, slide the hue, or type HEX, RGB or HSL and watch the three notations agree.
Guide
How to use it
- Drag on the square to set saturation and brightness, slide the bar for hue.
- Or type a value into any field, HEX, RGB or HSL all accept input and stay in sync.
- Copy the notation your work needs.
- Check contrast before committing: 4.5:1 against the background is the accessibility bar for body text.
Examples
Colour, the spelling and the notation
The words differ, the values cannot: CSS properties are American (color, background-color) even in British codebases. Write colour in your prose and color in your stylesheets, everyone does.
A terracotta from this site’s own palette. Sampling brand colours into HEX is the fastest way to keep documents and slides on-brand.
The WCAG AA contrast minimum for body text. The checker below the swatch says whether your colour passes as text on white and on black.
Method
How it works
This is the same engine as the color picker page: HSV internally, converted to RGB, HEX and HSL notation live in both directions, with WCAG 2.1 relative-luminance contrast maths against white and black.
It exists as its own page because British English writers search for "colour picker" and deserve prose that does not fight their spellchecker. The colours themselves are jurisdiction-free.
FAQ
Frequently asked questions
Is there any difference from the color picker?
None in function. Same picker, same maths, British prose. Bookmark whichever spelling your fingers type.
Why is CSS spelled color?
CSS standardised on American English in the 1990s and consistency won. Even the UK government’s design system writes color in code and colour in guidance.
Which format should I give a printer?
Neither, ask for their spec: print works in CMYK or Pantone. HEX and RGB describe light on screens, a conversion by eye will disappoint, ask the printer to convert properly.
How do I make a colour scheme from one colour?
Work in HSL: keep hue, vary lightness for tints and shades, shift hue by 30° steps for related accents. The recent swatches hold the set while you build it.
Does the eyedropper work in Safari or Firefox?
Not yet, the EyeDropper API is Chromium-only. Everything else on this page works in every modern browser.
Is anything I pick sent anywhere?
No. Colours, images you sample from on the image page, all of it stays in your browser.
More tools