Quick answer: a hex code is a six-character code such as #16345C that describes a colour as amounts of red, green and blue. To find one, open a colour picker with a screen eyedropper — Altto’s free Color Picker has one — click Pick from screen, then click the colour you want. Its HEX, RGB and HSL codes appear instantly, ready to copy.
Already have an RGB or HSL value? Type it into the Color Picker and the hex code updates to match.
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 (you’ll also see it called a “hex color code”, with the American spelling that CSS uses), and getting it takes seconds once you know where to look.
What is a hex colour code?
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: mostly blue, a little green, very little red — a dark navy.
A few things that help you read them at a glance:
#000000is black (no light),#FFFFFFis white (full red, green and blue),#FF0000is pure red and#0000FFis pure blue.- When all three pairs are the same, the colour is a grey:
#808080is a mid grey. - Letters can be upper or lower case —
#16345cand#16345Care identical. - Three-digit codes are shorthand:
#F80means#FF8800. Altto’s Color Picker accepts both forms.
Common colours and their hex codes
These are the standard web colours, with the same names and codes used in CSS, so you can paste them straight into a website, a design app or a document. Most of the names also work on their own in CSS (color: teal;).
- Black
#000000rgb(0, 0, 0) - White
#FFFFFFrgb(255, 255, 255) - Grey
#808080rgb(128, 128, 128) - Silver
#C0C0C0rgb(192, 192, 192) - Red
#FF0000rgb(255, 0, 0) - Crimson
#DC143Crgb(220, 20, 60) - Maroon
#800000rgb(128, 0, 0) - Coral
#FF7F50rgb(255, 127, 80) - Salmon
#FA8072rgb(250, 128, 114) - Orange
#FFA500rgb(255, 165, 0) - Gold
#FFD700rgb(255, 215, 0) - Yellow
#FFFF00rgb(255, 255, 0) - Khaki
#F0E68Crgb(240, 230, 140) - Beige
#F5F5DCrgb(245, 245, 220) - Tan
#D2B48Crgb(210, 180, 140) - Chocolate
#D2691Ergb(210, 105, 30) - Olive
#808000rgb(128, 128, 0) - Lime
#00FF00rgb(0, 255, 0) - Green
#008000rgb(0, 128, 0) - Forest green
#228B22rgb(34, 139, 34) - Teal
#008080rgb(0, 128, 128) - Turquoise
#40E0D0rgb(64, 224, 208) - Cyan
#00FFFFrgb(0, 255, 255) - Sky blue
#87CEEBrgb(135, 206, 235) - Blue
#0000FFrgb(0, 0, 255) - Navy
#000080rgb(0, 0, 128) - Indigo
#4B0082rgb(75, 0, 130) - Purple
#800080rgb(128, 0, 128) - Violet
#EE82EErgb(238, 130, 238) - Lavender
#E6E6FArgb(230, 230, 250) - Magenta
#FF00FFrgb(255, 0, 255) - Pink
#FFC0CBrgb(255, 192, 203)
A few of these surprise people: CSS “Green” is the darker #008000, while pure bright green is called Lime (#00FF00), and “Grey” (#808080) is darker than “Silver”. Want a shade that isn’t here? Pick it on the colour wheel in the Color Picker and copy its code.
How to find the hex code of a colour on your screen
If the colour is visible anywhere on your screen — a website, a screenshot, a photo you’ve opened, even a paused video — the quickest way to its hex code is a screen eyedropper.
- Open Altto’s Color Picker and click Pick from screen.
- Your cursor turns into a magnified eyedropper. Click the exact pixel you want — anywhere on your screen, not just inside the browser tab.
- The HEX, RGB and HSL codes appear straight away. Click Copy next to the one you need.
The button uses your browser’s built-in EyeDropper feature, which currently works in desktop versions of Chrome, Edge and other Chromium-based browsers. Safari, Firefox and mobile browsers don’t support it yet, so the button stays hidden there — you can still use the colour wheel or type a code, or use one of the options below. Nothing is uploaded either way: the picker and every conversion run on your own device.
Other ways to find a hex code
- Mac: the built-in Digital Color Meter app (in Applications → Utilities) shows the colour under your cursor. Choose View → Display Values → as Hexadecimal to see hex values.
- Windows: Microsoft’s free PowerToys add-on includes a Color Picker that samples anywhere on screen and shows the HEX code.
- Firefox: Firefox has its own Eyedropper tool in its developer tools menu, which copies the hex code of any pixel on the page.
- From a website’s code: right-click an element, choose Inspect, and the Styles panel lists the exact colour values the site uses.
- On a phone: iPhone and Android don’t have a built-in hex eyedropper. The simplest route is usually to take a screenshot, open it on a computer and sample it there.
One tip for screenshots: save them as PNG rather than JPG if you can. JPG compression slightly changes pixel colours, so sampling a JPG can give you a code that’s a shade out. Our JPG vs PNG guide explains why.
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 light (avoid warm indoor bulbs or direct flash, both of which shift colour), then open the photo on your screen and sample it with the eyedropper.
Treat the result as a close match, not an exact one. Your camera, your screen’s calibration and the lighting all nudge the captured colour away from the real thing. Where an exact physical match matters — ordering paint, matching a printed brand colour — a physical swatch book or a colour-matching device beats a photo. For colours that are already digital (a website, a design file), the code you read is exact.
HEX vs RGB vs HSL: which one do you need?
All three describe exactly the same colour in different ways, and most tools accept whichever you have:
| Format | Example | Best for |
|---|---|---|
| HEX | #16345C | CSS, design tools and brand guidelines — the most common format for pasting a colour somewhere |
| RGB | rgb(22, 52, 92) | The same information as HEX in plain 0–255 numbers — used interchangeably in most software |
| HSL | hsl(214, 61%, 22%) | Adjusting a colour by eye — raise the lightness for a paler version, lower the saturation to mute it |
If you’re not sure which one a tool wants, HEX is the safest default. To convert between them, type any value into the matching field in Altto’s Color Picker and the other two update instantly — it doubles as a HEX to RGB (and RGB to HEX) converter.
How to convert HEX to RGB by hand
Split the code into three pairs and convert each from base 16 to base 10: multiply the first character by 16 and add the second, where A=10, B=11, C=12, D=13, E=14 and F=15. For #16345C:
16→ 1×16 + 6 = 22 red34→ 3×16 + 4 = 52 green5C→ 5×16 + 12 = 92 blue
So #16345C is rgb(22, 52, 92). Going the other way, divide each number by 16: the whole number is the first digit and the remainder is the second.
Finding lighter and darker versions
Once you have a colour, you’ll often need a paler version for a background or a darker one for text. Altto’s Color Picker shows a row of shades and tints under every colour — mixes of your colour with black and with white — and clicking one switches to it, codes and all. If you’re using a colour for text, check it has enough contrast against its background to stay readable; accessibility guidelines (WCAG) recommend a contrast ratio of at least 4.5:1 for normal-sized text.
How to use a hex code in Word, Canva and other apps
Once you have the code, this is where to paste it in the apps people use most:
| App | Where to type the hex code |
|---|---|
| Word, PowerPoint, Excel (Microsoft 365) | Font Colour or Shape Fill → More Colours → Custom tab → the Hex box. Older versions of Office have no Hex box, only Red, Green and Blue boxes, so convert the code to RGB first (see above). |
| Google Docs, Slides and Sheets | Text colour or fill colour → Custom (the + under Custom) → type the code in the Hex field. |
| Canva | Select the text or shape, click its colour tile, then the + (add a new colour) and type the code in the box under the colour picker. |
| Photoshop | Click the foreground colour to open the Color Picker and type the code in the box marked # (without the # itself). |
| Figma | Click the colour in the Fill section of the right-hand panel and type the code into the hex field. |
| CSS / website code | color: #16345C; or background: #16345C; — with the # this time. |
If an app won’t accept your code, check whether it wants the # or not, and that you’ve pasted exactly six characters with no space at the end.
Hex codes with 3, 4 or 8 digits
Six digits is the standard, but you’ll sometimes see other lengths:
- 3 digits, such as
#F80: shorthand where each digit is doubled, so it means#FF8800. - 8 digits, such as
#16345C80: the last pair is opacity, from00(fully see-through) toFF(solid).80is about 50%. CSS and design apps like Figma understand these; Word and Google Docs don’t, so drop the last two digits there. - 4 digits, such as
#F808: the 3-digit shorthand plus one digit of opacity. - Android app code puts the opacity pair first (
#80RRGGBB), so an 8-digit code from an Android project reads differently from one in CSS. - 0x16345C: the same code written the way many programming languages write hexadecimal numbers.
Why a colour can look different on another screen or on paper
A hex code is exact, but what you see isn’t always the same, for a few reasons:
- Screens differ. Brightness, calibration and settings such as Night Shift or Night light change how a colour looks, though the code stays the same. Many newer phones and laptops can also show richer colours than older screens, so a bright colour can look more vivid on one than the other.
- Print uses different colours. Screens mix red, green and blue light; printers mix cyan, magenta, yellow and black ink (CMYK). Some bright screen colours, like pure
#00FF00, simply can’t be printed, and the printer picks the nearest it can do. For printed brand colours, ask your printer for the CMYK or Pantone equivalent and check a printed proof before a big order. - Compression. JPG images shift colours slightly, so a code sampled from a JPG can be a shade out from the original design (see the tip above about PNG screenshots).
Where you’ll need a hex code
- Matching a background or accent colour in CSS or a website builder
- Recreating a brand’s palette in Canva, Figma or a slide deck
- Setting a theme colour for your site’s icons (see favicon sizes explained)
- Documenting the exact colours in your own design system
Common questions
What is a hex code, exactly?
How can I find the hex code of a colour on my screen?
Can I find the hex code of a colour from a photo?
How do I find a hex code on an iPhone or Android phone?
What's the difference between HEX, RGB and HSL?
Does a hex code change depending on my screen or lighting?
Can I use a hex code for printing?
What does an 8-digit hex code mean?
#16345C80 is the same blue at about 50% opacity. CSS and most design apps accept them. Android app code is the exception: it puts the opacity pair first.Need to grab a hex code right now?
Pick from your screen, use the colour wheel or type any HEX, RGB or HSL value — every code is free to copy, and nothing ever leaves your browser.
Sources
Where the facts in this guide come from:
- MDN Web Docs — <hex-color> (CSS) (the #RGB and #RRGGBB notations, case-insensitive digits, one digit doubled)