Understanding HEX, RGB, and HSL Colors

Every color on a screen is ultimately just numbers, but which numbers, and what they represent, differs across the formats developers and designers use every day. HEX, RGB, HSL, and HSB (also called HSV) all describe the exact same underlying colors; they just organize the information differently, and each organization makes certain tasks easier or harder.

RGB: The Foundation

RGB (red, green, blue) describes a color as a mix of three light channels, each ranging from 0 to 255. This maps directly to how screens actually produce color, every pixel is made of red, green, and blue sub-pixels, and RGB values control their relative brightness.

rgb(37, 99, 235)  /* a medium blue */

RGB is intuitive once you know the primary-color mixing rules: more red and green with little blue produces yellow; equal amounts of all three produce gray (or white, at maximum); zero across all three is black. What RGB is not particularly intuitive for is adjusting a color's lightness or saturation without changing its hue, brightening a specific blue while keeping it recognizably "the same blue" requires adjusting all three channels in a non-obvious way.

HEX: RGB in Compact Form

HEX is not really a different color model at all, it's just RGB values written in base-16 (hexadecimal) instead of base-10, packed into a single compact string:

#2563EB  /* the same blue as above */

Each pair of hex digits represents one channel: 25 (hex) = 37 (decimal) for red, 63 (hex) = 99 for green, EB (hex) = 235 for blue. HEX's main advantage is compactness, a single six-character string instead of three separate numbers, which is why it's the dominant format in CSS, design tools, and brand style guides. The three-digit shorthand (#25E, expanding each digit, like #2255EE) works when both digits in a pair are identical, though this is relatively uncommon for arbitrary colors.

HEX shares RGB's core limitation: it's not intuitive to adjust lightness or saturation directly, since every channel typically needs to change together to keep the same hue.

HSL: Designed for Adjustment

HSL (hue, saturation, lightness) reorganizes the same color information around properties that map more naturally to how people describe and adjust color:

• Hue (0–360°) is the base color on a color wheel: 0° is red, 120° is green, 240° is blue, with everything in between.
• Saturation (0–100%) is how intense or muted the color is: 0% is grayscale, 100% is fully saturated.
• Lightness (0–100%) is how close to black or white the color is: 0% is always black, 100% is always white, regardless of hue or saturation.

hsl(221, 83%, 53%)  /* the same blue again */

HSL's real advantage shows up when you need to adjust a color rather than just specify one from scratch. Want a lighter version of a given blue for a hover state? Increase the lightness value and leave hue and saturation untouched, the result is recognizably the same color, just lighter. Doing the equivalent adjustment in RGB requires recalculating all three channels by hand, since there's no single RGB value that means "lighter" independent of the others.

This is why HSL (and HSB below) are common in design tools' color pickers, and why CSS custom properties for theming often store colors as HSL components specifically so lightness or saturation can be tweaked independently in different contexts (like generating a hover or disabled state from a base color).

HSB / HSV: A Close Relative of HSL

HSB (hue, saturation, brightness, also called HSV, for hue, saturation, value) is similar to HSL and shares the same hue and saturation concepts, but its third component works differently. Where HSL's lightness always reaches pure white at 100% regardless of saturation, HSB's brightness at 100% with full saturation gives the purest, most vivid version of a hue, white only appears when saturation drops toward 0% and brightness is high.

hsb(221, 84%, 92%)  /* the same blue, in HSB terms */

HSB is common in image editing and design software (it's the model behind the classic square color picker in tools like Photoshop), while HSL is more common in CSS and web design contexts. Neither is more "correct", they're just different ways of organizing the same three degrees of freedom (aside from hue, which both share).

Why the Same Color Looks Different Across Formats

Because HEX, RGB, HSL, and HSB all describe exactly the same set of possible colors, converting between them is always exact and reversible, there's no approximation or data loss involved (aside from minor rounding when converting between integer and percentage representations). If a conversion tool shows you slightly different-looking numbers for "the same" color between HSL and HSB, that's expected: they're using different scales for the third component, not disagreeing about what the color actually is.

Choosing a Format for Your Use Case

Use HEX when you need the shortest possible representation, especially in design specs, brand guidelines, or CSS where compactness is valued and you're not planning to adjust the color programmatically.

Use RGB when you're working with something that naturally deals in the underlying channels, image processing, canvas manipulation, or contexts where you need to blend or average colors mathematically (blending is more straightforward in RGB than in hue-based models).

Use HSL when you're building a design system or theme where you need to derive related colors (lighter/darker variants, muted versions) from a base color, or whenever you're reasoning about a color's properties in terms a person would naturally describe ("make it a bit lighter," "make it more saturated").

Use HSB/HSV in contexts (often design and photo editing software) where that's the established convention, or when you specifically need brightness-based rather than lightness-based reasoning about a color.

Try It

Our Color Converter converts instantly between HEX, RGB, HSL, and HSB, with a live preview and a native color picker for visual selection, so you can move between whichever format your design tool, CSS file, or documentation happens to use, without doing the math by hand.