Colour Picker

You need a colour and its hex code. Drag around the square below and it is there, along with the RGB and HSL versions, ready to copy.

And if you have ever picked a colour that looked lovely and then found out later that nobody could read the text on it, do not worry, that is not carelessness. Nothing in an ordinary colour picker tells you, so this one answers it right underneath the swatch instead of leaving you to find out from a complaint.

Everything happens in your browser. Nothing is uploaded and nothing is stored.

The contrast numbers, and what they actually mean

The figure next to each swatch is the contrast ratio, and it runs from 1 to 21. Black on white is 21, the highest there is. The same colour on itself is 1.

Three thresholds matter. They are the ones from the accessibility guidelines, which a lot of countries now write into law:

• 4.5 for body text. Ordinary paragraph text, anything under about 18 pixels.
• 3 for large text. Headings, or bold text above about 18 pixels. Bigger letters are easier to make out, so the bar is lower.
• 3 for buttons and borders. The edge of a box, an icon, the outline that shows which field you are in. These are easy to forget, and a pale grey border that nobody can see is a genuine problem for somebody.

The tool shows all three against white, against black, and against any background you paste in, because the colour on its own means nothing. Contrast is always between two things.

Where it stops. Passing 4.5 does not make text pleasant, only legible. Thin fonts, tight spacing and long lines all make reading harder and none of them show up in this number. Treat it as a floor rather than a target.

Why the maths is not simply an average

Worth knowing, because it explains why some tools disagree with each other.

Your eye is far more sensitive to green than to blue. So the three colour channels are not counted equally when brightness is worked out. The accessibility guidelines set the weightings at 0.2126 for red, 0.7152 for green and 0.0722 for blue, and those exact figures are written into the standard rather than being anybody’s rule of thumb.

Pure green is roughly ten times as bright to your eye as pure blue, even though both are a single channel turned all the way up. A tool that averages the three channels calls them equally bright and is badly wrong on anything strongly coloured.

The numbers on this page use the proper formula. You can check that: black on white should come out at exactly 21.00, and mid grey #767676 on white should be 4.54, which is the well known example that sits just over the line for body text.

HSL lightness is not brightness, and this trips up nearly everyone

Here is a thing worth ten minutes of anybody’s time who builds palettes.

In HSL, the L stands for lightness, and it looks exactly like a brightness control. So the natural thing to do is fix L at the halfway mark, spin the hue around, and collect a set of colours that should all be equally bright.

They will not be. Not even close.

I measured these two on this machine, using the same formula the tool above uses, and you can check them yourself by pasting each colour in:

• Pure yellow is 50% lightness in HSL. Its real brightness, measured, is 92.8%.
• Pure blue is 50% lightness in HSL. Its real brightness, measured, is 7.2%.

Same stated lightness. Thirteen times the actual brightness. That is why a palette built by holding L steady looks all over the place, and why the yellow in it always seems to shout.

And it is not only the loud colours. Mid grey, the #808080 everybody reaches for when they want something exactly halfway, is 50% lightness in HSL and 22% in real brightness. I measured that one too. It is why mid grey always comes out darker than you expected and why your placeholder text keeps failing contrast when it looks fine to you.

Think of it like weighing three sacks by counting how full they look. A sack of feathers and a sack of sand can both be full to the same line and weigh nothing like the same. Lightness measures how full the sack looks. Brightness is the weight.

The tool shows both numbers together and tells you when they have drifted far apart, which is the moment your instinct is about to be wrong.

Where it stops. Knowing the real brightness does not hand you a palette. It tells you when two colours you thought were a matching pair are not, which is the part you cannot see by looking at them one at a time.

The colour blind preview

Roughly one man in twelve has some degree of red and green confusion. One in two hundred women. On any site with a reasonable number of visitors, that is a lot of people.

The three swatches show the same colour as it appears with the common conditions. It is most useful when you are choosing two colours that need to be told apart: a red error and a green success, a used and unused state, two lines on a chart.

Pick both, look at the previews, and see whether they still look like two colours.

Where it stops, and this one matters. These are an approximation of a whole spectrum of conditions, not a photograph of anybody’s sight. Most people who are colour blind see colour, just differently and with less separation, and the severity varies enormously. Use the previews to catch a pair that collapses into one, not as a medical answer.

The real lesson is the one the previews point at: never let colour be the only thing carrying the meaning. Add a word, an icon, an underline. Then it does not matter what anybody sees.

Frequently asked questions

Is it a color picker or a colour picker?

Both, and it is the same thing. I write colour because I am British and the software world writes color because CSS does, so you will see the word both ways on this page and in every stylesheet you have ever opened. A color picker and a colour picker are the same tool.

What can I paste into the boxes?

A hex code with or without the hash, and the three character short version works too. An rgb() or rgba(). An hsl(). Or a plain name like teal or crimson.

If it cannot read what you pasted it says so rather than guessing at something and quietly giving you the wrong colour.

Can I use the keyboard instead of dragging?

Yes. Tab to the square or the hue bar and use the arrow keys. Hold shift to move in bigger steps.

That was worth doing properly here of all places. A colour picker you can only work with a mouse is unusable for some of the very people its contrast figures exist to protect.

Why does the colour look different on my phone?

Because it is different. A hex code is an instruction, not a colour. Every screen interprets it slightly differently depending on its panel, its brightness, its colour settings and whether some night mode is quietly warming everything.

There is nothing a colour picker can do about that, and any tool implying otherwise is overselling. It is also why the contrast figures matter more than how a colour looks to you on your screen: the ratio holds up across displays in a way that your impression of it does not.

Can it pick a colour from an image or from my screen?

Not at the moment, no. Picking from anywhere on the screen needs a browser feature that only some browsers have, and picking from an image means uploading one, which would break the promise that nothing here leaves your machine.

If you have a colour on screen you need, most operating systems have a colour meter built in, and any browser’s developer tools will let you inspect an element and read its colour straight off.

What are the lighter and darker steps for?

They hold the hue and saturation and vary only the lightness, which gives you the set most people need from one brand colour: a pale one for backgrounds, a mid one for the thing itself, a dark one for text and hover states.

Click any of them to make it the current colour, and the contrast figures update straight away, which is usually how you find the one dark enough to actually use for text.

If you have any issues, you can ask me via comment, and I will love to help you out.