Color picker & converter
Pick a color or enter a HEX, RGB or HSL value and get every format instantly — tap a code to copy it.
One colour, every format
Use the picker, type a HEX code, or set the red/green/blue channels, and the swatch updates alongside all three formats — HEX, RGB and HSL — at once. Click any of the value cards to copy it. It's the quickest way to grab a colour in exactly the notation your CSS, design tool or codebase expects, without doing the conversion in your head.
When to reach for HSL
HEX and RGB describe a colour by how much red, green and blue it contains, which is precise but hard to reason about. HSL — hue, saturation, lightness — describes it the way people actually think: pick a hue, then dial saturation and lightness up or down. That makes it far easier to build a set of related shades (a lighter or darker version of the same colour) by nudging the lightness, which is why designers lean on it for palettes and hover states.
A note on contrast
Colour isn't only about looks — text needs enough contrast against its background to stay readable, and accessibility guidelines set minimum ratios for that. When you're choosing text and background colours, lean toward clearly different lightness values rather than two mid-tones that look fine to you but fail for many readers. Seeing a colour in HSL makes that lightness gap obvious at a glance. For related conversions, the number base converter handles the hex maths behind colour codes.
A worked example: reading #e5484d
A HEX code is just three pairs of hexadecimal digits, one per channel. In #e5484d, e5 is red, 48 is green and 4d is blue. Convert each pair from base 16 to base 10 — e5 is 229, 48 is 72, 4d is 77 — and you have rgb(229, 72, 77), the same colour written as decimal channels from 0 to 255.
HSL then re-expresses those channels as hue (the position on the colour wheel, 0–360°), saturation (how vivid versus grey) and lightness (how close to black or white). Our red comes out as hsl(358, 75%, 59%): a hue near 360° means red, 75% saturation is strongly coloured, and 59% lightness sits just above the midpoint. To make a matching darker shade, keep the hue and saturation and drop the lightness.