Color Picker

Four ways to choose a colour

There are four ways to land on the colour you want, and they all feed the same preview panel at the top of the page. The small colour swatch opens your device's own colour picker, the one built into the browser, so on a laptop you get the full gradient square and eyedropper your operating system provides. Next to it is a text box where you can type a hex code straight in. Below that sit twenty preset swatches, and below those, three RGB sliders.

The hex box accepts both the long and short form. Type #2E86DE and the preview updates as soon as the sixth character lands; type the three-character shorthand #F80 and it expands to #FF8800 for you. Anything that is not a valid hex character is simply ignored as you type, so you cannot end up with a broken code sitting in the field.

The twenty presets run through the spectrum from red round to pink, then finish with black, mid grey and white. They are handy when you just need a reasonable red or a reasonable green and do not want to fiddle. The currently selected swatch gets a ring around it so you can see where you are in the row.

Reading HEX, RGB and HSL side by side

Every colour is shown in four formats at once: the hex code in capitals, a full CSS rgb() string, a full hsl() string, and the three raw RGB numbers on their own with no wrapper. Each one has a copy button beside it that puts the value on your clipboard and shows a green tick for two seconds so you know it worked.

The reason for four boxes rather than one is that different software wants different things. A website stylesheet usually wants the hex code or the rgb() string. Word, PowerPoint and most paint programs ask for red, green and blue as three separate numbers from 0 to 255, which is what the plain RGB values box is for, so you can paste them without deleting brackets and commas by hand. HSL is the odd one out and the most useful for thinking: it gives you hue in degrees around the colour wheel, then saturation and lightness as percentages.

Watching all four change together is the quickest way to understand how a hex colour code actually works. Drag the red slider and you can see the first pair of hex characters climb while the hue figure swings. That is a genuinely good five-minute lesson for an older primary or lower secondary class learning that a colour code is just three numbers written in base sixteen.

Using the RGB sliders to fine-tune a shade

The three sliders under the value boxes each run from 0 to 255 and show their current number on the right. They are tinted live, so the green slider is drawn as a gradient from no green to full green at whatever red and blue you currently have set. That makes it much easier to see what one channel is contributing than a plain grey track would.

This is the part to use when a colour is nearly right. If a blue feels too cold, nudge red up twenty and watch it warm without losing the hue. If a colour looks muddy on screen, pull the lowest of the three channels down rather than pushing the highest one up. The hex code in the big preview panel updates on every step, so you can stop the moment it looks right and copy the code.

What this colour picker does not do

It works from a colour you choose, not from a photograph. There is no image upload, so you cannot drop in a picture and sample a pixel from it, and there is no screen eyedropper built into the page. If your browser's own colour dialog includes an eyedropper, which Chrome and Edge do on desktop, you can reach it through the swatch button and that will pick from anywhere on your screen.

It also does not save anything. Nothing is stored between visits and no palettes are kept, so copy the codes you need into your document or notes as you go. Everything runs in the browser on your own device, which means it works offline once the page has loaded and nothing you pick is sent anywhere.

Classroom and craft uses

For display work, pick your title colour here first and use the same hex code in every slide, poster and label so the board looks deliberate rather than assembled. Copying one code into PowerPoint's custom colour box takes a few seconds and saves the usual problem of six slightly different blues.

For a colour lesson, the preview panel does something quietly useful: the text on it flips between black and white depending on how light the colour behind it is. Ask a class to find the exact point where it switches and you have an easy way into why pale yellow text on white is unreadable and why contrast matters for anyone with low vision. Younger children can simply hunt for a named colour, their favourite colour, or the colour of their reading book cover, and write the code down.