What is the difference between HEX, RGB and HSL?

They are three notations for the same colours. HEX is the compact CSS form, RGB gives three 0-255 numbers and supports alpha via rgba, and HSL uses hue, saturation and lightness which makes adjusting a colour much easier.

What contrast ratio should text have?

Aim for a WCAG contrast ratio of at least 4.5 to 1 for body text and 3 to 1 for large headings. Low contrast text is the most common accessibility failure on the web.

Color Picker & Palette Generator

How to Use the Colour Picker

Choose a colour with the picker, or type a HEX code straight into the box.
Copy the HEX, RGB or HSL value in whichever format your tool needs.
Use the tints and shades row to build a consistent scale for buttons, hovers and backgrounds.
Drop in a photo to pull out its dominant colours — ideal for matching a brand or a mood board.

HEX vs RGB vs HSL

HEX (#10b981) — the compact form used in CSS and design tools. Three pairs of hex digits for red, green and blue.
RGB (rgb(16, 185, 129)) — the same information as three 0–255 numbers. Needed when you want an alpha channel via rgba().
HSL (hsl(160, 84%, 39%)) — hue, saturation and lightness. By far the easiest for adjusting a colour: keep the hue and change only lightness to get a perfect tint or shade.

All three describe exactly the same colours — they are just different notations, so you can convert freely between them without losing anything.

Understanding Colour Harmonies

Complementary — the colour opposite on the wheel. Maximum contrast, great for a call-to-action button that must stand out.
Analogous — neighbours on the wheel. Calm and cohesive; the safe choice for backgrounds and large areas.
Triadic — three colours evenly spaced. Vibrant and balanced, but let one dominate and use the other two sparingly.

Check Your Contrast

The tool shows whether black or white text is readable on your chosen colour, using the WCAG contrast formula. Aim for a ratio of 4.5:1 or higher for body text and 3:1 for large headings. Low-contrast text is the single most common accessibility failure on the web, and it also simply loses you readers on phones in daylight.

Frequently Asked Questions

Are my images uploaded when extracting a palette?

No. The photo is read and sampled entirely in your browser using the HTML canvas, so it never leaves your device.

How are the dominant colours chosen?

The image is sampled across a grid of pixels, similar shades are grouped into buckets, and the most frequently occurring groups are returned. Very dark and near-white pixels are down-weighted so you get usable colours rather than shadows and highlights.

What is the difference between a tint and a shade?

A tint is the colour mixed toward white, and a shade is the colour mixed toward black. Using a single hue with several tints and shades is the quickest way to make an interface look deliberately designed.

Can I paste a colour code in?

Yes. Type or paste any HEX value into the HEX box, with or without the leading hash, and everything else updates instantly.