Colour Converter
Enter any HEX, RGB or HSL code and instantly convert between all three formats.
Tap any result to copy
Describe it in your own words — like “a muted dusty rose”, “deep ocean teal” or “warm pastel peach” — and I’ll point you to it.
About the Colour Converter
The colour converter converts between HEX, RGB and HSL colour code formats. Enter any format and see all three updated simultaneously with a colour preview.
How to use the Colour Converter
Understanding colour formats
Each format describes the same colour a different way. Here's when to reach for each.
HEX
A six-digit code like #F5C542 used across the web and design tools. Compact and universal — the default for CSS and most apps.
RGB
Red, green and blue from 0–255, e.g. rgb(245, 197, 66). It maps to how screens emit light, and pairs with an alpha value (RGBA) for transparency.
HSL & HSV
Hue, saturation and lightness (or value) describe colour the way people think — pick a hue, then adjust how vivid and how light it is. Ideal for building shades and tints.
CMYK
Cyan, magenta, yellow and key (black) percentages used for print. Screens are additive (RGB); print is subtractive (CMYK), so check CMYK before printing.
Which should I use?
HEX or RGB for web and screens, HSL/HSV when tweaking shades, and CMYK for print. This tool keeps every format in sync so you never convert by hand.
HEX, RGB or HSL — which to use
Each format suits a different job. HEX codes like #3B82F6 are compact and the usual choice for CSS and design hand-off. RGB describes the same colour as red, green and blue channels, which maps directly to how a screen lights up. HSL — hue, saturation and lightness — is the easiest to adjust by hand, because you can nudge a single value to lighten or mute a colour without guessing at channels.
Building a palette
HSL makes palette work straightforward: keep the hue fixed and change the lightness to create tints and shades of one colour, or rotate the hue in even steps for a balanced set. Whatever format you design in, check the contrast between text and background colours so the result stays readable.