HEX to RGB in CSS — Color Format Conversion and When to Use Each

CSS supports multiple color formats and you'll encounter all of them in real projects. Designers hand off colors in hex. Developers write them in RGB for opacity control. Design systems increasingly use HSL for its intuitiveness. Knowing how to convert between them without reaching for a calculator each time speeds up your workflow.

How HEX colors work

A hex color code is six characters: #RRGGBB. Each pair represents the intensity of red, green, and blue on a scale of 00 (none) to FF (full, which is 255 in decimal).

#FF5733 breaks down as: red = FF = 255, green = 57 = 87, blue = 33 = 51. So it's a vivid orange-red with a lot of red, some green, and a little blue.

Shorthand hex also exists: #F53 expands to #FF5533. Only works when each pair uses the same two digits.

Converting HEX to RGB

Take each two-character pair and convert from base 16 to base 10. FF = (15 × 16) + 15 = 255. 57 = (5 × 16) + 7 = 87. 33 = (3 × 16) + 3 = 51. Result: rgb(255, 87, 51).

In CSS, you can now write this as:

color: #FF5733;
color: rgb(255, 87, 51);
color: rgba(255, 87, 51, 0.8); /* 80% opacity */

HSL: the designer-friendly format

HSL stands for hue, saturation, and lightness. The hue is a degree on a color wheel (0 = red, 120 = green, 240 = blue). Saturation is how vivid the color is (0% = gray, 100% = full color). Lightness is how light or dark (0% = black, 100% = white).

The reason designers prefer HSL is that adjustments are intuitive. To make a color lighter, increase the lightness percentage. To make it less saturated, lower the saturation. You can't do this easily with hex or RGB without recalculating.

/* Same orange-red in HSL */
color: hsl(11, 100%, 60%);

/* Lighter version - just change lightness */
color: hsl(11, 100%, 75%);

When to use which format

Use hex when copying colors from Figma or a brand guide. Use rgb/rgba when you need opacity control. Use HSL in design systems where you're generating color scales programmatically. Use the Color Converter to move between all three without doing the math manually.