HEX, RGB, HSL and CMYK Color Codes Explained

Published October 11, 2026

Free tool: Color Picker→

The same blue can be written as #2A78D6, rgb(42, 120, 214) or hsl(213, 68%, 50%). They're different ways of describing one color, and each is handy in different situations: HEX for websites, HSL for adjusting shades, CMYK for print. This guide explains what the codes mean and when to use each, with the free Color Picker to convert between them.

RGB: red, green and blue light

Screens make colors by mixing red, green and blue light. An RGB code gives the amount of each, from 0 to 255: rgb(42, 120, 214) is a little red, more green and lots of blue. rgb(0, 0, 0) is black and rgb(255, 255, 255) is white.

HEX: RGB in short form

A HEX code is the same RGB values written in hexadecimal (base 16), two digits per channel: #2A78D6 means red 2A (42), green 78 (120) and blue D6 (214). It's the most common way to write colors on the web and in design tools. An optional fourth pair adds transparency, as in #2A78D680 for 50% opacity.

HSL and HSV: color you can reason about

HSL describes a color the way people think about it:

• Hue: the position on the color wheel, from 0 to 360 degrees (0 is red, 120 green, 240 blue).
• Saturation: how vivid the color is, from gray (0%) to full color (100%).
• Lightness: from black (0%) through the pure color (50%) to white (100%).

That makes HSL ideal for making lighter or darker versions of a color: keep the hue and saturation, and change only the lightness. HSV (or HSB) is similar, with brightness instead of lightness; many color pickers use it.

CMYK: ink for printing

Printers mix cyan, magenta, yellow and black (K) ink, so print colors are described in percentages of each. Converting an RGB color to CMYK gives an approximation: screens can show some bright colors that ink can't reproduce. For important print work, ask your printer for their color guidance.

OKLCH: a modern alternative

OKLCH is a newer way to write colors, now supported in modern CSS. Its lightness matches how bright colors look to people more closely than HSL does, which makes it useful for building even palettes.

How to use the Color Picker

1. Open the Color Picker.
2. Pick a color with the picker, or type any color code or color name to convert it.
3. Copy the codes: HEX, RGB, HSL, HSV, CMYK and OKLCH, plus the closest named color. You can also set the transparency (alpha).
4. Check text contrast. The tool shows how readable the color is on white and on black, with WCAG ratings: AA needs a contrast ratio of 4.5:1 for normal text (3:1 for large text), and AAA needs 7:1.
5. Use the tints and shades, lighter and darker versions of your color, for hover states, backgrounds and borders.
6. Save colors as you go and copy all their HEX codes at once.

For color schemes that go together, try the Color Wheel; to grab a color from a picture, use the Image Color Picker.

Frequently asked questions

What's the difference between HEX and RGB?

Nothing in terms of color: a HEX code is just the RGB values written in hexadecimal. #FF0000 and rgb(255, 0, 0) are the same red.

Which color code should I use for my website?

HEX is the most common and works everywhere. HSL or OKLCH are handy when you want to adjust lightness or build a set of related shades in your CSS.

Can I convert RGB to CMYK exactly?

Not exactly, because screens and printers produce color differently and some bright screen colors can't be printed. A converter gives a close starting point; your printer can advise on exact matches.