Color to Hex

What this tool does

You have a colour in mind, or one you are feeling your way toward, and you want its hex code, the compact form the web uses. Rather than reading values off somewhere else, this lets you pick the colour directly and gives you the hex straight away.

That is what this does. You choose a colour on the picker, and it shows you the matching hex code, ready to copy, along with the same colour in RGB, HSL, and HSV and its individual channels. It is a visual way to land on a colour and take its hex, with the other formats there too, and a place to save the colours you want to keep.

How to use it

1. Pick a colour. Move around the colour picker until you land on the colour you want.
2. Read the hex. The hex code appears straight away, with RGB, HSL, HSV, and the channel values alongside.
3. Copy or save. Click any value to copy it, or save the colour to keep it in your swatches.

Pick a colour on the picker, read the hex it gives you, and click to copy it or save the colour for later.

How it works

The heart of the tool is a visual colour picker. As you move around it, the tool reads the colour you have landed on and works out its hex code, then fills in the other ways of writing the same colour: its RGB, HSL, and HSV, and the separate red, green, blue, hue, saturation, lightness, and value figures. The colour handling is done with TinyColor.

Every value it shows is there to click and copy, so taking the hex, or any other form, is a single tap. There is no need to type a code or say which format you want; you choose the colour by eye, and the tool gives you all the numbers for it, with hex as the one it leads on.

What a hex code is

A hex code is the six-character form of a colour used across the web, written after a hash, like a compact address for a colour. The six characters are three pairs, one each for red, green, and blue, and each pair says how much of that channel is present, from none up to full.

Hex is popular because it is short, exact, and understood almost everywhere colour is used. A stylesheet, a design tool, or a note to a teammate all take a hex code without fuss, which is why turning a colour you have picked into hex gives you a single tidy token you can use and share anywhere.

The other values it shows

Hex is what the tool leads with, but the same colour is shown in several other forms at the same time. You get RGB, the three numbers for the red, green, and blue a screen mixes, and HSL and HSV, which describe the colour by its hue along with two further values, handy when you want to adjust it by eye.

It also breaks the colour into its individual channels, the separate red, green, blue, hue, saturation, lightness, and value figures. Because every one of these is click-to-copy, the tool doubles as a quick reference: pick a colour once and read it off in whichever form the job in front of you happens to want, not just hex.

Saving colours you like

Alongside the picker, the tool lets you save colours. When you land on one you like, saving it adds it to a small set of swatches, so you can build up a handful of colours as you explore rather than losing each one as you move on.

This helps when you are comparing options or gathering a few colours for a piece of work. You can pick several, save the ones worth keeping, come back to them, and clear the set when you want to start fresh. It turns the picker from a one-colour-at-a-time tool into somewhere you can collect a small palette by eye.

Why take a colour as hex

The main reason to reach for this is that hex is the colour form the web and most design tools expect. Whenever you need to put a colour into CSS, HTML, or a design file, it wants a hex code, so picking the colour and taking its hex gets you straight to the usable form.

It is also just a comfortable way to choose a colour. Picking by eye on a visual tool is often easier than typing numbers, especially when you are searching for the right shade rather than reproducing an exact one. You land on the colour, read off the hex, and have something compact and portable to paste wherever you need it.

Questions people ask

How do I choose a colour?

Pick it on the visual colour picker. As you move around, the hex code and the other values update to match the colour you have landed on.

Can I type a colour code in?

This tool works by picking a colour on the picker rather than typing a code. Once you pick, it gives you the hex and the other formats to copy.

What does it give me besides hex?

The same colour in RGB, HSL, and HSV, plus its individual channel values, each one click-to-copy alongside the hex.

Can I save colours I like?

Yes. Saving adds the current colour to a set of swatches you can build up as you go, and you can clear the set when you want to start over.

References

1. World Wide Web Consortium (W3C), CSS Color Module Level 4. https://www.w3.org/TR/css-color-4/
2. Web colors, hex codes and named colours on the web. Wikipedia. https://en.wikipedia.org/wiki/Web_colors
3. TinyColor (Brian Grinstead). Documentation. https://github.com/bgrins/TinyColor