Is any of this sent to a server?

No. The picker, the gradient builder and the image eyedropper all run in your browser, and your history is stored in local storage on your own device.

Which formats can I copy?

HEX, RGB and RGBA, HSL, HSV, CMYK, XYZ, LAB and LCH, plus a ready-made CSS declaration for solid colours and gradients.

Why does the screen eyedropper not appear?

The screen-wide eyedropper relies on the browser EyeDropper API, which is not available everywhere. When it is missing you can still upload an image and sample from that.

How are the trending colours chosen?

They come from observed usage rather than a forecast — which colours are picked, and how often, over the course of a year.

Can I use these colours commercially?

Yes. A colour value is not something anyone owns, so anything you copy here can go straight into your work.

Pick a colour, take the code, get on with the work

A colour picker, gradient builder and image eyedropper in one page. No account, no install, no waiting — choose a shade and copy it as HEX, RGB, HSL or HSV.

Open colour page

Colour codes

HEX#0F37FF

RGBrgb(15, 55, 255)

HSLhsl(230°, 100%, 52.94%)

HSVhsv(230°, 94.12%, 100%)

CMYKcmyk(94.12%, 78.43%, 0%, 0%)

XYZxyz(19.61, 10.05, 95.5)

LABlab(37.93, 62.96, -98.45)

LCHlch(37.93, 116.86, 302.6°)

Trending colours

See all trending colours

What is inside

Eyedropper

Sample colours from an uploaded image, or from anything on screen where the browser supports it. Drop a file on the page and click a pixel to read its values.

Format conversion

Move between HEX, RGB, HSL, HSV, CMYK, XYZ, LAB and LCH instantly, and copy any of them straight into CSS or your design tool.

Gradient builder

Add and drag stops along the bar, switch between linear and radial, set the angle and opacity, then copy the finished CSS.

Colour history

Every colour and gradient you make is kept in your browser, so you can come back to it later or reuse it in another project.

Harmonies and variations

Each colour page shows tints, shades and six harmony schemes, and turns any of them into a gradient in one click.

Free and private

There is no paywall and no tracking of what you pick. Images you upload are read in the browser and never sent anywhere.

Who it is for

Designers and product teams: Sketching an interface or a brand palette, exploring combinations, and copying the exact CSS for a gradient.
Illustrators and artists: Sampling from photographs and paintings with the eyedropper, and planning smooth shading with the gradient tool.
Front-end developers: Producing consistent colour values across a project and reading them back out of an existing design.
Anyone checking accessibility: Comparing a colour across models and adjusting it until the contrast ratio clears the guideline you need.

How to use it

1
Choose a colour
Click anywhere in the saturation field to set the colour, then use the hue and alpha sliders underneath to refine it. HEX, RGB and HSV update as you go.
2
Sample from an image
Drag an image onto the page or select a file, then click the pixel you want. The codes appear immediately.
3
Build a gradient
Click the gradient bar to add a stop and drag it into place. Switch between linear and radial, then set the angle.
4
Copy and reuse
Copy the value or the full CSS declaration. Everything you pick is saved to your history automatically.

Common questions

A small tool that stays out of the way

This started as an internal utility: we wanted to grab a colour, adjust it and move on, without opening a heavy design application first. It is deliberately one page, deliberately fast, and it will stay free.

Browser extensions

Prefer to sample colours directly from the pages you visit? The Chrome and Edge extensions add an eyedropper button to your toolbar, keep their own history, and open this tool in one click.

Open Chrome Web Store Open Microsoft Edge Add-ons