Color Codes Explained: HEX, RGB, HSL & CMYK Conversion Guide 2026

Colors are everywhere on the web. But have you ever wondered what #6366f1 or rgb(99, 102, 241) actually means? Understanding color codes is essential for web design, graphic design, and digital art.

In this guide, we'll break down the four major color formats — HEX, RGB, HSL, and CMYK — and show you how to convert between them using our free Color Picker tool.

1. HEX Color Codes

HEX (hexadecimal) is the most common color format on the web. It's a 6-digit code that represents the red, green, and blue components of a color.

Format: #RRGGBB

Each pair represents a color channel from 00 (0) to FF (255) in hexadecimal:

• #FF0000 — Pure red (FF red, 00 green, 00 blue)
• #00FF00 — Pure green
• #0000FF — Pure blue
• #FFFFFF — White (all channels max)
• #000000 — Black (all channels zero)
• #6366F1 — Indigo (ToolCraft Pro's primary color!)

3-Digit Shorthand

When both digits of each pair are the same, you can shorten the code: #FFF = #FFFFFF, #F00 = #FF0000.

2. RGB Color Model

RGB stands for Red, Green, Blue. It's an additive color model — adding all three at full intensity produces white.

Format: rgb(red, green, blue) where each value is 0-255.

RGB to HEX Conversion

Converting is straightforward: each decimal value (0-255) becomes a 2-digit hex value.

RGB(99, 102, 241) → HEX:
  99  = 63 → #63
  102 = 66 → #66
  241 = F1 → #F1
  Result: #6366F1

3. HSL Color Model

HSL (Hue, Saturation, Lightness) is more intuitive for designers because it describes colors the way humans think about them.

• Hue (0-360°): The color itself on a color wheel (0=red, 120=green, 240=blue)
• Saturation (0-100%): How vivid the color is (0%=gray, 100%=full color)
• Lightness (0-100%): How bright (0%=black, 50%=normal, 100%=white)

Why HSL is Better for Design

Want a lighter version of a color? Just increase the lightness. Want it more muted? Decrease saturation. With HEX or RGB, you'd need to recalculate all three channels.

4. CMYK Color Model

CMYK (Cyan, Magenta, Yellow, Key/Black) is used in print. It's a subtractive model — ink absorbs light, so adding all colors produces black.

Important: Colors look different on screen (RGB) vs. print (CMYK). Always convert and test before sending to print!

Quick Reference: Popular Web Colors

Color	HEX	RGB	HSL
Red	#EF4444	239, 68, 68	0°, 84%, 60%
Orange	#F97316	249, 115, 22	25°, 92%, 53%
Green	#22C55E	34, 197, 94	142°, 71%, 45%
Blue	#3B82F6	59, 130, 246	217°, 91%, 60%
Purple	#8B5CF6	139, 92, 246	258°, 90%, 66%
Pink	#EC4899	236, 72, 153	330°, 81%, 60%