How to find the hex code of any color

You're looking at a colour somewhere — a photo, a website, a logo — and you need its exact code to use it somewhere else. That code is almost always a hex code, and getting it takes seconds once you know where to look. No colour theory required, just the right tool pointed at the right pixel.

What a hex code actually is

A hex code is a six-digit code, written as #RRGGBB, that describes a colour as three amounts of red, green and blue light mixed together. Each pair of digits is a number from 00 to FF in hexadecimal — which is just 0 to 255 written in base 16 instead of base 10. So #16345C breaks down as 16 (22) red, 34 (52) green, 5C (92) blue: a fair amount of blue, a little green, almost no red — a dark navy. It's a compact, exact way to write down a colour so it renders identically wherever it's used, from a website's CSS to a design tool's swatch panel.

The fastest way: sample it straight off your screen

If the colour you need is visible anywhere on your screen — a website, a screenshot, a photo you've opened, even a video paused on the right frame — the quickest way to its hex code is a screen eyedropper, not guesswork or a colour-matching chart.

1. Open Altto's Color Picker and click Pick from screen.
2. Your cursor turns into a magnified eyedropper. Click the exact pixel you want — anywhere on your screen, not just inside the browser tab.
3. The HEX, RGB and HSL codes for that pixel appear instantly, ready to copy.

This uses your browser's native EyeDropper API, which currently works in Chromium-based browsers — Chrome, Edge, Opera, Brave. If you're on Safari or Firefox, the button stays hidden; a screenshot tool plus your OS's built-in colour picker (Digital Color Meter on macOS, the colour picker inside Paint or PowerToys Color Picker on Windows) does the same job, or open the page in a Chromium browser just to grab the code.

Getting a hex code from a physical object

Paint swatches, fabric, a printed logo — anything that only exists in the physical world doesn't have a hex code until you digitise it. Photograph it in good, even, natural lighting (avoid warm indoor bulbs or direct flash, both of which shift colour), then open that photo on a screen and use the same eyedropper technique above to sample it.

Worth knowing before you rely on the result: this gives you a close match, not a scientifically exact one. Your phone's camera, your screen's colour calibration, and the lighting when the photo was taken all nudge the captured colour slightly away from the real thing. For anything where an exact physical match actually matters — ordering paint, matching a printed brand colour precisely — a physical swatch book or a dedicated colour-matching device beats a photo every time. For matching something on a screen (a website, a design file, a digital mockup), the hex code you read off it is exact, with no such caveat.

HEX vs RGB vs HSL: which one do you actually need?

All three describe the exact same colour, just in different units, and most tools let you use whichever is convenient:

If you're not sure which one a tool wants, HEX is the safest default — it's the format most web design tools, CSS stylesheets and brand style guides expect first. Altto's Color Picker shows and updates all three at once, so switching between them (or converting one you already have) is just a matter of typing it into the matching field.

Common places you'll need one

• Matching a background or accent colour in CSS or a website builder
• Recreating a brand's colour palette in Canva, Figma or a slide deck
• Matching a colour from a screenshot someone sent you
• Checking or documenting the exact colours in your own design system

Common questions