HEX, RGB, HSL and CMYK codes

What each color code means, when to use it, and how to convert between them.

The same color can be written in several ways. They all describe one color; they're just suited to different jobs.

HEX: the web's favorite

A HEX code like #4F46E5 is six characters: two for red, two for green and two for blue, each from 00 to FF. It is short, easy to copy, and works in CSS, Canva, Figma and almost every design app.

RGB: red, green and blue light

rgb(79, 70, 229) is the same color written as numbers from 0 to 255. Screens make colors by mixing red, green and blue light, so RGB matches how a display works. Use it when you need transparency: rgba(79, 70, 229, 0.5).

HSL: the human-friendly one

hsl(243, 75%, 59%) means hue 243° on the color wheel, 75% saturation and 59% lightness. HSL is the easiest to adjust by hand: want a lighter version? Raise the last number. Want it calmer? Lower the middle one.

CMYK: for print

Printers mix cyan, magenta, yellow and black ink instead of light, so print shops ask for CMYK values. Bright screen colors, especially vivid blues and greens, often look duller in print, so always check a printed proof for important work.

Converting

You never need to convert by hand. Paste any HEX code into the Color Picker and it shows the RGB, HSL and CMYK versions, plus tints, shades and the closest color name.

Convert a color nowOpen tool

More guides

← Back to Colrify