Color Picker

Pick a colour with the square and sliders, or from anywhere on your screen, and copy it as HEX, RGB, HSL, HSV, CMYK or OKLCH, with contrast checks and lighter and darker shades.

Hue 30°Opacity 100%

Colour code

HEX, rgb(), hsl(), hsv(), cmyk() or a colour name like teal.

Read as HEX · Nearest CSS name: ≈ Dark orange

HEX: #FF8000
RGB: rgb(255, 128, 0)
HSL: hsl(30, 100%, 50%)
HSV / HSB: hsv(30, 100%, 100%)
CMYK: cmyk(0%, 50%, 100%, 0%)
OKLCH (CSS): oklch(73.19% 0.1858 52.98)
Integer (0xRRGGBB): 16744448
Android ARGB: #FFFF8000

As text on white: 2.51:1 · fails WCAG for text
As text on black: 8.33:1 · passes WCAG AAA for all text
Best text on this colour: black

CMYK here is the simple screen formula; a print shop's colour profile can give different values.

Tints (mixed with white)

Shades (mixed with black)

How to use the colour picker

Set the hue with the rainbow slider.
Click or drag in the square to choose how strong and how bright the colour is. With the square selected, the arrow keys move it one step (ten with Shift).
Lower the opacity if you need a see-through colour.
Copy the code you need, or press Save colour to keep it for later.

How the square works

The picker uses the HSV (or HSB) model: hue is the colour around the colour wheel in degrees, saturation how far it is from grey and value (brightness) how far from black. At hue 210°, the point three-quarters of the way across and a quarter of the way down is saturation 75% and brightness 75%: #3078BF, which is rgb(48, 120, 191) and hsl(209.8, 59.8%, 46.9%).

To pick colours out of a photo, use the colour picker from image; to build a set of matching colours, the colour palette generator; to convert a code you already have, the colour code converter.

Everything runs in your browser; nothing is uploaded.

Frequently asked questions

How do I pick a colour?

Choose the hue on the rainbow slider, then click or drag in the square: left to right goes from grey to full colour, top to bottom from bright to black. The codes below update as you move; press Copy next to the one you need.

Can I pick a colour from my screen?

Yes, in browsers that offer an eyedropper (Chrome, Edge and other Chromium browsers from version 95): press Pick from screen and click anywhere, even outside the browser. Where the button doesn't appear, take a screenshot and use the colour picker from image instead.

What's the difference between HEX and RGB?

They're the same colour written two ways. RGB gives red, green and blue from 0 to 255; HEX writes those three numbers in hexadecimal, two digits each. rgb(48, 120, 191) is #3078BF.

What does the opacity slider do?

It sets the alpha, how see-through the colour is. Below 100% the codes gain an alpha: an eighth and ninth HEX digit (#RRGGBBAA), rgba() and hsla(). Not every program reads 8-digit HEX, so use rgba() where it doesn't.

Where are my saved colours kept?

In this browser on this device; nothing is uploaded. Click a saved colour to load it again, or Clear saved to remove them all.

More image tools

Org Chart MakerOrganizational charts (organograms) for a company or team: names, titles, departments and photos, keyboard and drag editing, spreadsheet import, PNG, SVG, PDF.Image to Text Converter (OCR)Extract text from photos, screenshots and scanned PDFs in 21 languages, including Hindi, Tamil and Spanish. Runs in your browser.JPG to Word ConverterTurn a JPG, PNG, photo or scan into an editable Word (.docx) file with OCR in 21 languages, line by line or as paragraphs, with the picture if you want it. No upload.Image to SVG ConverterVectorize a PNG or JPG logo, icon or drawing into SVG with 2–64 colours, three detail levels and a transparent background.SVG OptimizerShrink SVG files with SVGO: paste or open several, set precision, prettify or make responsive, strip scripts.Favicon ICO ConverterFavicon generator: a PNG or JPG logo into a multi-size favicon.ico, or the full package with apple-touch-icon and manifest.

See all image tools →

Can't find the tool you need? Tell us, and the most requested tools get built first.