Hex color codes explained: how #RRGGBB works

How a hex color code works

Every color on a screen is mixed from red, green and blue light. A hex code writes the strength of each light as two characters after the # sign: red first, then green, then blue. That is the #RRGGBB pattern.

The characters are hexadecimal, a way of counting with 16 digits: 0 to 9, then a (10), b (11), c (12), d (13), e (14) and f (15). One pair covers 256 values, from 00 (0) to ff (255), exactly the range of rgb().

To turn a pair into a regular number, multiply the first digit by 16 and add the second. Below is #1e90ff, the CSS color dodgerblue, in four formats, and then worked out pair by pair.

So #1e90ff is rgb(30, 144, 255): a little red, a fair amount of green and full blue, which adds up to a bright sky blue. Three pairs of 256 values give 16,777,216 possible colors.

3-digit and 4-digit hex shorthand

When both digits of every pair are the same, you can write each pair once. #ffcc00 becomes #fc0, and the browser doubles each digit back. #1e90ff has no short form, because 1e and 90 are not doubled pairs.

The short form covers only 4,096 of the 16.7 million colors. A four-digit version adds opacity the same way, so #f008 means #ff000088.

Hex opacity: 8-digit hex with alpha

An eight-digit code adds a fourth pair for alpha, the opacity: #RRGGBBAA. 00 is fully transparent and ff is fully solid. Every current browser supports it in CSS, along with the four-digit #RGBA shorthand.

To get the pair, multiply the opacity by 255, round to a whole number and convert it to hex. 50% gives 127.5, which rounds to 128, written as 80. Here is the full table, applied to #1e90ff.

.overlay {
    background: #00000080;
}

.overlay-same {
    background: rgb(0 0 0 / 50%);
}

Two catches. First, 80 is 128 out of 255, which is 50.2%, not exactly 50%: hex alpha has only 256 steps, so most round percentages are close approximations. Second, Android puts alpha first. In an Android color resource, #801e90ff means the same as #1e90ff80 in CSS.

How to read a hex code by eye

You can guess a color without converting anything. Look at the first digit of each pair, because it carries almost all the information.

• The largest first digit is the dominant light. #d2691e has d in red, 6 in green and 1 in blue, so it is an orange brown.
• Two high channels mix: red and green make yellow, green and blue make cyan, red and blue make magenta or purple.
• Three equal pairs make a gray. #333333 is dark gray, #999999 is light gray. Nearly equal pairs, like #708090, give a muted, grayish color.
• High digits overall mean a light color, low digits a dark one. When all three pairs are c0 or higher, the color is pale. When all three are 30 or lower, it is very dark.
• Green looks far brighter than blue at the same number. #00ff00 has an OKLCH lightness of 0.866, #0000ff only 0.452.

Why #808080 is not middle gray

#808080 sits exactly halfway in the numbers: 128 out of 255 in every channel. It does not look halfway between black and white. Its OKLCH lightness is 0.600, so it reads as 60% of the way to white.

Hex values are already encoded with the sRGB curve, which roughly follows the eye but not exactly. #808080 gives off about 21.6% of the light of white, and perceptual models put the visual midpoint lower: OKLCH at #636363, CIELAB at #777777.

This matters for text. Gray #808080 on white is 3.95:1 and fails WCAG AA for body text. #767676 is the lightest gray that passes 4.5:1, and #777777, one step lighter, already fails at 4.48:1.

Uppercase or lowercase, with or without #

Hex codes are not case sensitive. #1E90FF, #1e90ff and #1E90ff are the same color in CSS, SVG and design tools. Pick one style and keep it everywhere, so a search through your code finds every use. Lowercase is the common choice in CSS.

The # sign is part of the CSS syntax, not of the color. Figma and many design tools show the code without it, and programming languages often write it as a number with a 0x prefix, as in Flutter, where Color(0xFF1E90FF) starts with the alpha pair.

How to find the hex code of a color on screen

Use an eyedropper: a tool that reads the color under your cursor and shows its code. These are free and mostly already installed.

• Chrome and Edge: open DevTools with F12, click any color square in the Styles panel and use the eyedropper icon to pick from the page.
• PickShade: the color picker on the home page has an eyedropper button in Chrome and Edge that picks from anywhere on the screen.
• Windows: install Microsoft PowerToys and press Win + Shift + C to open Color Picker.
• macOS: open Digital Color Meter from Applications, Utilities. Switch it to sRGB, then choose View, Display Values, as Hexadecimal.
• Figma, Photoshop and most design apps: press I for the eyedropper.
• In a photo or screenshot: open it in the image color picker and click any pixel. The image stays on your device.

A picked value can be a few units off from the original, because screens apply color profiles and images are compressed. When you need the exact value, copy it from the design file or the CSS, not from a screenshot.

Questions and answers