CaliberVisual
Log inStart free
Free tool

Color converter

Type a colour in any format and get it in all of them.

  • HEX#1B7F5C
  • HEX with alpha#1B7F5CFF
  • RGBrgb(27 127 92)
  • RGBArgba(27, 127, 92, 1)
  • HSLhsl(159 65% 30%)
  • HSLAhsla(159, 65%, 30%, 1)
  • HSB / HSV159°, 79%, 50%
  • CMYK79%, 0%, 28%, 50%

CMYK here is the standard naive conversion — the one a browser or a design tool shows. Good enough to see roughly where a colour lands, not a basis for a print run: a press needs the profile for its own ink and paper.

What this does

Converts a single colour between HEX (three, four, six and eight digit), RGB and RGBA, HSL and HSLA, HSB/HSV, and CMYK, and accepts any of them as the input — paste #1B7F5C, rgb(27 127 92) or hsl(160 65% 30%) and the rest fill in. Alpha is carried through the formats that support it. A note on CMYK: the conversion here is the standard naive formula, which is what a browser or a design tool shows you, and it is a good approximation for screen work. It is not a colour-managed conversion, so it should not be the basis of a print run — a printer needs the profile for the actual press and paper.

How to convert a colour

  1. 01

    Paste any format

    Hex with or without the hash, an rgb() or hsl() string in old or modern CSS syntax, or a plain set of numbers. It works out which one you gave it.

  2. 02

    Read the rest

    Every other format updates live, with the swatch alongside so you can confirm you typed what you meant.

  3. 03

    Copy what you need

    Hex for a design tool or a brand kit, HSL for adjusting lightness by hand, RGB for a video editor's colour fields.

Questions

What is the difference between HSL and HSB?

Both start with the same hue and saturation, but the third value differs. HSL's lightness runs from black through the pure colour at 50% to white at 100%. HSB's brightness runs from black to the pure colour at 100%, and you desaturate to reach white. HSL is the one in CSS; HSB is the one in Photoshop and Figma's picker, which is why the same colour reads as two different numbers in two tools.

What is the eight-digit hex code?

Six digits of colour plus two of alpha, so #1B7F5C80 is that green at 50% opacity. It is supported everywhere in CSS now. The four-digit form is the same shorthand as three-digit hex with an alpha nibble on the end.

Is this CMYK conversion safe for print?

For a rough idea, yes. For a press, no. Real CMYK depends on the ink, the paper and the press profile, and no formula without those can tell you what will come out. Use this to see roughly where a colour lands, and ask your printer for the profile before committing.

Why does my colour look different in my video editor?

Colour space. A hex code is sRGB; a video editor may be working in Rec. 709 or in a log profile, and the same numbers land differently once a transform is applied. Judge it on the exported file rather than in the picker.

Other free tools