HEX, RGB, HSL and OKLCH explained

Updated 2026-09-12 · by the ColorSwoop team

Every color page on ColorSwoop lists five codes for the same color. Here is what each one is for.

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.

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. The catch is that HSL lightness does not match perceived brightness across hues, so palettes built in HSL can look uneven.

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.

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.

Which should you use?

• Writing a color down or sharing it: HEX.
• Adjusting a color by hand: HSL or OKLCH.
• Generating tints, shades or whole palettes in code: OKLCH.
• Sending files to print: CMYK (and a physical proof).

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