HEX, RGB, HSL and OKLCH explained

Updated 2026-09-14 · 2 min read · by the ColorSwoop team

Every color page on ColorSwoop lists five codes for the same color. Here is what each one is for, using one coral all the way through.

One color, five names — #FF7F50

#FF7F50

Format	#FF7F50 written as	What the numbers are
HEX	`#FF7F50`	red, green, blue as 00–FF
RGB	`rgb(255, 127, 80)`	the same three channels, 0–255
HSL	`hsl(16, 100%, 66%)`	hue on the wheel, saturation, lightness
CMYK	`0, 50, 69, 0`	ink percentages for print
OKLCH	`oklch(74% 0.17 40)`	perceptual lightness, chroma, hue

HEX (#FF7F50)

Three pairs of hexadecimal digits for red, green and blue, each from 00 to FF (0–255). Compact, universal, copy-paste friendly. Use it in CSS, design tools and anywhere a color needs to be written down.

The three channels on their own: FF red · 7F green · 50 blue

#FF0000 #007F00 #000050 #FF7F50

Full red, half green, a little blue — mixed as light, that is coral.

RGB (rgb(255, 127, 80))

The same three channels in decimal. Identical information to hex; useful when you need to add transparency: rgb(255 127 80 / 50%).

HSL (hsl(16, 100%, 66%))

Hue (0–360 on the color wheel), saturation (0–100%) and lightness (0–100%). Much easier to reason about: "make it lighter" means raising L.

Raising and lowering L on the coral

#FFE5DC #FFCCB9 #FFB296 #FF9973 #FF7F50 #CC6640 #994C30 #663320

This is why HSL is the format you adjust colors in by hand.

The catch is that HSL lightness does not match perceived brightness across hues, so palettes built in HSL can look uneven:

Six hues at exactly 50% HSL lightness

#F20D0D #F2F20D #0DF20D #0DF2F2 #0D0DF2 #F20DF2

Yellow glows, blue is dark, and HSL insists they are equally light.

CMYK (0, 50, 69, 0)

Cyan, magenta, yellow and black ink percentages for print. Screens cannot show every CMYK color and printers cannot reproduce every screen color, so check bright oranges, blues and greens with a printer before committing.

✕ Colors that shift in print

#0000FF #FF6A00 #00FF66

✓ Colors that print as they look

#264653 #C08261 #40513B

Saturated screen blues, oranges and greens sit outside what four inks can mix; muted and dark colors survive the trip.

OKLCH (oklch(74% 0.17 40))

Lightness, chroma and hue in a perceptually uniform space: equal numeric steps look like equal visual steps. This is why ColorSwoop generates and classifies palettes in OKLCH, and why its shades and tints look evenly spaced. CSS supports it natively.

Look up any color by typing its hex in the search bar, or open the color library to browse named colors with all five codes.

FAQ

What is a hex color code?

A six-digit hexadecimal number describing red, green and blue in pairs: #RRGGBB. #FF7F50 means red 255, green 127, blue 80. It is the most common way to write colors for the web.

Is HSL better than RGB?

HSL is easier for humans to adjust (hue, saturation, lightness) but it is not perceptually uniform: a yellow and a blue with the same HSL lightness look very different in brightness. OKLCH fixes that.

Can I use OKLCH in CSS today?

Yes. All modern browsers support oklch() in CSS. It is the best choice for generating consistent tints, shades and palettes programmatically.