- 100% free
- No sign-up
- Runs in your browser
Color Converter
Convert colours between HEX, RGB, HSL, HSV and CMYK, and check text contrast against white and black.
Text in this colour: AA large text on white, AA on black (WCAG 2).
HEX
#6366F1
RGB
rgb(99, 102, 241)
HSL
hsl(239, 84%, 67%)
HSV / HSB
hsv(239, 59%, 95%)
CMYK
cmyk(59%, 58%, 0%, 5%)
CSS variable
--color: #6366F1;
About Color Converter
Color Converter takes a colour in any common format — HEX, RGB, HSL or a plain “r, g, b” triple — and gives it back in all the others: HEX, RGB, HSL, HSV and CMYK, plus a ready-made CSS variable. A live swatch shows the colour, and contrast ratios tell you whether it is readable as text on white or black.
Each format exists for a reason. HEX is the shorthand used in CSS and design tools; RGB is how screens mix light; HSL describes a colour by hue, saturation and lightness, which makes it the easiest to adjust by hand — darken a button on hover by lowering L alone. HSV (also called HSB) is what most colour pickers in design software use. CMYK is the language of printing.
Designers move between them constantly: a brand guide gives a HEX code, a design tool shows HSB, a developer needs rgba() with transparency, and the printer asks for CMYK. Pasting once and copying the format you need avoids the rounding mistakes of converting by hand.
The contrast check uses the WCAG 2 formula. Normal body text needs at least 4.5:1 for the AA level, large text 3:1, and the stricter AAA level asks for 7:1. Testing a brand colour against white and black early saves an accessibility fix later.
How to convert a colour
- Paste a colour code into the box, or choose one with the colour picker.
- See the colour in the swatch on the left.
- Copy it as HEX, RGB, HSL, HSV, CMYK or a CSS variable.
- Check the contrast ratios to see whether it works as text on white or black.
Tips & common problems
Adjust colours in HSL
To make a lighter or darker shade of the same colour, convert to HSL and change only the lightness value. Hue and saturation stay put, so the shade still matches.
CMYK here is an estimate
Real print output depends on the paper and printer profile. Use these values as a starting point and ask your printer for a proof of brand-critical colours.
Transparency is supported
8-digit HEX codes and rgba()/hsla() values keep their alpha channel, and the outputs include it.
Frequently asked questions
How do I convert HEX to RGB?
Paste the HEX code, such as #6366F1, and the RGB value appears instantly — in this case rgb(99, 102, 241).
What is the difference between HSL and HSV?
Both describe hue and saturation, but HSL uses lightness, where 100% is always white, while HSV uses value or brightness, where 100% is the purest form of the colour.
Can I convert RGB to CMYK for printing?
Yes, a CMYK value is shown for every colour. It uses the standard formula, so confirm critical colours with your printer’s profile.
What contrast ratio do I need for text?
WCAG 2 AA asks for at least 4.5:1 for normal text and 3:1 for large text. AAA asks for 7:1.
Does it support transparent colours?
Yes. Use an 8-digit HEX code or rgba()/hsla() and the alpha value is carried through every format that supports it.