TL;DR: HEX, RGB, and HSL all describe the same colours in different ways. HEX and RGB are two notations for the same red-green-blue values; HSL re-expresses them as hue, saturation, and lightness, which is far easier to adjust by hand. Knowing which format to reach for saves a lot of guessing when you're matching or tweaking colours.

A colour on the web is ultimately three channels — red, green, and blue — but the way you write those channels changes how easy the colour is to reason about.

HEX, RGB and HSL: How to Convert Colors Without Guessing
HEX, RGB and HSL: How to Convert Colors Without Guessing

HEX and RGB: the same thing, written twice

RGB lists the three channels directly: rgb(37, 99, 235). HEX packs the identical values into a hexadecimal string: #2563EB, where 25, 63, and EB are the red, green, and blue bytes. They are interchangeable — HEX is compact and common in design tools, RGB is convenient in code because you can compute each channel. Neither is more "accurate"; they're two spellings of one colour.

HSL: the format built for tweaking

HSL describes a colour as hue (its position on the colour wheel, 0–360°), saturation (how vivid, 0–100%), and lightness (how bright, 0–100%). This is the format to use when you want to adjust rather than replace a colour: nudge the lightness down for a hover state, drop the saturation for a muted variant, or shift the hue to find a complementary colour. Doing the same edits in HEX means guessing at byte values.

Alpha and 8-digit HEX

Transparency is expressed with an alpha channel: rgba() and hsla() add a fourth value from 0 (transparent) to 1 (opaque). Modern CSS also supports 8-digit HEX, where the last two characters encode alpha — #2563EB80 is the same blue at roughly 50% opacity.

CMYK is a different world

HEX, RGB, and HSL are all screen colour models (additive light). CMYK is for print (subtractive ink). A conversion between them is always approximate because the two can't reproduce exactly the same range of colours, so treat a screen-to-print conversion as a starting point to be proofed, not an exact match.

A practical workflow

  1. Paste your starting colour — in any format — into the Color Converter to see all formats at once.
  2. Switch to HSL to build variants: adjust lightness for states, saturation for muted tones.
  3. Add alpha with rgba()/hsla() or 8-digit HEX where you need transparency.
  4. Use the gradient preview to generate a ready-to-copy CSS snippet for two or more colours.

If you're batching a palette, convert several colours at once (comma- or line-separated) and keep the results next to your notes with the Character Counter.

Common mistakes to avoid

  • Editing colours in HEX when HSL would make the adjustment obvious.
  • Expecting a CMYK conversion to match the screen exactly.
  • Forgetting the alpha channel and getting an opaque colour where you wanted transparency.
  • Mixing formats inconsistently across a stylesheet.