Hex Color Codes: The Complete Reference Guide for Developers

What Are Hex Color Codes?

Hex color codes are a way of specifying colors using hexadecimal (base-16) notation. They're the most widely used color format in web development, appearing in CSS, HTML, SVG, and design tools.

A hex code looks like this: `#A855F7`

The `#` prefix indicates it's a hex color. The six characters that follow represent three pairs of values for Red, Green, and Blue (RGB) channels.

How Hex Colors Work

Each hex code breaks down into three two-character pairs:

```

#A8 55 F7

↑ ↑ ↑

R G B

```

Each pair is a hexadecimal number from 00 (0) to FF (255):

• 00 = no intensity (0%)
• FF = full intensity (100%)

So `#A855F7` means:

• Red: A8 (168 out of 255 = 66%)
• Green: 55 (85 out of 255 = 33%)
• Blue: F7 (247 out of 255 = 97%)

This creates a vivid purple — the primary color for PaletteAI!

Common Hex Color Codes

Here are the most frequently used hex codes in web development:

Pure Colors

Popular Web Colors

Browse hundreds of curated hex colors in our palette collection.

Hex Shorthand Notation

When both characters in each pair are the same, you can use 3-character shorthand:

```css

#FF0000 → #F00 /* Red */

#00FF00 → #0F0 /* Green */

#FFFFFF → #FFF /* White */

#336699 → #369 /* Steel blue */

```

The browser expands `#F00` to `#FF0000` by doubling each character.

Note: Not all hex codes have shorthand. `#A855F7` has no 3-character equivalent.

8-Digit Hex: Adding Transparency

CSS supports 8-digit hex codes where the last two characters define alpha (opacity):

```css

#A855F700 /* Fully transparent purple */

#A855F780 /* 50% transparent purple */

#A855F7FF /* Fully opaque purple */

```

Alpha values:

• 00 = 0% opacity (invisible)
• 80 = ~50% opacity
• BF = ~75% opacity
• FF = 100% opacity (fully visible)

This is equivalent to `rgba(168, 85, 247, 0.5)` for 50% opacity.

Converting Between Color Formats

Hex to RGB

Split the hex into pairs and convert each from base-16 to base-10:

```

#A855F7

A8 → (10 × 16) + 8 = 168

55 → (5 × 16) + 5 = 85

F7 → (15 × 16) + 7 = 247

Result: rgb(168, 85, 247)

```

RGB to Hex

Convert each decimal value to hexadecimal:

```

rgb(168, 85, 247)

168 → A8

85 → 55

247 → F7

Result: #A855F7

```

Hex to HSL

This is a multi-step conversion:

1. Convert hex to RGB

2. Normalize RGB values to 0-1 range

3. Calculate Hue, Saturation, and Lightness using standard formulas

Use PaletteAI's color extractor to see all three formats simultaneously — upload an image and get instant hex, RGB, and HSL values for every color.

Hex Colors in CSS

Basic Usage

```css

.button {

background-color: #A855F7;

color: #FFFFFF;

border: 2px solid #7C3AED;

}

```

CSS Custom Properties (Variables)

```css

:root {

--primary: #A855F7;

--primary-dark: #7C3AED;

--primary-light: #C084FC;

}

.button {

background-color: var(--primary);

}

```

Tailwind CSS

Tailwind v4 lets you define colors in your theme:

```css

@theme inline {

--color-primary: #A855F7;

--color-primary-container: #C084FC;

}

```

Then use them as utilities: `bg-primary`, `text-primary-container`.

Hex Color Tips for Developers

1. Use CSS Variables for Consistency

Define your palette once and reference everywhere. This makes theme changes trivial.

2. Avoid Pure Black and White

Pure `#000000` and `#FFFFFF` create harsh contrast. Use slightly off values:

• Instead of black: `#111317` or `#1a1c20`
• Instead of white: `#e2e2e8` or `#F8FAFC`

3. Check Contrast Ratios

WCAG 2.1 requires minimum contrast ratios for accessibility:

• Normal text on background: 4.5:1
• Large text: 3:1

`#A855F7` on `#111317` has a contrast ratio of ~5.8:1 — great for readability!

4. Use Semantic Color Names

Instead of `--color-a855f7`, use `--color-primary`. This makes your code readable and maintainable.

5. Build a Gray Scale

Every good palette needs 8-10 gray shades. Start with your darkest background and lightest text, then fill in between.

Hex Color Patterns to Memorize

Some useful patterns for quick color work:

Extract Hex Colors from Any Image

Instead of guessing hex codes, extract them directly from images you like. Upload a photo, screenshot, or design to PaletteAI and get exact hex codes in one click.

Each extracted color shows:

• Hex code — click to copy
• RGB values — for CSS rgba()
• HSL values — for programmatic color manipulation
• Color name — 150+ named colors like "Dusty Rose" or "Ocean Blue"

Frequently Asked Questions

What does the # mean in hex colors?

The `#` symbol (hash/pound) is simply a prefix that tells browsers and parsers "this is a hexadecimal color code." Without it, the browser wouldn't know if `FF0000` is a color or a text string.

Why do hex codes use letters?

Hexadecimal is base-16, so it needs 16 digits. After 0-9, the letters A-F represent values 10-15. So `A` = 10, `B` = 11, ... `F` = 15.

Are hex colors case-sensitive?

No. `#a855f7`, `#A855F7`, and `#A855f7` all produce the same color. Lowercase is common in Tailwind/modern CSS; uppercase is traditional.

What's the difference between hex and RGB?

They represent the same color, just in different notation. Hex is more compact (`#A855F7` vs `rgb(168, 85, 247)`). RGB is more human-readable. Most developers use hex in stylesheets.

How do I find the hex code of a color on a website?

Right-click the element → Inspect → look at the color property in CSS. Or take a screenshot and upload to PaletteAI to extract all colors instantly.

Start Extracting Hex Colors

Upload any image to PaletteAI and get instant hex codes for every dominant color. Free, no signup, works in your browser.

Open PaletteAI Color Extractor →