Color Code Converter
Convert colors between HEX, RGB, HSL, HSV, and CMYK formats. Color picker with real-time preview.
About this calculator
Convert colours between HEX, RGB, HSL, HSV and CMYK with a colour picker and live preview.
Web designers, developers and print designers each use a different colour notation, so a quick converter saves time.
How to use it
- Pick a colour or type a HEX, RGB or HSL value.
- Read the other formats instantly.
- Copy the one you need.
How colour formats relate
HEX is the red, green and blue channels written as three base-16 pairs: #3B82F6 means R = 0x3B = 59, G = 0x82 = 130, B = 0xF6 = 246. HSL describes the same colour as hue (0 to 360 degrees on the colour wheel), saturation and lightness in percent. HSV is similar with value instead of lightness. CMYK is the subtractive print model: cyan, magenta, yellow and black. CMYK values from screen RGB are approximations because printers have a different gamut.
Worked example
#3B82F6 in every format
| HEX | #3B82F6 |
| RGB | rgb(59, 130, 246) |
| HSL | hsl(217, 91%, 60%) |
| Common colours | #FF0000 = rgb(255,0,0); #FFFFFF = rgb(255,255,255); #000000 = rgb(0,0,0) |
Everything runs in your browser. Nothing is uploaded.
Tips and common mistakes
- Use HSL when you need lighter or darker versions of a colour: change only L.
- 3-digit hex like #f60 expands to #ff6600.
- 8-digit hex adds alpha: #3B82F680 is 50% transparent.
- Printed colours rarely match the screen exactly; request a proof.
- Name your colours as CSS variables.
Frequently asked questions
How do I convert HEX to RGB?
Split into three pairs and convert each from base 16 to decimal.
What is HSL?
Hue, saturation and lightness, a more intuitive way to describe colour.
What is the difference between HSL and HSV?
HSV uses brightness (value), HSL uses lightness; white differs between them.
What is CMYK?
The ink model used in printing.
Does #fff equal #ffffff?
Yes.
Can hex include transparency?
Yes, with a fourth pair (alpha).