What is a HEX colour code?

Six characters after a # that give the amounts of red, green and blue, two characters each, in base 16. #FF0000 is pure red, #00FF00 is green and #0000FF is blue.

How do I convert HEX to RGB?

Split the six characters into three pairs and convert each from base 16 to a number from 0 to 255. #C7A05A is C7 = 199, A0 = 160, 5A = 90, so rgb(199, 160, 90).

How do I pick a colour from somewhere on my screen?

Click the colour box. In Chrome and Edge, the chooser that opens has an eyedropper button that lets you click any pixel on your screen.

Color Picker

Pick any colour and get its HEX, RGB and HSL codes to copy. Free online colour picker for web design and CSS.

How to use it

Click the colour box to open your browser’s colour chooser.
Pick a colour. The codes update straight away.
Press Copy beside HEX, RGB or HSL.

The three formats

All three describe the same colour. They are different ways of writing it.

Format	Example	How it works
HEX	`#C7A05A`	Red, green and blue as three two-digit base-16 numbers
RGB	`rgb(199, 160, 90)`	Red, green and blue, each from 0 to 255
HSL	`hsl(39, 49%, 57%)`	Hue (0 to 360°), saturation and lightness (0 to 100%)

Screens make every colour by mixing red, green and blue light. With 256 levels of each, there are 256 × 256 × 256 = 16,777,216 possible colours.

Why HSL is useful

HSL matches how people think about colour:

Hue is the position on the colour wheel: 0° is red, 120° is green, 240° is blue.
Saturation is how vivid it is. 0% is grey.
Lightness runs from black at 0% to white at 100%.

To make a darker shade of a colour for a button’s hover state, keep the hue and saturation and lower the lightness. That is hard to do by eye in HEX.

Using the codes in CSS

.button { background: #c7a05a; }
.button { background: rgb(199, 160, 90); }
.button { background: hsl(39, 49%, 57%); }

All three lines give the same result. HEX codes are not case sensitive.

Limits

The look of the colour chooser, and whether it has an eyedropper, depends on your browser.
Transparency (alpha) is not included.
HSL values are rounded to whole numbers, so converting HSL back to HEX can differ by a step.
Colours look different from screen to screen, and print uses CMYK inks, which cannot reproduce every screen colour.