HEX Color Codes: How They Work and How to Pick Your Own

The mockup lands on your desk, the CSS reads #FF6600, and a comment asks for the same orange only a touch darker. A HEX color code is the standard six character notation for a shade, and the code itself usually holds the answer: it shows what the color is made of. Below is how the format works, how to find the HEX color of anything on an image or a website, and how to pick shades for your own interface without trusting the eye alone.

What a HEX color code is

A screen builds every shade from three primary beams: red, green and blue. Each channel gets one byte, which means 256 steps from 0 to 255. Zero means the beam is off, 255 means it is at full power. A triple of numbers such as 255, 102, 0 fully describes a color, and that notation is called RGB.

HEX is the same triple written in base 16, and the base is not there for style. A byte splits into two halves of four bits, each half takes 16 values, and a single hexadecimal digit encodes exactly one half. Two digits per channel, six per color, and that is where the familiar #RRGGBB shape comes from: every pair is one byte.

• digits 0-9 mean themselves, then letters take over: A is ten, B eleven, C twelve, D thirteen, E fourteen, F fifteen;
• the pair 00 gives zero, FF gives 255, and 80 gives 128, the midpoint of the scale;
• the channel order is fixed: red, green, blue, the same as in rgb();
• the hash is not part of the number, it marks the format: without it CSS treats the characters as a string and drops the value.

#FF6600

FF = 15 × 16 + 15 = 255   →  red at full power
66 = 6 × 16 + 6 = 102     →  green just above the middle
00 = 0                    →  no blue in the mix

Result: rgb(255, 102, 0), a saturated orange

Read the code as three independent volume knobs, one pair each. The first pair sets the red component, the second the green one, the third the blue one. When all three pairs match, say #666666, the channels balance out and the color looks like a neutral gray. For day to day work the arithmetic is optional: an HEX to RGB converter turns the code into decimal numbers and an RGB to HEX converter goes back, while the color itself never changes, only the notation.

The three digit form

When both digits of every pair match, the code shrinks by half: #FF6600 becomes #F60, because F expands to FF, 6 to 66 and 0 to 00. The condition is strict: the pairs of #124578 are not duplicated, so it has no shorthand. The short form covers 16³ = 4096 colors, the long one 16⁶ = 16,777,216, and the whole difference lives in duplicated pairs.

Letter case carries no meaning: #ff6600 and #FF6600 are one and the same color, browsers compare them case insensitively. Lowercase is common in CSS code, uppercase in catalogs and documentation; which one a project uses is a matter of style, not of syntax.

The eighth pair: opacity

After the blue channel two more digits can follow, giving the #RRGGBBAA format. The last pair sets opacity: 00 is fully transparent, FF fully opaque. The scale matches the channels, 0 to 255, so 80 means 128 out of 255, a bit under half.

#FF660080

80 = 8 × 16 + 0 = 128
128 / 255 ≈ 0.50  →  the color is half transparent

CSS equivalent: rgba(255, 102, 0, 0.5)

#RRGGBBAA and rgba() produce the same translucent result. The eight digit code is compact and stays inside hex notation, rgba() is more readable because the opacity share is visible at once. Every current browser supports both, so project conventions usually decide. The CSS Color 4 standard also allows a #RGBA shorthand, but editors and generators support it unevenly, and in real work the six or eight digit forms are the reliable ones.

How to find the HEX color of an image or a website

For a page in the browser the shortest path runs through developer tools. Open the page, press F12, find any color value in the styles panel and click the square swatch next to it: an eyedropper opens up that samples color from any point of the screen.

1. Point the eyedropper at the pixel you need: a magnified fragment and the current value appear next to the cursor.
2. Click: the code lands in the styles, ready to copy.
3. To find the color from an image, open the file in a separate browser tab and repeat the steps, the eyedropper works across the whole window.
4. For software outside the browser take a screenshot and pick the color with the pipette built into a graphics editor or a system color dialog.

There is a route without DevTools as well. A color dialog opens straight from a page, for example through the online color picker: recent Chrome and Edge ship an eyedropper inside the system dialog, and a known code pasted into the field comes back as HEX, RGB, HSL and HSV values with one click copy. The tool works with codes and with the system dialog; it does not analyze a whole image and does not extract dominant shades from an uploaded file.

Picking your own colors for an interface

A code rarely lives alone. In an interface a color carries a role, and every role needs its own value.

• the primary color sets the brand tone: buttons, links, active states;
• the secondary builds backgrounds and panels, usually near neutral so it never fights the text;
• one or two accents, for warnings, badges and actions nobody should miss.

The 60-30-10 rule is a convenient way to check the balance of areas: roughly 60 per cent takes the dominant, usually neutral color, about 30 the secondary and around 10 the accent. Warm shades such as reds and oranges read as energy and invite action, cool blues and greens read as calm and reliability, which is why financial products lean cool and food delivery leans warm.

