How to find the HEX code of a colour: on your screen, in a photo or on a website

What a HEX code is

Screens mix every colour from red, green and blue light. A HEX code writes those three amounts as pairs of hexadecimal digits (0–9 then A–F), from 00 for none to FF for full, which is 255:

The same colour can be written in other ways, and Colour Picker shows all of them side by side: RGB, HSL (hue, saturation, lightness, handy for making a colour lighter or darker in CSS), HSV or HSB (what most design apps' pickers use) and CMYK (an approximation for print; real print colour depends on the printer and paper).

From anywhere on your screen

In Chrome or Edge on a computer, the browser can lend a web page an eyedropper:

1. Open Colour Picker and press Eyedropper. The pointer becomes a magnifier.
2. Click the colour you want, anywhere on your screen: another tab, a PDF, a design app, a video. Press Esc to cancel.
3. Tap the HEX code to copy it, or the copy button next to RGB, HSL, HSV or CMYK.

Safari and Firefox don't offer the eyedropper to web pages yet, so the button only appears where it works. Two built-in tools do the same job:

• Mac: Digital Color Meter, in Applications › Utilities. Choose View › Display Values › Hexadecimal, point at the colour and press Shift ⌘ C to copy it as text.
• Windows: the free Microsoft PowerToys includes a Color Picker; press Win Shift C and click.

From a photo or screenshot (and on a phone)

Phones don't let web pages read other apps' pixels, so take a screenshot first. Then:

1. In Colour Picker, press Photo and choose the screenshot or photo. On a computer you can also drop or paste an image.
2. Touch and drag on the image. A loupe magnifies the pixels under your finger, with the exact pixel framed in the middle, so your finger never hides what you're picking.
3. Let go to pick it. The colour goes to your recent colours, and every format is ready to copy.

The image is read inside your browser and never uploaded.

From a website

A picked pixel can be off by a shade (smooth edges, gradients, image compression). For the exact colour a site uses, read its CSS:

1. Right-click the element and choose Inspect (in Safari, first turn on Settings › Advanced › Show features for web developers).
2. Find color, background-color or border-color in the Styles panel. The small square beside the value is the colour.
3. Copy the value. If it's written as rgb(), hsl() or a name like tomato, paste it into any field in Colour Picker to get the HEX code.

Converting RGB to HEX by hand

Each RGB number from 0 to 255 becomes two hex digits: divide by 16; the whole part is the first digit and the remainder is the second, where 10–15 are written A–F.

Going the other way, multiply the first digit by 16 and add the second: 6B is 6 × 16 + 11 = 107. Or type either form into Colour Picker and copy the other.

Common colours and their HEX codes

Colour Picker also shows the nearest of CSS's 140-odd named colours for whatever you pick, which is handy when you need a word for a colour.

Common mistakes

• Picking on an edge. Text and shape edges blend into the background; pick from the middle of the area.
• Picking from a dimmed or night-shifted screen. Night Shift and True Tone change what you see, but an eyedropper reads the real pixel, so trust the code over your eyes.
• Treating CMYK from a screen colour as exact. It's a starting point; ask your printer for a proof when colour matters.
• Mixing up 8-digit codes. The last two digits of #RRGGBBAA are opacity, not part of the colour.