A hex color code is a six-character code like #ff6600 that tells a screen how much red, green and blue light to mix. The first pair sets red, the middle pair green and the last pair blue, each from 00 (none) to ff (full), which is 0 to 255 in decimal.
So #ff6600 is full red, about 40% green (66 is 102 in decimal) and no blue, which makes a bright orange. Below is how to read any hex code, a chart of common hex color codes, shorthand and 8-digit codes, and how to find the hex code of any color.
How to read a hex color code
Every hex code follows the pattern #RRGGBB. The first pair is red, the second is green, and the third is blue. Each pair is a base-16 (hexadecimal) number, which uses the digits 0 to 9 and then the letters A to F for ten to fifteen.
To turn a pair into a regular number, multiply the first digit by 16 and add the second. In #ff6600, 66 becomes 6 x 16 + 6 = 102, and ff becomes 15 x 16 + 15 = 255. Each channel runs from 00 (0, none of that light) to ff (255, full strength), so there are 256 x 256 x 256 = 16,777,216 possible hex colors.
A few patterns make hex codes easy to read at a glance. Equal pairs, like #808080, always make a gray. A high first pair pulls the color toward red, a high middle pair toward green, and a high last pair toward blue. The hex to RGB converter does the math for any code.
Common hex color codes
These are the hex codes for the basic colors. Every one is also a CSS named color, so in a stylesheet you can type the name (like teal) or the code and get the same result. Click a code to open the color with its shades, palettes, and conversions.
| Color | Hex code | RGB |
|---|---|---|
| Black | #000000 | rgb(0, 0, 0) |
| White | #ffffff | rgb(255, 255, 255) |
| Red | #ff0000 | rgb(255, 0, 0) |
| Lime (pure green) | #00ff00 | rgb(0, 255, 0) |
| Blue | #0000ff | rgb(0, 0, 255) |
| Yellow | #ffff00 | rgb(255, 255, 0) |
| Cyan (aqua) | #00ffff | rgb(0, 255, 255) |
| Magenta (fuchsia) | #ff00ff | rgb(255, 0, 255) |
| Gray | #808080 | rgb(128, 128, 128) |
| Silver | #c0c0c0 | rgb(192, 192, 192) |
| Maroon | #800000 | rgb(128, 0, 0) |
| Green | #008000 | rgb(0, 128, 0) |
| Navy | #000080 | rgb(0, 0, 128) |
| Teal | #008080 | rgb(0, 128, 128) |
| Purple | #800080 | rgb(128, 0, 128) |
| Olive | #808000 | rgb(128, 128, 0) |
| Orange | #ffa500 | rgb(255, 165, 0) |
| Pink | #ffc0cb | rgb(255, 192, 203) |
| Brown | #a52a2a | rgb(165, 42, 42) |
| Gold | #ffd700 | rgb(255, 215, 0) |
For all 140+ named colors, see the full list of HTML color names with their hex codes.
Shorthand and 8-digit hex codes
When each pair repeats the same digit, you can shorten the code to three characters. #ff6600 becomes #f60, #ffffff becomes #fff, and #000000 becomes #000. Browsers expand the shorthand back to the full six digits, so both forms show the same color.
An 8-digit hex code adds a fourth pair for transparency, written as #RRGGBBAA. The last pair runs from 00 (fully transparent) to ff (fully opaque), so #ff660080 is the same orange at about 50% opacity. The hex opacity table lists the code for every percentage.
How to find the hex code of a color
- Pick it visually with the color picker, which shows the hex, RGB, and HSL values as you drag.
- Pull colors out of a photo or screenshot with color palette from image.
- In Chrome, Edge, or Firefox, open the developer tools and click any color swatch in the styles panel to get an eyedropper that reads colors off the page.
- In Figma, Photoshop, and most design apps, the color panel shows the hex code of the selected color, usually next to a # symbol.
Hex vs RGB vs HSL
Hex, RGB, and HSL are three ways of writing the same screen color. #ff6600, rgb(255, 102, 0), and hsl(24, 100%, 50%) all describe the identical orange. Hex and RGB are the same numbers in a different base, while HSL describes the color by hue, saturation, and lightness, which makes it easier to adjust by hand.
Hex is the most common format in design handoffs and brand guides because it is short and easy to copy. For print you need CMYK values instead, since printers mix ink rather than light.
Using hex colors in CSS
In CSS, a hex code works anywhere a color is expected. Storing your brand colors as custom properties keeps them in one place:
:root {
--brand: #ff6600;
--brand-light: #ffa366;
--text: #1a1a1a;
}
.button {
background: var(--brand);
color: #ffffff;
}Before you ship a color pair, run it through the contrast checker to make sure text stays readable. To build a full scheme around one hex code, drop it into the palette generator or explore its neighbors on the color wheel.
A short history of hex colors
Hex codes come from early HTML, which set colors with attributes like bgcolor=”#ffffff”. In the 1990s many screens could show only 256 colors, so designers stuck to a 216-color “web-safe” palette made only from the pairs 00, 33, 66, 99, cc, and ff. Modern screens show all 16.7 million hex colors, so the web-safe limit no longer matters.
Are hex codes case sensitive?
No. #FF6600 and #ff6600 are the same color, and CSS accepts either. Many style guides use lowercase for consistency, but it has no effect on how the color looks.
How many hex colors are there?
There are 16,777,216 possible six-digit hex colors, from #000000 (black) to #ffffff (white). That is every combination of 256 red, 256 green, and 256 blue values.