HEX Color Codes — The Complete Reference Guide

Hex color codes are everywhere — websites, apps, design tools, CSS stylesheets. They're the universal language for defining exact colors in digital design. Whether you're picking a brand color, matching a shade from a screenshot, or writing CSS — understanding hex codes gives you precise control.

Need to find or pick a hex color right now? Use our free Color Picker — no signup needed.

A hex color code is a 6-character string that defines a color using the RGB (Red, Green, Blue) color model. It starts with a # followed by three pairs of hexadecimal digits:

#RRGGBB

Each pair ranges from 00 (none) to FF (maximum intensity):

• #FF0000 = pure Red (max red, no green, no blue)
• #00FF00 = pure Green
• #0000FF = pure Blue
• #000000 = Black (all channels off)
• #FFFFFF = White (all channels max)

Hexadecimal uses 0–9 and A–F, giving 256 values per channel (16 × 16) and over 16.7 million possible colors.

Shorthand notation: When each pair has identical digits, you can shorten to 3 characters:

• #FF5500 → #F50
• #AABBCC → #ABC

Primary Colors

Popular Brand & UI Colors

Grayscale

• Hex is the most compact and widely used in CSS and design
• RGB is intuitive when you need to calculate colors programmatically
• HSL is best when you want to create color variations — just change the lightness value

Use our Color Picker to convert between all three formats instantly.

1. Use a Color Picker tool — our Color Picker lets you pick any color and get the hex code instantly.
2. Extract from an image — upload an image to a color picker and click the shade you want.
3. Browser DevTools — right-click any element → Inspect → find color values in the CSS panel.
4. Design tools — Figma, Sketch, Canva, and Photoshop all show hex codes in their color panels.
5. Brand guidelines — most companies publish their exact hex codes in brand kits and style guides.

/* Basic usage */
body {
  background-color: #F5F5F5;
  color: #333333;
}

/* Borders and accents */
.button {
  background-color: #3498DB;
  border: 2px solid #2980B9;
  color: #FFFFFF;
}

/* Hex with transparency (8-digit) */
.overlay {
  background-color: #00000080; /* black at 50% opacity */
}

The 8-digit hex format adds transparency: the last two digits control opacity (00 = fully transparent, FF = fully opaque). Supported in all modern browsers.

1. Check contrast ratios — WCAG requires 4.5:1 contrast between text and background for accessibility. Use a contrast checker before committing to a palette.
2. Limit your palette — 3–5 colors is enough for most designs. Too many colors creates visual chaos.
3. Create variations — use lighter/darker shades of the same base color for hierarchy. For example, #3498DB for buttons and #2980B9 for hover states.
4. Test in dark mode — colors that look great on white can be harsh or illegible on dark backgrounds.
5. Consider color blindness — 8% of men have some form of color vision deficiency. Never rely on color alone to convey meaning — add labels, icons, or patterns.
6. Learn from real brands — study color palettes of successful products. Most use a primary, secondary, and accent color with intentional contrast.