How do hex color codes work?

Hex codes use base-16 (0-9, A-F) to represent colors. #RRGGBB — first pair is red, middle is green, last is blue. Each pair ranges from 00 (0) to FF (255). #FF0000 is pure red, #00FF00 is green, #0000FF is blue.

What is 3-digit hex shorthand?

#F00 is shorthand for #FF0000. Each digit is doubled. This only works when each pair has identical digits: #ABC = #AABBCC, but there's no shorthand for #3B82F6.

8-digit hex adds alpha (opacity) as two more digits. #FF000080 is red at ~50% opacity. The alpha byte ranges from 00 (fully transparent) to FF (fully opaque).

HEX Color Codes — Complete Reference Guide

Everything you need to know about HEX color codes: how they work, shorthand notation, alpha transparency, and common codes every designer should memorize.

The Structure of a HEX Code

A hex color code is a # followed by six hexadecimal digits (0-9, A-F). The six digits form three pairs: RR (red), GG (green), BB (blue). Each pair represents a value from 0 to 255 in base-16. For example, #3B82F6 means red=59, green=130, blue=246.

Essential HEX Codes to Know

#000000 Black. #FFFFFF White. #FF0000 Pure red. #00FF00 Pure green. #0000FF Pure blue. #808080 Medium gray. #FFA500 Orange. #800080 Purple. #333333 Dark gray (common text color). #F5F5F5 Light gray (common background).

HEX Across Design Tools

HEX codes are universal across design tools. CSS/HTML: color: #3B82F6. Figma: paste hex directly into the color input. Photoshop: enter in the color picker's hex field. Email templates: HEX is the most reliable color format for HTML email.

Explore and convert any HEX color below.

Frequently Asked Questions

How do I convert HEX to RGB?▼

Paste or type your HEX code (like #3B82F6) into the HEX field and the RGB values appear instantly — R: 59, G: 130, B: 246. The first two hex characters are red, the middle two are green, the last two are blue.

What is a WCAG contrast ratio and why does it matter?▼

The WCAG contrast ratio measures how distinguishable two colors are, from 1:1 (no contrast) to 21:1 (maximum). WCAG 2.1 requires a minimum of 4.5:1 for normal text (AA) and 7:1 for the highest standard (AAA). This ensures people with visual impairments can read your content.

What’s the difference between RGB and HSL?▼

RGB defines colors by mixing red, green, and blue light (0-255 each). HSL describes colors as Hue (color wheel position 0-360°), Saturation (vividness 0-100%), and Lightness (brightness 0-100%). HSL is more intuitive for creating color variations.

Is CMYK conversion accurate?▼

Our CMYK conversion is mathematically correct but approximate. Precise CMYK values for print depend on ICC color profiles. Our conversion uses the standard formula, sufficient for digital mockups. For production print, use your print provider’s color profile.

Can I extract colors from an image?▼

Yes. Upload any image and click anywhere on it to pick a pixel’s color, or let the tool extract the 5-6 most dominant colors automatically. The image is processed entirely in your browser — never uploaded to any server.

What color format should I use for web design?▼

For CSS, HEX (#3B82F6) and RGB are both widely supported. HSL is increasingly preferred because it’s easier to create color variations. For opacity, use RGBA or HSLA. Tailwind CSS uses predefined color classes like bg-blue-500.

How does the palette generator work?▼

It uses color theory to find harmonious combinations. From your color’s hue on the color wheel, it calculates complementary (180° opposite), analogous (nearby), triadic (120° apart), and other harmonies. These mathematical relationships produce colors that naturally look good together.

Is my data private?▼

Nothing leaves your browser. All color calculations, conversions, and image processing happen entirely in JavaScript on your device. No data is stored on any server.

HEX Color Codes — Complete Reference Guide

The Structure of a HEX Code

Essential HEX Codes to Know

HEX Across Design Tools

Frequently Asked Questions

Related Tools