Color Converter

HEX vs RGB vs HSL vs HSV: when to use which

HEX (#5274FF) is the most compact format and the default in design tools, CSS, and brand specs. It's just RGB written in base-16 — three pairs of hex digits for red, green, and blue. Use it whenever a colour needs to live in a stylesheet, a token file, or a Slack message.

RGB (rgb(82, 116, 255)) is the same information in decimal. Use it when you need rgba(...) with an alpha channel inline, when interpolating between colours mathematically, or when working with image data — every pixel on screen is ultimately a triple of red, green, and blue.

HSL (hsl(228, 100%, 66%)) describes colour the way humans think about it: pick a hue on the colour wheel (0–360°), then dial saturation and lightness. To make any colour 10% darker, lower the L. To make a hover state, nudge L by 5%. Try the same with RGB and you'll be reaching for a calculator.

HSV (also called HSB) replaces lightness with value — at 100% V with 100% S you get the pure pigment; at 0% V you get black. HSV maps better to how paint and pigment behave, which is why Photoshop, Figma, and Procreate default to it. HSL is symmetric (50% L is the pure hue, 100% L is white), which tends to feel cleaner for generating UI scales.

WCAG accessibility: what 4.5:1 means and why it matters

The contrast ratio is a number between 1:1 (identical) and 21:1 (pure black on pure white). It's calculated from the relative luminance of two colours — a perceptual measure that accounts for how much green contributes more to perceived brightness than blue or red. The WCAG 2.1 thresholds are:

• 4.5:1 — minimum for normal body text (AA)
• 3:1 — minimum for large text (AA, ≥18pt or ≥14pt bold)
• 7:1 — enhanced level for normal text (AAA)
• 4.5:1 — enhanced level for large text (AAA)

Failing AA isn't a stylistic preference — it means real users with low vision, age-related macular changes, or who are reading on a glare-filled phone screen literally cannot make out the words. Most jurisdictions require AA compliance for public-sector and commercial sites. Aim for AA at minimum on every text-bearing surface; reach for AAA on critical content like errors, prices, and legal copy.

Color harmonies in design

Harmonies are mathematical relationships on the colour wheel that tend to look pleasing together. Complementary pairs (180° apart) feel high-contrast and energetic — good for call-to-action buttons against a base brand colour. Triadic palettes (three colours 120° apart) feel balanced and lively, popular in illustration and dashboard design. Analogous palettes (neighbours, ±30°) feel calm and cohesive — ideal for backgrounds and ambient UI. Split-complementary softens a complementary clash by replacing the opposite hue with its two neighbours. Tetradic (four colours, two complementary pairs) gives you a rich palette but needs careful weighting — pick one as dominant and the others as accents.

Why HSL is better for designers

The whole point of a colour model is to map how we describe colour to how a screen renders it. RGB is great for screens — it's literally how subpixels emit light — but it's terrible for humans. Quick: what's the RGB of a slightly less saturated version of #5274FF? You can't easily say. In HSL the answer is "drop S by 20%."

HSL also makes design systems trivial to scale. A typical primary-50 through primary-900 ramp is just the same hue and saturation with lightness stepping from ~95% down to ~10%. Hover and active states are 5–10% L shifts. Dark-mode variants are often a hue-stable lightness inversion. Theme tokens become a small number of variables instead of a wall of hex values.

The catch: HSL is perceptually uneven. A 10% lightness step at H=60° (yellow) doesn't feel the same as a 10% step at H=240° (blue). For perceptually uniform palettes, look at OKLCH — but for the everyday "make this 5% darker" workflow, HSL still wins.