Quick answer: HEX, RGB and HSL are three ways of writing the same color. HEX and RGB describe how much red, green and blue light to mix; HSL describes hue, saturation and lightness, which is easier for humans to adjust. All three work in CSS, and the color converter switches between them instantly.

HEX

A HEX color is a hash sign followed by six hexadecimal digits: two each for red, green and blue, from 00 (none) to ff (full). So #dc2626 is red 220, green 38, blue 38. Shorthand like #f00 doubles each digit, and an optional two extra digits, such as #dc262680, set opacity.

HEX is compact and the most common format in design handoffs and brand guidelines.

RGB

RGB writes the same three values as decimal numbers from 0 to 255: rgb(220, 38, 38). It is easier to read and calculate with than HEX, and works well in code that manipulates colors. Modern CSS also accepts rgb(220 38 38 / 50%) for transparency.

HSL

HSL stands for hue, saturation and lightness. Hue is a position on the color wheel from 0 to 360 degrees, saturation is how vivid the color is, and lightness runs from black (0%) to white (100%). The same red is hsl(0, 72%, 51%).

HSL is the friendliest format for building palettes: keep the hue and change the lightness to get lighter tints and darker shades of the same color.

Which One Should You Use?

  • Handing over a brand color: HEX.
  • Calculating or animating channels in code: RGB.
  • Creating hover states, tints, shades or themes: HSL.

They are interchangeable in the browser, so pick the one that makes your job easiest and stay consistent within a project.

Check Contrast Before You Commit

A color that looks good may still be hard to read as text. The WCAG accessibility guidelines ask for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text against its background. The color converter shows the ratio for both white and black text so you can check before using a color for a button or a heading.