What is the difference between HEX and RGB?

They describe the same colour. HEX is a compact base-16 shorthand for the red, green and blue channels, while RGB writes those same three values as decimal numbers from 0 to 255.

Why do designers like HSL?

HSL separates hue, saturation and lightness, so you can nudge a colour lighter or more muted without recomputing raw channel values. That makes building consistent palettes far more intuitive.

How do I know if my text colour is readable?

Check the contrast ratio between text and background against accessibility guidelines. Aim for at least 4.5 to 1 for normal body text.

Last reviewed: 2026 · Updated for 2026

Color Picker Guide: HEX, RGB & HSL Web Colors Explained (2026)

Every colour on the web can be written several ways, and knowing which format to reach for makes design work faster and more consistent. This guide explains HEX, RGB and HSL, how alpha adds transparency, and how to pick colours and build palettes with a free online color picker.

The three formats, one colour

HEX, RGB and HSL are three notations for the same thing: how much red, green and blue light a screen mixes to make a colour.

HEX — a six-digit base-16 code like #d4af37. Compact and the default in most design files. The pairs map to red, green and blue.
RGB — the same channels as decimals, rgb(212, 175, 55), each from 0 to 255. Easy to reason about numerically.
HSL — hue (the colour on a wheel), saturation (how vivid) and lightness (how bright), like hsl(46, 65%, 52%). Best for tweaking a colour by feel.

Adding transparency with alpha

Both RGB and HSL have alpha variants — rgba() and hsla() — where a fourth value from 0 to 1 sets opacity. Modern HEX also supports an eighth digit for alpha. Transparency is essential for overlays, subtle borders and layered shadows, so knowing how to express it in each format saves a lot of trial and error.

How to pick a colour, step by step

Open the Color Picker and drag to the shade you want.
Copy the value in whichever format your stylesheet or design tool expects.
Switch formats to see the HEX, RGB and HSL equivalents of the same colour.
Feed the base colour into our Color Palette Generator to build a full scheme.

Building a palette that works

A strong palette is not a random collection of colours — it is a small, deliberate system. Start with one brand or accent colour, then derive supporting shades by adjusting lightness and saturation in HSL. Keep a dark neutral for backgrounds and a light neutral for text, and reserve one vivid accent for calls to action. Because HSL lets you hold the hue steady while changing brightness, it is the easiest way to generate tints and shades that clearly belong together. When you need smooth transitions between colours, our Gradient Generator turns two palette colours into a ready-to-use CSS gradient.

Do not forget contrast

A beautiful colour is useless if people cannot read the text on it. Accessibility guidelines recommend a contrast ratio of at least 4.5 to 1 between body text and its background. Low-contrast pairings look elegant in a mockup and fail on a phone in daylight. Check every text-and-background combination before you ship it with our Color Contrast Checker, and treat the ratio as a hard requirement, not a nice-to-have.

Frequently asked questions

Is the color picker free? Yes — no sign-up, and it runs entirely in your browser.

Which format should I store colours in? HEX is the most portable for design files; HSL is best while you are actively tuning a palette.

Can I convert between formats? Yes — the picker shows the HEX, RGB and HSL versions of any colour at once.

Related tools & guides

Color Picker →Color Palette Generator →Gradient Generator →Color Contrast Checker →Font Generator Guide →