Color Code Converter: HEX, RGB, HSL Explained

Three Systems for Describing the Same Color

Every color you see on a screen is composed of red, green, and blue light mixed at different intensities. But developers and designers describe these same colors using three different notational systems: HEX, RGB, and HSL. Each system encodes the same underlying data differently, and understanding all three is essential for web development, design collaboration, and accessibility compliance.

HEX and RGB are mathematically equivalent, just different representations of the same RGB color values. HSL provides a more intuitive way to think about colors in terms of what they look like rather than how they are mixed from light. Learning when to use each system saves time and prevents miscommunication between design and development teams.

HEX Colors: The Web Standard

HEX colors use a hash symbol followed by six characters: #RRGGBB. Each pair represents the intensity of red, green, and blue on a hexadecimal scale from 00 (zero, no intensity) to FF (255, maximum intensity). #FF0000 is pure red (maximum red, no green, no blue). #00FF00 is pure green. #0000FF is pure blue. #FFFFFF is all channels at maximum, producing white. #000000 is all channels at zero, producing black.

Three-digit HEX is shorthand notation. #F00 expands to #FF0000, #0F0 expands to #00FF00, and #00F expands to #0000FF. The browser doubles each character to create the six-digit equivalent. This shorthand saves bytes in CSS files but limits you to colors where each channel uses the same digit repeated twice (like #112233, which stays #112233).

Common HEX values every developer should know by heart:

• #000000 (black), #FFFFFF (white), #808080 (medium gray)
• #FF0000 (red), #00FF00 (green), #0000FF (blue)
• #FFFF00 (yellow), #FF00FF (magenta), #00FFFF (cyan)
• #FFA500 (orange), #800080 (purple), #008000 (dark green)

RGB Colors: The Additive Model

RGB represents colors as combinations of red, green, and blue light. Each channel ranges from 0 to 255. rgb(255, 0, 0) is pure red. rgb(0, 255, 0) is pure green. rgb(0, 0, 255) is pure blue. Mixing channels at different intensities creates the full spectrum: rgb(255, 128, 0) is orange, rgb(128, 0, 255) is purple, rgb(0, 200, 128) is teal.

CSS supports RGB with optional alpha transparency. rgba(255, 128, 0, 0.5) creates semi-transparent orange. The alpha channel ranges from 0 (fully transparent) to 1 (fully opaque). Use alpha for overlays, shadows, gradient effects, and any element that needs to show content beneath it. Modern CSS also supports the cleaner space-separated syntax:

.overlay {
  background: rgb(0 0 0 / 0.6);
}
.card {
  border: 1px solid rgb(200 200 200 / 0.3);
}

The space-separated syntax works in all modern browsers and is preferred for new stylesheets because it reads more naturally. Our color converter handles all RGB formats including alpha transparency.

HSL Colors: The Designer's Choice

HSL stands for Hue, Saturation, Lightness. It describes colors in terms that match how humans think about them:

• Hue is the angle on the color wheel (0-360 degrees). 0 is red, 60 is yellow, 120 is green, 180 is cyan, 240 is blue, 300 is magenta, and 360 wraps back to red.
• Saturation is color intensity (0% is completely gray, 100% is the pure color).
• Lightness is brightness (0% is black, 50% is the pure color, 100% is white).

HSL makes creating color variations trivial. Want a lighter version of your brand blue? Increase lightness from 50% to 70%. Want a muted, desaturated version? Drop saturation from 80% to 40%. Want a complementary color? Add 180 to the hue value. These operations are intuitive in HSL but require complex math in RGB:

:root {
  --brand-primary: hsl(220, 80%, 50%);
  --brand-light: hsl(220, 80%, 70%);
  --brand-dark: hsl(220, 80%, 30%);
  --brand-muted: hsl(220, 40%, 50%);
  --brand-complement: hsl(40, 80%, 50%);
}

Color Conversion Formulas

Converting HEX to RGB is straightforward. Split the HEX into three pairs and convert each from base-16 to decimal: #FF8040 becomes rgb(255, 128, 64). F=255, 80=128, 40=64. This conversion is useful when you need to add alpha transparency to a HEX color.

RGB to HSL requires more calculation. The formula finds the maximum and minimum channel values, calculates lightness as their average, determines saturation based on the range between them, and computes hue based on which channel is dominant:

function rgbToHsl(r, g, b) {
    r /= 255; g /= 255; b /= 255;
    const max = Math.max(r, g, b), min = Math.min(r, g, b);
    let h, s, l = (max + min) / 2;
    if (max === min) {
        h = s = 0;
    } else {
        const d = max - min;
        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
        switch (max) {
            case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
            case g: h = ((b - r) / d + 2) / 6; break;
            case b: h = ((r - g) / d + 4) / 6; break;
        }
    }
    return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)];
}

Our color converter handles all conversions instantly between HEX, RGB, HSL, and modern CSS color function formats.

Accessibility: Contrast Ratios That Matter

The Web Content Accessibility Guidelines (WCAG) require minimum contrast ratios between text and background colors. Failing these ratios makes your content difficult or impossible to read for users with visual impairments. Approximately 8% of men and 0.5% of women have some form of color vision deficiency.

• Normal text (under 18px): Minimum 4.5:1 contrast ratio (WCAG AA), 7:1 for AAA
• Large text (18px+ or 14px bold): Minimum 3:1 contrast ratio (WCAG AA), 4.5:1 for AAA
• UI components and graphical objects: Minimum 3:1 contrast ratio

A white background (#FFFFFF) with dark gray text (#767676) achieves exactly 4.5:1, the minimum for normal text. Light gray text on white backgrounds almost always fails. Test every text-background combination with our color converter, which includes a contrast ratio calculator that validates against WCAG AA and AAA requirements.

Never use color alone to convey information. Error states indicated only by red text are invisible to colorblind users. Pair color indicators with icons, text labels, or patterns to ensure all users understand your content regardless of their color perception abilities.

CSS Custom Properties for Color Systems

Define your entire color palette using CSS custom properties for consistency and maintainability:

:root {
  --color-primary: #1a73e8;
  --color-primary-hover: #1558b0;
  --color-text: #202124;
  --color-text-secondary: #5f6368;
  --color-background: #ffffff;
  --color-surface: #f8f9fa;
  --color-border: #dadce0;
}
.button {
  background: var(--color-primary);
  color: var(--color-background);
}
.button:hover {
  background: var(--color-primary-hover);
}

This approach ensures brand consistency, simplifies theme changes by updating one value, and makes dark mode implementation straightforward by redefining variables under a media query:

@media (prefers-color-scheme: dark) {
  :root {
    --color-text: #e8eaed;
    --color-background: #202124;
    --color-surface: #303134;
  }
}

Use HSL for your custom properties when building design systems because it makes creating variations (lighter, darker, more muted) trivial with simple mathematical operations on the hue, saturation, and lightness values.