The power of one exact code shows in brand colors. Public brand style directories list the Coca-Cola red as roughly #F40009, the Facebook blue as roughly #1877F2 and the Spotify green as roughly #1DB954. Treat the numbers as reference points: guidelines get updated, the shade depends on the medium and on the version of the guide, and none of these codes is an official specification for every case.

A scale grows from the base code: a darker variant for text and borders, the primary for accents, a light one for panels. Picking those by hand takes a while, and a palette generator builds complementary, analogous and triadic schemes plus light and dark shade sets from a single starting color. A systematic approach to combinations is covered in the article about building a color palette.

Popular colors and their HEX codes

These are the codes people ask for most often. The values match the standard CSS named colors and can be copied as they are.

• #FFFFFF — white, the default background in most interfaces;
• #000000 — black, body text and dark theme;
• #808080 — gray, secondary labels and icons;
• #D3D3D3 — light gray, borders and dividers;
• #A9A9A9 — dark gray, disabled elements;

• #FF0000 — red, errors and warnings;
• #800000 — maroon, a dark accent instead of pure red;
• #FFA500 — orange, buttons and notifications;
• #FFD700 — gold, ratings and stars;
• #FFFF00 — yellow, hints and highlights.

• #00FF00 — lime, pure vivid green;
• #008000 — green, success and confirmation;
• #006400 — dark green, text on a light green panel;
• #00FFFF — cyan, turquoise accents;
• #008080 — teal, a calm block background.

• #0000FF — blue, the default link color;
• #000080 — navy, headings and a business look;
• #800080 — purple, premium and creative;
• #FFC0CB — pink, soft accents;
• #A52A2A — brown, wood, food and craft styles.

Contrast: is the text readable on this background

A pretty code does not guarantee readability. The same shade holds a white label perfectly in one spot and turns it into mush in another. The measure is contrast, the ratio between the luminance of the text and of the background, and the WCAG standard sets minimums for it.

• AA for body text: 4.5:1 and above;
• AA for large text, from 18 pt or from 14 pt bold: 3:1;
• AAA for body text: 7:1, for large text 4.5:1;
• for button borders, input outlines and icons: 3:1.

The check takes seconds: enter the text and background codes in the contrast checker and you see the ratio and the passed levels at once. The math behind the calculation, and how contrast ties into font size and weight, is covered in the article about text contrast on a website.

Common mistakes

• a code without the hash: FF6600 changes nothing in CSS, the syntax requires #FF6600;
• five digits: only forms of three, six and eight characters are valid, so #FF660 is a typo, not a shorthand;
• mixing up HEX and RGB: they are one color in two notations, rgb(255, 102, 0) and #FF6600 are equal, and comparing them as different shades makes no sense;
• opacity written the wrong way: the AA pair in #RRGGBBAA and the fourth number in rgba() mean the same thing, but the eight digit code will not take a 0.5 fraction and rgba() will not take an AA pair;
• swapped channels: #FF0066 is a crimson rose, #6600FF is violet, the order is always red, green, blue;
• copying with debris: a space, a quote mark or a note from the mockup breaks the value, only a clean code belongs in the field.

A checklist for choosing interface colors

1. Check the contrast of every text and background pair: 4.5:1 is the minimum for body text.
2. Run the palette through a dark theme: a shade that works on white can glare on black.
3. Duplicate meaning beyond color alone: for color blind users red and green can merge, an icon or a label saves the case.
4. Keep a single accent code and spend it only on the primary actions.
5. Look at the interface on another screen and at another zoom: the color profile shifts shades.

Common questions

How many colors exist in HEX?

Six digits give 16⁶ combinations, that is 16,777,216 shades. The reserve is enormous: the eye tells apart far fewer, so neighboring values such as #FF6600 and #FF6601 often live side by side in code, and nobody can see the difference.

How is HEX different from RGB?

Only in notation. RGB states a color as three decimal numbers from 0 to 255, HEX converts each into a pair of hexadecimal digits. #FF6600 and rgb(255, 102, 0) are one and the same shade. HEX is more compact and copies out of any editor, RGB is handier in calculations: the channels are visible as plain numbers without conversion.

What does the shorthand #F60 mean?

It means #FF6600. Every digit of the short form doubles: F becomes FF, 6 becomes 66, 0 becomes 00. The expansion only works when the pairs are duplicated, so an arbitrary color such as #123456 cannot be shortened.

How do I find the color from an image without installing anything?

Open the image in a new browser tab, press F12 and sample the color with the eyedropper from the styles panel. The fallback route is a screenshot plus the pipette built into any graphics editor or system color dialog.

Why does the printed color not match the HEX code?

A monitor emits light and works in RGB, a printer applies paint and works in CMYK with a narrower range. Vivid screen shades, saturated oranges and blues above all, come out duller in ink. For print the color is converted to CMYK separately and verified on a proof.

Should the code be written in capital letters?

No, case makes no difference: #ff6600 and #FF6600 are one color. What matters is one rule per project: write the same way in code and in documentation, so that search by code finds nothing extra.