What is the difference between RGB and HEX color?

RGB and HEX represent the same color model — red, green, blue channels each with 256 levels (0–255). HEX is just a shorthand notation using hexadecimal: #FF0000 is equivalent to rgb(255, 0, 0). They produce identical colors in browsers.

Why is HSL better for design work?

HSL separates hue (the color), saturation (the intensity), and lightness (the brightness) into independent controls. This makes creating design palettes intuitive — to create a lighter version of a color, just increase L. RGB mixing is much less predictable.

What is the alpha channel in rgba() and hsla()?

The alpha channel controls opacity. rgba(255, 0, 0, 0.5) is a 50% transparent red. hsla(0, 100%, 50%, 0.5) is equivalent. The value ranges from 0 (fully transparent) to 1 (fully opaque).

HEX, RGB, and HSL: The Complete Color Models Guide for CSS and Design

Bilal Ahmad Published Sep 25, 2026 Updated Nov 2, 2026 3 min read

HEX is shorthand notation for RGB. HSL (hue, saturation, lightness) is the most intuitive model for designers — adjusting lightness to 50% always gives the purest color, regardless of hue.

HEX Color Model: #RRGGBB Notation Explained

Hexadecimal color code breakdown showing red, green, blue, and alpha byte channels

HEX color notation is a hexadecimal shorthand for RGB values. The format is #RRGGBB where:

RR = red channel (00 to FF = 0 to 255)
GG = green channel (00 to FF = 0 to 255)
BB = blue channel (00 to FF = 0 to 255)

Color	HEX	Meaning
Pure red	#FF0000	R=255 G=0 B=0
Pure green	#00FF00	R=0 G=255 B=0
Pure blue	#0000FF	R=0 G=0 B=255
White	#FFFFFF	R=255 G=255 B=255
Black	#000000	R=0 G=0 B=0
ToolDolfen blue	#3B82F6	R=59 G=130 B=246

Shorthand HEX: When both digits are identical for each channel, a 3-character shorthand works: #F00 = #FF0000.

RGB Color Model: Red, Green, Blue Channels

RGB additive color model showing overlapping red, green, and blue light waves

rgb(red, green, blue) — each channel ranges from 0 to 255.

RGB is an additive color model — adding channels together moves toward white. This is how light works (TV screens, monitors).

In CSS:

color: rgb(59, 130, 246);     /* Blue */
color: rgba(59, 130, 246, 0.5); /* Blue at 50% opacity */

HSL Color Model: Hue, Saturation, Lightness

HSL color cylinder coordinates displaying hue angle, saturation percentage, and lightness

HSL separates color into three perceptually meaningful dimensions:

Hue (0–360°): The color itself — red at 0°, green at 120°, blue at 240°
Saturation (0–100%): Color intensity — 0% is gray, 100% is pure vivid color
Lightness (0–100%): Brightness — 0% is black, 100% is white, 50% is the purest color

In CSS:

color: hsl(217, 91%, 60%);      /* Blue */
color: hsla(217, 91%, 60%, 0.5); /* Blue at 50% opacity */

Designer workflow advantage: To create a 5-shade palette from a single color:

90% lightness → very light tint
75% lightness → light tint
50% lightness → base color
35% lightness → dark shade
20% lightness → very dark shade

Just adjust the L value while keeping H and S constant.

When to Use HEX, RGB, or HSL in CSS

Color models comparison matrix showing syntax, alpha support, and use cases for HEX, RGB, HSL, and OKLCH

Use HEX: For single-color references where you need the value from a design system or brand guide. HEX is the most common format in design specs.

Use RGB: When you need to dynamically manipulate color channels in JavaScript: rgb(${r}, ${g}, ${b}).

Use HSL: When building theme systems, generating palettes dynamically, or working with CSS custom properties for accessible light/dark mode switching.