colorhexrgbhsldesigncss

HEX, RGB, HSL: what is the difference between color formats

Let's look at four color formats: HEX, RGB, HSL and CMYK. When to use each, how to convert, code examples.

Published February 23, 2026·Time to read: 8 min

Color formats on the web

In web development and design, colors are specified in several ways. Each format has its advantages.

Hexadecimal notation is the most common format on the web.

color: #4f46e5; /* Indigo */ 
color: #09090b; /* Almost black */ 
color: #fff; /* Short form #ffffff */

Pros: Brevity, clarity for designers, supported everywhere.

Sets the color through the intensity of three channels from 0 to 255.

color: rgb(79, 70, 229); /* Indigo */ 
color: rgba(79, 70, 229, 0.5); /* With transparency */

Pros: Intuitive, convenient for programmatic color manipulation.

The most “human” format: hue (°), saturation (%), lightness (%).

color: hsl(243, 75%, 59%); /* Indigo */ 
color: hsl(243, 75%, 45%); /* Darker */ 
color: hsl(243, 75%, 75%); /* Lighter */

Pros: Easily create tonal palettes by changing only the lightness.

Used in printing.

cmyk(66%, 69%, 0%, 10%) = Indigo

Pros: Exact color match when printed.

Problem	Format
---	---
CSS styles	HEX or HSL
Animations and calculations	HSL or RGB
Printing, brand book	CMYK
Transparency	rgba() or hsla()

Convert colors online with our tool - HEX, RGB, HSL, CMYK and WCAG contrast checker.