CSS Color Conversion Guide: HEX, RGB, HSL, HSV Explained

If you work with CSS, you will encounter at least four different color formats in a single project. A designer hands you HEX codes. The browser inspector shows RGB. Your animation library expects HSL. And your design tool exports HSV. Knowing how to convert between them — or using a reliable color converter CSS tool — saves time and prevents subtle bugs.

This guide explains every major color format, shows you how HEX to RGB conversion works under the hood, and gives you the mental models to pick the right format for every situation.

HEX Color Codes

HEX is the most widely recognized color format in web development. A HEX color is a 6-digit hexadecimal number prefixed with #, where each pair of digits represents the red, green, and blue channels.

#FF5733
  ││ ││ ││
  ││ ││ └┴── Blue:  0x33 = 51
  ││ └┴──── Green: 0x57 = 87
  └┴────── Red:   0xFF = 255

Each channel ranges from 00 (0 in decimal) to FF (255 in decimal). That gives you 256 levels per channel, or roughly 16.7 million possible colors.

Short-Hand HEX

When both digits in a pair are identical, you can use the 3-character shorthand:

• #FF5533 becomes #F53
• #FFFFFF (white) becomes #FFF
• #000000 (black) becomes #000

HEX with Alpha

CSS supports 8-digit HEX for colors with transparency. The last two digits represent the alpha channel:

#FF573380   →  Red-orange at 50% opacity
#000000CC   →  Black at 80% opacity

RGB and RGBA

RGB (Red, Green, Blue) is the native format for screens. Every pixel on your monitor is a combination of these three channels. In CSS:

rgb(255, 87, 51)        /* Same as #FF5733 */
rgba(255, 87, 51, 0.5)  /* 50% opacity */

RGB and HEX are just different notations for the same model. Converting HEX to RGB is straightforward arithmetic:

#FF5733 → rgb(255, 87, 51)

R: FF (hex) = 15×16 + 15 = 255 (decimal)
G: 57 (hex) = 5×16 + 7   = 87  (decimal)
B: 33 (hex) = 3×16 + 3   = 51  (decimal)

Modern CSS also supports the space-separated syntax: rgb(255 87 51 / 0.5).

HSL: Hue, Saturation, Lightness

HSL is the most intuitive color format for designers because it maps to how humans actually think about color:

• Hue (H): The color wheel position, 0–360 degrees. Red is 0, green is 120, blue is 240.
• Saturation (S): How vivid the color is, 0% (gray) to 100% (full color).
• Lightness (L): How bright the color is, 0% (black) to 100% (white), with 50% being the pure color.

hsl(14, 100%, 60%)   /* A warm orange */
hsl(210, 60%, 50%)   /* A medium blue */
hsl(0, 0%, 50%)      /* Neutral gray */

HSL shines when you need color variations. Want a lighter version? Increase lightness. Want a muted version? Decrease saturation. This is much harder to do mentally with HEX or RGB.

HSL vs. HSV

HSL and HSV (also called HSB) are often confused. Both use hue as the first value, but they differ in how they express brightness:

Design tools like Figma, Photoshop, and Sketch typically use HSV/HSB because it matches the behavior of color pickers more intuitively. CSS only supports HSL natively, so you will often need a color converter to go from HSV to HSL for web use.

How to Convert Between Formats

HEX to RGB Conversion

The conversion is direct — split the HEX string into three pairs and convert each from base-16 to base-10:

function hexToRgb(hex) {
  hex = hex.replace('#', '');
  return {
    r: parseInt(hex.substring(0, 2), 16),
    g: parseInt(hex.substring(2, 4), 16),
    b: parseInt(hex.substring(4, 6), 16)
  };
}

hexToRgb('#FF5733');  // { r: 255, g: 87, b: 51 }

RGB to HSL Conversion

This involves normalizing RGB values to 0–1, finding the min and max, then computing hue from the dominant channel. The math is more involved, which is why a tool like our Color Converter is so useful — it handles all the math and shows every format simultaneously.

Using a Color Converter Tool

Instead of doing the math by hand, paste any color value into the DevKitDock Color Converter. It accepts HEX, RGB, HSL, and HSV input and instantly displays all four formats. It also includes a visual color picker for exploring colors interactively.

CSS Color Functions You Should Know

Modern CSS introduces powerful color manipulation functions that reduce the need for manual conversion:

/* Relative color syntax (CSS Color Level 4) */
color: hsl(from var(--brand) h s calc(l + 20%));

/* Color mixing */
color: color-mix(in srgb, blue 30%, white);

/* Wide-gamut colors */
color: oklch(0.7 0.15 180);  /* P3 and beyond */

These functions work within the browser, but you still need to know the underlying formats to use them effectively — especially hsl(), which is the backbone of CSS color manipulation.

The best format depends on context: HEX for quick references, RGB for programmatic control, HSL for intuitive adjustments, and HSV when bridging from design tools.