Color Picker
Pick a color and copy HEX, RGB, or HSL values.
HEX
#3B82F6
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)
Shades & tints
This converts a colour between HEX, RGB and HSL and lets you explore shades interactively, entirely in your browser. The three notations describe the same colours in different coordinate systems: HEX and RGB are two spellings of the same red-green-blue values, while HSL re-expresses them as hue, saturation and lightness — which is why HSL is far easier to work with when you need a lighter or more muted version of a colour. HEX is base-16, so #3B82F6 is simply rgb(59, 130, 246) written compactly, and the conversion between them is exact in both directions. HSL is derived arithmetic rather than a separate gamut: the same colour becomes hsl(217, 91%, 60%), and dropping the lightness to 40% gives a darker shade of precisely the same hue. Converting HEX to HSL and back can shift a value by one unit through rounding, which is invisible on screen but will show up in a diff.
About the Color Picker
Pick any color visually and grab its HEX, RGB, and HSL values in one click. Tune the hue, saturation, and lightness with precise sliders, then preview a row of matching shades and tints for your palette work.
How to use the Color Picker
- 01Drag the color spectrum or use the sliders to dial in a color.
- 02Read the HEX, RGB, and HSL values updating live below.
- 03Click any value's Copy button to send it to your clipboard.
- 04Use the shades and tints row to find palette-friendly variations.
Why use our Color Picker
- 01
Three formats
HEX, RGB, and HSL displayed side by side — copy whichever your design tool prefers.
- 02
Live shades & tints
See darker shades and lighter tints of your color instantly, ready to pick.
- 03
Precise sliders
Adjust hue, saturation, and lightness independently for fine-grained control.
- 04
Browser-only
Runs entirely on your device — no account, no tracking, no uploads.
What is the difference between HEX, RGB and HSL?
HEX and RGB specify a colour by how much red, green and blue light to mix. That is how displays work, but it is not how people think about colour, and it makes ordinary design tasks awkward. To make #3B82F6 twenty percent lighter in RGB you would have to adjust three numbers in a non-obvious ratio, and adjusting them naively shifts the hue as a side effect. HSL separates the three properties people actually reason about: hue is the position on the colour wheel from 0 to 360 degrees, saturation is how vivid the colour is from grey to full intensity, and lightness runs from black through the pure colour to white. Making something lighter means changing one number. Building a set of tints and shades from a base colour means holding hue and saturation fixed and stepping lightness — which is precisely how design-system colour ramps are constructed, and why CSS custom properties in modern codebases are so often written in HSL.
Contrast, accessibility and the number that matters
Whether text is readable on a background is not a matter of taste, and it is not well predicted by how different two colours look side by side. The measure that matters is contrast ratio, defined in the Web Content Accessibility Guidelines as a relationship between the relative luminance of two colours, running from 1:1 for identical colours to 21:1 for black on white. WCAG level AA requires at least 4.5:1 for normal body text and 3:1 for large text, defined as 18.66 pixels bold or 24 pixels regular and above. Level AAA raises those to 7:1 and 4.5:1. The counter-intuitive part is that saturation contributes almost nothing to luminance: a vivid yellow and a vivid green can look completely different and still fail badly as text on background, because their luminance is similar. Lightness difference is what carries contrast, which is another practical reason to work in HSL — the lightness channel is the one you need to move.
Building a colour scale that holds together
A usable palette is rarely a handful of colours picked independently; it is a small number of hues each expanded into a consistent ramp. The standard approach is to fix a hue, choose a saturation that suits the role — higher for accents, lower for backgrounds and surfaces — and generate steps by moving lightness in even increments, typically nine to eleven stops from near-white to near-black. Two refinements make the result look considerably better. First, nudge the hue slightly as lightness changes: dark shades usually look richer shifted a few degrees toward blue and light tints toward yellow, which compensates for the way perceived hue drifts at the extremes. Second, do not space lightness perfectly evenly, because perceived brightness is non-linear — the middle of the ramp needs slightly wider steps than the ends to look evenly distributed. Once the ramp exists, choose text and background pairs by checking contrast ratios rather than by eye.
WCAG contrast requirements
| Content | Level AA | Level AAA |
|---|---|---|
| Body text | 4.5:1 | 7:1 |
| Large text (24 px, or 18.66 px bold) | 3:1 | 4.5:1 |
| Interface components and graphics | 3:1 | Not defined |
| Incidental or decorative | No requirement | No requirement |
Contrast comes almost entirely from lightness difference — two vivid colours of similar lightness will fail.
Frequently asked questions
What is the difference between HEX, RGB and HSL?
HEX and RGB are two notations for the same red-green-blue values. HSL re-expresses that as hue, saturation and lightness, which is far easier to adjust deliberately.
Why use HSL instead of HEX?
Because changing one property becomes one number. Making a colour lighter in HSL means raising lightness; in HEX it means adjusting three values in a ratio that is easy to get wrong.
What contrast ratio do I need?
WCAG AA requires 4.5:1 for body text and 3:1 for large text. AAA requires 7:1 and 4.5:1 respectively.
Two colours look very different but fail contrast. Why?
Contrast is driven by luminance, and saturation contributes little to it. Two vivid colours of similar lightness can look distinct and still be unreadable as text.
How do I build tints and shades of a brand colour?
Hold hue and saturation fixed and step the lightness value. Nine to eleven stops from near-white to near-black gives a usable ramp.
Why do my dark shades look muddy?
Perceived hue drifts at the extremes. Nudging dark steps a few degrees toward blue and light steps toward yellow usually fixes it.
Is HSL supported in CSS?
Yes, universally. hsl() has been supported in every browser for well over a decade and is common in design-system custom properties.
Does the tool store the colours I pick?
No. Everything is computed in your browser and nothing is transmitted or saved.
What does the hue number mean?
It is a position on the colour wheel in degrees: 0 is red, 120 is green, 240 is blue, and 360 returns to red.
Last updated
Contrast thresholds from the W3C Web Content Accessibility Guidelines 2.1, success criteria 1.4.3 and 1.4.6. Colour notation behaviour follows the CSS Color Module.