HEX to RGB Color Converter

Why So Many Color Formats?

CSS and design tools use different color formats because each one optimizes for different use cases. HEX (#FF5733) is compact and historical — it's how every computer color was specified for decades. RGB (red, green, blue 0-255) directly represents how monitors render light. HSL (hue, saturation, lightness) matches human perception — adjusting lightness creates intuitive tints / shades. HSV (hue, saturation, value) is similar but more intuitive for picking colors. OKLCH is the modern perceptually-uniform space — equal numeric changes produce equal visual changes. LAB is the absolute color space used in print and high-end design. Most workflows use multiple formats: HEX for storage / serialization, HSL for programmatic color manipulation, OKLCH for accessibility-conscious design tokens.

Color Format Conversion Matrix

HEX Format Variations

• 6-digit hex (#FF0000): standard — 2 hex chars per channel (Red, Green, Blue)
• 3-digit shorthand (#F00): each char doubled — #F00 = #FF0000. Only works when each channel has two identical hex digits.
• 8-digit hex (#FF000080): 6-digit + 2-char alpha. Modern browsers (Chrome 62+, Firefox 49+, Safari 9.1+). #FF000080 = red with 50% opacity.
• 4-digit shorthand (#F008): 3-digit + 1-char alpha — #F008 = #FF000088 = red ~53% opaque.
• Case insensitive: #ff0000 = #FF0000 = #Ff0000. Lowercase is most common in code; uppercase in print/design.

Quick Conversion Formulas

HEX → RGB: split into 3 pairs, convert each pair from base-16 to base-10:

#FF5733 → FF=255, 57=87, 33=51 → rgb(255, 87, 51)

RGB → HSL: more complex — normalize to 0-1, find max/min, derive hue from dominant channel:

L = (max + min) / 2
S = (max - min) / (1 - |2L - 1|)   if L > 0.5
S = (max - min) / (max + min)       otherwise
H = depends on which channel is max (see CSS Color spec)

When to Use Each Format in Code

• Use HEX: static CSS, design tokens, Tailwind config, Figma/Sketch exports. Most compact for storage.
• Use RGB / RGBA: programmatic JavaScript color manipulation, CSS-in-JS (styled-components, emotion), when you need to vary alpha.
• Use HSL: theme generation (adjust just lightness for hover states), creating tints / shades programmatically.
• Use OKLCH: modern design systems, accessibility-first palettes, color interpolation that looks smooth.
• Use CSS color-mix() with HSL/OKLCH: mix colors programmatically: color-mix(in oklch, var(--brand) 50%, white).

Accessibility: WCAG Contrast

Converting color formats is often part of accessibility work. WCAG 2.1 requires 4.5:1 contrast ratio between text and background for AA compliance (3:1 for large text 18pt+). The contrast ratio is calculated using relative luminance — a perceptually-weighted version of brightness. RGB matters here: not all colors with the same lightness in HSL have the same contrast against white! Yellow (#FFFF00) and blue (#0000FF) have the same HSL lightness (50%) but radically different contrast against white. Always test the actual contrast ratio, not just "light enough lightness."

CSS Color Level 4 New Features

Modern browsers (Chrome 111+, Firefox 113+, Safari 15.4+) support CSS Color Level 4 with new features:

• oklch() / oklab() / lab() / lch(): perceptually uniform color spaces
• color() function: use specific color spaces like sRGB, P3, ProPhoto
• color-mix(): mix two colors programmatically with chosen interpolation space
• Display P3: wide-gamut colors that show on modern displays (iPhones, MacBooks)
• HD color (HDR): emerging support for high dynamic range colors
• Relative colors: oklch(from var(--brand) calc(l + 0.1) c h) — derive colors from other colors