How do I pick a color and get its hex code?

Drag the point around the square to set saturation and brightness, and the slider beneath it to set the hue. The hex code updates as you move and can be copied in one click. If you already have a code, type it into the hex box instead and the picker moves to it.

What do the square and the slider actually control?

The slider is hue, the quality that makes red red. The square is the other two axes at that hue: saturation runs left to right, from gray to the pure color, and brightness runs bottom to top, from black to full. Three numbers describe any color on a screen, and those are the three.

Can I pick a color from an image or from my screen?

For an image, use the palette extractor, which reads the picture and returns the colors that are genuinely in it with a role assigned to each. This picker works the other way round: you choose the value and it gives you the codes.

Which code should I use, hex or RGB or HSL?

Hex and RGB describe the same thing and convert exactly, so use whichever your tool expects. HSL is worth reaching for when you want to change a color rather than state one, because adjusting a lightness number is predictable in a way that adjusting three channels is not.

Is anything sent to a server?

No. The picker runs entirely in your browser, and the color you choose lives in the address bar, so sharing the exact color is just sharing the link. Nothing is stored and nothing is uploaded.

Color picker

Drag the point to choose a color, or type a hex you already have. The code updates as you move and copies in one click, in hex, RGB or HSL. Press F and the color fills the whole screen, which is the fastest way to judge one properly before you commit to it.

#7A5CFFrgb(122, 92, 255) · hsl(251, 100%, 68%)

Hue251°

Brightness100%

Three controls, and what each one is for

Every color on a screen is three numbers. The picker gives you one control per number, which is why it gets you to a specific color faster than typing codes and looking.

The square: saturation and brightness

Left to right is saturation, from gray through to the pure hue. Bottom to top is brightness, from black up to full output. The top right corner is always the most intense version of the current hue, and the entire left edge is gray no matter which hue you have chosen, because a color with no saturation has no hue to show.

The slider: hue

Hue is the position on the color circle, running red, orange, yellow, green, cyan, blue, purple and back to red. It wraps, so 0 and 360 are the same place. Moving this alone keeps the color equally vivid and equally light, which is what you want when a design is right but the color is wrong.

The box: an exact value

Paste a hex to jump straight to it, which is the quickest route when you are matching something rather than exploring. The field and slider move to meet the value, so you can arrive at an exact code and then adjust from there rather than starting over.

Start from a color that has a name

Picking from nothing is harder than picking from something. Each of these opens a page with its codes, its shades and tints, the schemes built on it and what it clears for contrast.

Or browse the full color library, the 148 CSS keywords, or a curated palette if you need a set rather than one color.

Common questions

How do I pick a color and get its hex code?: Drag the point around the square to set saturation and brightness, and the slider beneath it to set the hue. The hex code updates as you move and can be copied in one click. If you already have a code, type it into the hex box instead and the picker moves to it.
What do the square and the slider actually control?: The slider is hue, the quality that makes red red. The square is the other two axes at that hue: saturation runs left to right, from gray to the pure color, and brightness runs bottom to top, from black to full. Three numbers describe any color on a screen, and those are the three.
Can I pick a color from an image or from my screen?: For an image, use the palette extractor, which reads the picture and returns the colors that are genuinely in it with a role assigned to each. This picker works the other way round: you choose the value and it gives you the codes.
Which code should I use, hex or RGB or HSL?: Hex and RGB describe the same thing and convert exactly, so use whichever your tool expects. HSL is worth reaching for when you want to change a color rather than state one, because adjusting a lightness number is predictable in a way that adjusting three channels is not.
Is anything sent to a server?: No. The picker runs entirely in your browser, and the color you choose lives in the address bar, so sharing the exact color is just sharing the link. Nothing is stored and nothing is uploaded.

All tools