Color Converter

Convert any colour between HEX, RGB, HSL, HSV and CMYK, with tints, shades and WCAG contrast.

Runs in your browser. Nothing you type is sent to a server.

How to use Color Converter — HEX, RGB, HSL, CMYK Online Free

  1. 1Type a hex code, RGB or HSL value, or a CSS colour name — or pick from the swatch.
  2. 2Every format is listed at once: HEX, RGB, HSL, HSV and CMYK.
  3. 3Copy the notation you need, or click a tint or shade to carry on from it.

About Color Converter

Every colour notation describes the same thing differently. HEX and RGB give the amount of red, green and blue light; HSL and HSV reorganise that into hue, saturation and lightness; CMYK describes ink coverage for print. Moving between them by hand is error-prone, and this converts all of them at once.

HSL is worth understanding even if you write hex. Because it isolates lightness, producing a consistent set of shades from a brand colour is a matter of stepping one number — which is exactly how design systems build their colour scales. The tint-and-shade ramp here does that for you, and every swatch is clickable if you want to carry on from it.

The contrast figures are the part people most often skip. A colour that looks fine in a mockup can fail accessibility guidelines badly as body text, and the ratio against white and black tells you immediately whether it is usable or only decorative.

Frequently asked questions

What is the difference between HEX and RGB?
None, other than notation. #ff0000 and rgb(255, 0, 0) describe exactly the same colour; hex is just the same three numbers written in base 16.
When should I use HSL instead of HEX?
Whenever you want to adjust a colour rather than specify one. HSL separates hue, saturation and lightness, so making a shade darker means changing one number instead of recalculating three.
Why does CMYK look different from my screen colour?
CMYK is for ink on paper and covers a smaller range than a screen. Vivid blues and greens in particular cannot be reproduced exactly in print, so the conversion is an approximation — treat it as a starting point and proof with your printer.
What do the contrast numbers mean?
The WCAG contrast ratio between your colour and black or white. 4.5:1 is the minimum for normal body text (AA), 3:1 for large text, and 7:1 meets the stricter AAA level.
Can I enter a colour name?
Yes — any CSS named colour such as tomato, rebeccapurple or slategray is resolved and converted.
Is it free?
Yes — unlimited use, no sign-up, no watermark and no limit on how many times you run it.