Animated Gradient Generator
Build a moving gradient background with the keyframes included.
Color Picker
Pick any colour and copy it as HEX, RGB, HSL or CSS.
All formats
Contrast
Tints and shades
Click any swatch to make it the active colour.
Quick Tool Overview
The Color Picker lets you choose a colour visually or type a value in any common notation, then gives you every other format at once — HEX, RGB, RGBA, HSL and HSLA — along with a tint and shade ramp and a WCAG contrast check.
- What it does
- Picks a colour and converts it to every CSS format
- You give it
- A colour from the picker or a value in any notation
- You get back
- Five formats, a tint and shade ramp and contrast scores
- Best for
- Design systems, CSS work and accessibility checks
About the Color Picker
Choose a colour with the picker or type a value in any common notation, and every other format is produced at once: HEX, RGB, RGBA, HSL and HSLA, each with its own copy button.
Below the value the tool builds a full tint and shade ramp from your colour, which is the quickest way to derive hover states and borders that belong to the same family. A contrast panel shows how black and white text score against your colour under the WCAG contrast formula, so you can tell at a glance whether it is usable as a background for readable text.
Key features of the Color Picker
Every format at once
HEX, RGB, RGBA, HSL and HSLA are produced together, each with its own copy button.
Tint and shade ramp
A full ramp is built from your colour, which is the quickest way to derive hover states and borders that belong to the same family.
WCAG contrast panel
Black and white text are scored against your colour under the official contrast formula, so you know instantly whether it works as a background.
Accepts any input notation
Type HEX, RGB or HSL and the picker recognises it rather than forcing one format on you.
Copy in one click
Each value copies on its own, so you never have to select text by hand.
How to use the Color Picker
-
1
Choose a colour
Use the picker, or paste an existing HEX, RGB or HSL value.
-
2
Copy the format you need
Every notation is listed with its own copy button.
-
3
Take a tint or shade
Click any swatch in the ramp to make it the active colour and read its values.
Frequently asked questions
They describe the same colour. HEX writes the red, green and blue channels as hexadecimal pairs, while RGB writes them as decimal numbers from 0 to 255. Use whichever your codebase prefers.
HSL separates hue, saturation and lightness, which makes it far easier to reason about. Producing a lighter variant means changing one number rather than recalculating three.
WCAG AA requires 4.5:1 for normal body text and 3:1 for large text. AAA raises those to 7:1 and 4.5:1 respectively.
Reviews of the Color Picker
What people who use the Color Picker think of it. Reviews come from visitors and are posted as written.
No ratings yet
Yours would be the first.
- 5 0 reviews rated 5 stars
- 4 0 reviews rated 4 stars
- 3 0 reviews rated 3 stars
- 2 0 reviews rated 2 stars
- 1 0 reviews rated 1 star
0 reviews
Newest first
No reviews yet
Be the first to rate the Color Picker. It takes half a minute and no account.
Write the first reviewMore color tools
Color Wheel
An interactive colour wheel with every classical harmony.
Color Temperature Converter
Convert colour temperature in kelvin to an RGB colour.
HEX to RGB Converter
Convert HEX colour codes to RGB and HSL, and back again.
Material Design Palette Generator
Generate a Material palette, primary through A700.
Duotone Color Generator
Build a duotone pair and get the CSS to apply it.
Conic Gradient Generator
Build conic gradients — pie charts, colour wheels and sweeps.
HEX to Color Name
Find the closest named colour to any HEX code.