Tools · colour
Colour explorer
Turn the wheel, pick a rule, and take away exactly the codes you need. Every colour comes with its codes, a name in plain words, and an honest answer about whether text can sit on it.
Drag any marker. Round the wheel changes the hue; in and out changes how vivid it is; the sliders under each colour change how light it is.
Click any code to copy just that one. The link in your address bar always holds this palette, so you can send it to someone.
Can text sit on it?
Every colour as text (down) on every colour as background (across), with its contrast ratio. AA passes for body text, AAA passes comfortably, Large only for big headings, and anything else is decoration.
Tried on a page
The lightest colour becomes the background, the darkest the text, the most vivid the button. Change the palette and watch whether it still works.
As other people see it
About one man in twelve and one woman in two hundred see colour differently. If two colours you rely on to mean different things look the same here, add a label or a shape.
From your own image
A screenshot, a poster, a photo of a shop front. It is read in your browser and never uploaded. Take the five main colours, or click the image to pick one into the selected swatch.
Saved in this browser
Kept on this device only. Click a strip to bring it back.
The codes, all together
Reading the codes
HEX · #184CA5
Three pairs: how much red (18), green (4C) and blue (A5), each from 00 (none) to FF (all). Counting goes 0–9 then A–F, so A5 is more than 99. Equal pairs make a grey.
RGB · rgb(24, 76, 165)
The same three amounts in ordinary numbers, 0 to 255. This is
the colour your screen actually mixes. #184CA5 and rgb(24, 76, 165) are one colour written twice.
HSL · hsl(218, 75%, 37%)
Hue is a direction on the wheel in degrees (0 red, 120 green, 240 blue); saturation is how vivid; lightness runs from black at 0% to white at 100%. The easiest code to adjust by hand.
Contrast · 4.5 : 1
How much lighter the lighter colour is. 1 : 1 is the same colour twice; 21 : 1 is black on white. Body text needs 4.5 : 1 under the accessibility guidelines (WCAG); large headings need 3 : 1.