Color to RGB

What this tool does

Sometimes you need a colour as RGB, the three numbers for red, green, and blue that a screen works in, and you would rather pick the colour than hunt its values down elsewhere. This lets you choose the colour directly and read its RGB straight away.

That is what this does. You choose a colour on the picker, and it shows you the matching red, green, and blue values, ready to copy, along with the same colour as hex, HSL, and HSV and its individual channels. It is a visual way to settle on a colour and take its RGB, 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 to land on the colour you want.
2. Read the RGB. The red, green, and blue values appear at once, with hex, HSL, and HSV alongside.
3. Copy or save. Click any value to copy it, or use Save to keep the colour among your swatches.

Pick a colour on the picker, read the red, green, and blue values it gives you, and click to copy them or save the colour for later.

How it works

At the centre is a visual colour picker. As you move across it, the tool reads the colour you have chosen and works out its red, green, and blue values, then fills in the other ways of writing the same colour: its hex, HSL, and HSV, and the separate channel figures. The colour handling runs on TinyColor.

Everything it shows is there to click and copy, so taking the RGB, or any other form, is a single tap. You do not type a value or pick a format first; you choose the colour by eye, and the tool gives you all its numbers, leading with the red, green, and blue.

What RGB is

RGB describes a colour as three numbers, one each for red, green, and blue, the three lights a screen mixes to make every colour it shows. Each runs from 0, none of that light, up to 255, full strength, and the three together settle the exact colour.

It is the native language of screens, and the form a lot of code and canvas work expects, which is why having a colour as RGB matters. When you need to hand a colour to something that thinks in red, green, and blue, these are the numbers it wants, and picking the colour here gives them to you directly.

The other values it shows

RGB is what the tool leads with, but the same colour appears in other forms at the same moment. You get the hex code, the compact web form, and HSL and HSV, which describe the colour by its hue with two further values and are handy when you want to adjust it by eye.

It also lays out the colour's individual channels, the separate red, green, blue, hue, saturation, lightness, and value figures. Since each of these is click-to-copy, the tool works as a quick reference too: pick a colour once and read it in whichever form your current task wants, not only RGB.

Saving colours you like

The tool also lets you save colours as you go. When you find one you like, saving it adds it to a small set of swatches, so you can gather a few colours while you explore instead of losing each as you move to the next.

That helps when you are weighing up options or collecting colours for a project. Pick several, keep the ones worth saving, return to them later, and clear the set when you want a clean start. It lets the picker double as a place to assemble a small palette by eye rather than handling one colour at a time.

Why take a colour as RGB

The main reason to use this is that a lot of work wants colour as red, green, and blue. Code that sets colours numerically, canvas drawing, and various tools all take RGB, so picking the colour and reading its RGB gets you straight to the form they need.

It is also an easy way to choose a colour in the first place. Picking by eye is often simpler than entering numbers, especially when you are searching for the right shade rather than matching a known one. You settle on the colour, read off its red, green, and blue, and have the values ready to drop wherever they are needed.

Questions people ask

How do I select a colour?

Choose it on the visual picker. As you move around, the RGB values and the other formats update to the colour you land on.

Can I type values in?

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

What does it give me besides RGB?

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

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 to start over.

References

1. World Wide Web Consortium (W3C), CSS Color Module Level 4. https://www.w3.org/TR/css-color-4/
2. RGB color model, colour as red, green, and blue light. Wikipedia. https://en.wikipedia.org/wiki/RGB_color_model
3. TinyColor (Brian Grinstead). Documentation. https://github.com/bgrins/TinyColor