CSS Color Formats: HEX, RGB and HSL Explained with Conversions

CSS accepts the same color in three syntaxes — and picking deliberately makes stylesheets easier to theme, audit and compress. Here is what each format is for.

HEX: compact and universal

Hex packs channels into pairs: #1e90ff is red 30, green 144, blue 255. Optional 4- and 8-digit forms carry alpha (the last byte). It stays the default for design tokens and copy-paste from design tools because every picker emits it.

RGB: explicit channels

rgb(30 144 255 / 0.5) writes channels as numbers with a separate alpha. Modern space-separated syntax replaces commas and, unlike hex, lets you reuse channel numbers freely — easier for computed tints in CSS custom properties.

HSL: human mental model

Hue, saturation, lightness map to how people actually tweak colors: rotate the hue wheel for a variant, drop lightness for a hover state. hsl(210 100% 56%) is one turn of the dial from hsl(180 100% 56%) — predictable without any picker.

Converting in your head (and for real)

• Hex pair to decimal: each digit is 16 times its place — 90 is 9 times 16 = 144.
• Decimal to hex: divide by 16, write remainder after quotient: 144 gives 9 and 0 → 90.

For real work, the Color Converter converts HEX, RGB and HSL both ways with a live swatch, contrast hint against dark and light backgrounds, and the nearest CSS named color.

Practical pairing

Theme with HSL, ship tokens as hex for tool compatibility, and keep stylesheets clean with the CSS Formatter & Minifier — it preserves color values byte-for-byte while compacting the rest, so audits and diffs stay meaningful.