OMNITOOLSUtility Platform

HEX, RGB & HSL Color Formats Explained — When to Use Each

Color on screens is defined by mixing red, green, and blue light. HEX, RGB, and HSL are three ways to write the same information — they differ in readability and how easy it is to manipulate the color mathematically.

HEX — The Web Standard

HEX colors are written as #RRGGBB where each pair of hex digits (00–FF) represents the intensity of red, green, and blue on a 0–255 scale.

For example, #2563EB means: Red = 0x25 = 37, Green = 0x63 = 99, Blue = 0xEB = 235.

HEX is compact and widely supported. A 3-digit shorthand (#RGB) works when each component has repeated digits: #FF6600 = #F60.

8-digit HEX (#RRGGBBAA) includes an alpha channel for transparency.

RGB — Direct Numeric Control

RGB writes the three channels as decimal numbers: rgb(37, 99, 235). It is easier to read than HEX for someone not comfortable with hexadecimal.

rgba(37, 99, 235, 0.5) adds an alpha value (0.0 = transparent, 1.0 = opaque) for semi-transparency.

RGB is useful when generating colors programmatically since the channel values are direct integers.

HSL — Designed for Human Intuition

HSL stands for Hue, Saturation, and Lightness. Hue is a degree on the color wheel (0° = red, 120° = green, 240° = blue). Saturation is how vivid the color is (0% = grey, 100% = full color). Lightness is brightness (0% = black, 50% = normal, 100% = white).

HSL is more intuitive for design work. To create a hover state, decrease lightness by 10%. To desaturate a color, lower saturation. These adjustments are obvious in HSL but not in HEX.

OKLCH — The Modern Successor

OKLCH is a perceptually uniform color space supported in modern CSS. "Perceptually uniform" means that equal numerical changes in lightness produce equal perceived brightness changes across all hues — something HSL does not guarantee.

For design systems and accessible color scales, OKLCH gives more predictable results than HSL. It is supported in CSS Color Module 4.

Example

Same color, four formats

Electric Blue: #2563EB = rgb(37, 99, 235) = hsl(221, 83%, 53%) = oklch(56%, 0.23, 264°). All four values describe exactly the same color.

Try the tools

Color Converter — HEX, RGB, HSL & OKLCHColor Palette Generator

Frequently asked questions

Which format should I use in CSS?

HEX is most common for static colors. HSL is better when you need to derive related colors (lighter, darker, more saturated). OKLCH is the modern choice for design systems. All are valid CSS.

Can I use transparency with HEX?

Yes. 8-digit HEX (#RRGGBBAA) includes an alpha value. For example, #2563EBCC sets 80% opacity (CC hex = 204 decimal = 204/255 ≈ 80%).

← All guides