Color Code Formats

Why Color Formats Matter

Every pixel on your screen renders color as a mix of red, green, and blue light. But developers and designers express that same color in different notations—HEX, RGB, HSL, or CMYK—depending on the context.

Using the wrong format creates friction. A designer hands you HSL values; your CSS framework expects HEX. A print vendor requests CMYK; your file uses RGB. Understanding what each format encodes and how to switch between them eliminates that friction entirely.

HEX Format Explained

HEX (hexadecimal) is the most compact way to write an RGB color for the web. A six-character code prefixed with # encodes three bytes—one for each channel.

Syntax

#RRGGBB

Each pair uses base-16 digits: 0–9 and A–F. The range 00–FF maps to 0–255 in decimal.

Example: #2563EB

• 25 → Red = 37
• 63 → Green = 99
• EB → Blue = 235

Three-Digit Shorthand

When both digits in a pair match, CSS lets you collapse #RRGGBB to #RGB:

Keep in mind: #F80 becomes #FF8800, not #F8F808. Each digit duplicates itself.

When to Use HEX

• Writing CSS properties directly
• Copying values from design tools (Figma, Sketch export HEX by default)
• Keeping stylesheets compact and easy to scan

RGB Format Explained

RGB writes each channel as a decimal number from 0 to 255 inside the rgb() function. It's the most explicit way to represent additive color.

Syntax

rgb(37, 99, 235)

/* Modern space-separated syntax (CSS Color Level 4) */
rgb(37 99 235)

/* With alpha transparency */
rgb(37 99 235 / 0.8)
rgb(37 99 235 / 80%)

The legacy rgba() function still works, but modern CSS treats alpha as part of rgb() directly—no separate function needed.

When to Use RGB

• Adding transparency (alpha channel)
• Generatingcolors programmatically in JavaScript
• Working with APIs or libraries that return channel arrays

// Dynamic color generation is straightforward with RGB
function shiftColor(r, g, b, offset) {
  return `rgb(${Math.min(r + offset, 255)}, ${Math.min(g + offset, 255)}, ${Math.min(b + offset, 255)})`;
}

HSL Format Explained

HSL (Hue, Saturation, Lightness) separates a color into three perceptual dimensions. It matches how designers think about color: "I want a blue that's vivid and medium-bright."

Components

Syntax

hsl(221, 83%, 53%)

/* Modern syntax (space-separated, no commas) */
hsl(221 83% 53%)

/* With alpha */
hsl(221 83% 53% / 0.8)

Why Designers Prefer HSL

HSL makes palette generation intuitive. To create lighter and darker variants, you adjust only the lightness value—hue and saturation stay unchanged.

--brand-300: hsl(221 83% 70%);  /* Light */
--brand-500: hsl(221 83% 53%);  /* Base */
--brand-700: hsl(221 83% 35%);  /* Dark */

When to Use HSL

• Building design systems and theme variables
• Creating accessible color scales with consistent lightness steps
• Implementing dark mode (shift lightness without changing hue)

CMYK Format Explained

CMYK (Cyan, Magenta, Yellow, Key/Black) is a subtractive color model used in print. Unlike RGB, which adds light, CMYK subtracts light from white paper using ink.

Components

RGB-to-CMYK Conversion Challenges

RGB and CMYK cover different color spaces (gamuts). Vivid blues and greens on screen often cannot be reproduced exactly in print. A conversion tool gives approximate CMYK values, but always verify with a printed proof.

When to Use CMYK

• Preparing assets for commercial printing
• Working with brand guidelines that specify print-safe colors
• Communicating with print vendors

When to Use Each Format

Conversion Overview

Every format represents the same underlying color data (except CMYK, which shifts gamut). Here's how the main conversions work:

HEX ↔ RGB

Split the HEX into three pairs and convert each pair from base-16 to base-10 (or reverse).

#2563EB → rgb(37, 99, 235)

R = parseInt("25", 16) = 37
G = parseInt("63", 16) = 99
B = parseInt("EB", 16) = 235

RGB → HSL

1. Normalize R, G, B to 0–1
2. Find max and min values
3. Lightness = (max + min) / 2
4. If max = min, saturation = 0 (achromatic)
5. Otherwise, saturation and hue are computed from the difference between max and min

The full formula involves conditional branching based on which channel is the maximum—too long to memorize, which is why tools exist.

RGB → CMYK

1. Normalize R, G, B to 0–1
2. K = 1 − max(R, G, B)
3. If K = 1, then C = M = Y = 0 (pure black)
4. Otherwise: C = (1 − R − K) / (1 − K), and similarly for M and Y

For precise conversions without manual math, use an automated tool.

Key Takeaways

• HEX and RGB encode identical data in different notations—base-16 shorthand vs. decimal function
• HSL aligns with human perception and is ideal for design systems
• CMYK is for print only; screen colors may not reproduce exactly in ink
• RGB is best for programmatic color manipulation in JavaScript
• Always verify CMYK conversions with a physical proof—the gamuts differ

Try It Yourself

Convert between every format instantly with our free tools:

• Color Converter — HEX, RGB, HSL, and CMYK in one place
• HEX to RGB Converter — fast, focused HEX ↔ RGB translation

Related Guides

• Color Picker Guide — choose colors visually and get codes in every format
• Design Color Fundamentals — the color wheel, harmony types, and building palettes