Colour Converter

Convert colours between HEX, RGB, HSL, HSV and CMYK instantly.

Loading tool…
Free, no sign up. Runs in your browser, so your data never leaves your device.

What is a colour converter?

A colour converter translates one colour code into the other formats that designers and developers use. The same shade of blue can be written as the HEX code #1D4ED8, as rgb(29, 78, 216), as hsl(224, 76%, 48%) or as a CMYK mix for print. Different apps and languages expect different formats, so being able to switch between them quickly saves a lot of guessing and retyping.

This converter shows all five formats side by side next to a large colour swatch. You can start from the colour picker or type into any field, and every other field updates as soon as the value is valid.

How to convert a colour

  1. Pick a colour with the colour picker, or type a value into the HEX, RGB, HSL, HSV or CMYK box.
  2. Watch the other boxes and the swatch update straight away.
  3. Press Copy next to the format you need, or Copy all to grab every format at once.
  4. Use Random colour when you want a fresh starting point.

Colour formats explained

  • HEX is the six digit code used in CSS and most design apps. Three digit shorthand such as #FFF is accepted, and so are CSS colour names such as tomato or teal.
  • RGB describes how much red, green and blue light makes up the colour, each from 0 to 255.
  • HSL stands for hue, saturation and lightness. It is the easiest format for making a colour lighter, darker or more muted by changing one number.
  • HSV or HSB uses hue, saturation and value (brightness). It is the model behind the colour pickers in many graphics programs.
  • CMYK lists cyan, magenta, yellow and black ink percentages for printing.

When you need it

Use it to turn a brand colour from a style guide into CSS, to match a colour from a screenshot in your design tool, to create hover states by nudging HSL lightness, or to give a printer an approximate CMYK value. The tool also shows how strongly the colour contrasts with white and with black, which is a quick hint for choosing text colour on top of it.

Tips for accurate colour

Screen colours and printed colours never match perfectly. The CMYK values here use the standard mathematical conversion without a printer profile, so treat them as a starting point and ask your print shop for a proof when exact colour matters. For the web, HEX and RGB are exact, while HSL and HSV values are rounded to whole numbers and may shift a colour by one step when converted back.

Frequently asked questions

Can I type a colour name instead of a code?

Yes. The HEX box accepts any colour name your browser understands, such as tomato, navy or rebeccapurple, and converts it to a HEX code.

Are the CMYK values print ready?

They are a standard mathematical conversion from RGB without a colour profile. They are a good approximation, but a printer may adjust them for their paper and inks.

Why does HSL sometimes change slightly after converting?

Screen colours are stored as whole RGB numbers, so an HSL value is rounded to the nearest RGB colour. Converting back can move hue, saturation or lightness by about one unit.

Does it support transparency?

No. The converter works with solid colours. If you paste an eight digit HEX or rgba value, the alpha part is ignored.