What are HEX, RGB and HSL?

Three ways to write the same colour. HEX is a six-digit code used in web design (#0d7377). RGB lists red, green and blue from 0 to 255 (rgb(13, 115, 119)). HSL describes hue as a 0–360° angle, then saturation and lightness as percentages — the friendliest format for building palettes, because lightening a colour means raising one number.

How do I use a colour from a photo or website?

Get its HEX code from your design tool or browser inspector, paste it into the HEX box here, and read off the RGB and HSL equivalents — plus CSS-ready rgb() and hsl() strings you can copy straight into a stylesheet.

Why does the same HEX look different on my phone and monitor?

Screens render colour differently — panel type, brightness, night-mode filters and colour profiles all shift what you see. The numbers are exact; the displays are not. For brand work, always judge a colour on the target device.

Does this tool support colour names or CMYK?

Not in this version — it covers the three formats web and app work uses daily. CMYK is a print format; converting screen colours to print needs a press profile to be meaningful, so a bare number swap would mislead.

Color Converter

HEX, RGB and HSL — type in any format and the others follow live, with a preview swatch and CSS values ready to copy.

HEX

Red (0–255)

Green (0–255)

Blue (0–255)

Hue (0–360)

Saturation %

Lightness %

CSS values

How to use it

Start anywhere. Paste a HEX code, type RGB numbers, or slide HSL values into place.

Watch the swatch. Every format updates live so you can see the exact colour you are describing.

Copy the CSS. Take the rgb() or hsl() string straight into your stylesheet.

Why designers keep three formats in their pocket

HEX is compact and copy-paste friendly, so it is the language of brand guidelines and design tools. RGB matches how screens actually mix light, which makes it natural for canvas work and image code. HSL is the thinking format: keep the hue, nudge saturation down for a muted variant, raise lightness for a hover state, drop it for a pressed state — a whole interface palette from one base colour, without a colour wheel in sight. Converting between them by hand is error-prone arithmetic; this page does it live so the numbers never drift from the colour you see.

Color Converter

How to use it

Why designers keep three formats in their pocket

Related tools