Color Picker

Visual Color Selection for Everyone

Whether you're a web developer implementing a design system, a graphic designer building brand guidelines, a painter matching reference colors, an interior designer choosing room palettes, or a photographer color-grading images - our Color Picker gives you total control over color selection with an intuitive visual interface.

Click anywhere on the saturation-brightness canvas to find the exact shade you need, use the screen eyedropper to pick colors from anything on your display, or upload an image (including SVG files) to extract its color palette. Fine-tune with HSL sliders, check accessibility with WCAG contrast ratios, and simulate how colors appear to color-blind users.

HSL, HSB, RGB & CMYK Color Picker in One

This is more than a HEX picker — it reads and displays every common colour model at once, so it works as an HSL color picker, an HSB / HSV color picker, an RGB color picker, and a CMYK color picker. Pick a colour on the canvas or with the screen eyedropper and you instantly see its HEX, RGB, HSL, HSB/HSV, and CMYK values side by side, each with one-click copy.

That makes it useful whatever you are working in: use the RGB and HEX values for web and CSS, the HSL or HSB values to fine-tune hue, saturation, and lightness, and the CMYK values when preparing artwork for print. The HSL sliders let you nudge a colour precisely without leaving the picker.

A Free HEX, RGB & HTML Color Picker

Whatever you code in, this tool has the format you need. As a hex color picker it gives you the six-digit HEX code for any colour; as an RGB color picker it shows the red, green, and blue values; and as an HTML color picker and hexadecimal color picker it outputs exactly what you paste into your stylesheet. Pick a colour on the canvas and copy HEX, RGB, HSL, HSV, or CMYK with a single click.

It also works as a color picker from screen — use the built-in eyedropper to grab the colour of any pixel anywhere on your display, with no browser extension to install. Want a starting point instead? The tool doubles as a random color picker: generate a colour and fine-tune it with the sliders. It is a fast, free Google color picker alternative that runs entirely in your browser, with nothing uploaded.

What Is an Online Color Picker?

An online color picker is a browser tool that lets you choose a colour and instantly get its code. Instead of memorising HEX values or converting numbers by hand, you pick a colour visually — on a colour canvas, with a screen eyedropper, or from a list of named colours — and the tool gives you the exact HEX, RGB, HSL, HSV, and CMYK values, ready to copy into your design or code.

It answers the everyday question "what is the code for this colour?" in one click. Whether you searched for a hex color picker to grab a six-digit web colour, an RGB color picker for screen work, or simply a way to pick a color and use it, this tool covers every format at once. There is nothing to install and no signup — it runs entirely in your browser, so it is fast, free, and private.

The Screen Eyedropper: Pick a Color from Anywhere

One of the most powerful features here is the built-in screen eyedropper. Instead of guessing a colour, you can sample the exact colour of any pixel anywhere on your display — a button in another app, a colour in a PDF, an element on a web page, or a frame of a video. This is what people mean when they search for a color picker from screen: point, click, and the HEX and RGB values are yours.

The eyedropper uses the browser's native EyeDropper API, so it works in Chrome, Edge, and other Chromium browsers with no extension to install. Click the eyedropper button, move the magnified cursor over the colour you want, and click once to capture it. Because it is built into the browser, it is faster and more private than a downloadable colour-picker app — nothing is uploaded and there is no software to keep updated. It is perfect for matching colours across tools: grab a brand colour from a slide deck, copy the exact blue from another site, or pull a shade from a design mockup.

CSS Named Colors and Web-Safe Colors

Beyond HEX and RGB, HTML and CSS support 148 named colors — readable keywords like tomato, rebeccapurple, slategray, and cornflowerblue — that you can drop straight into your code. This color picker includes a browsable list of all of them, so you can find the exact named colour you want and copy its HEX equivalent, or discover the name of a colour you have already picked.

Named colours are handy for quick prototyping and readable stylesheets, while HEX and RGB give you the full sixteen-million-colour range for precise brand work. The picker shows every format side by side, so you are never locked into one. It also helps with the older idea of "web-safe" colours — the 216-colour palette that once rendered identically across all displays. Modern screens make that largely unnecessary, but the picker still lets you land on clean, rounded values whenever you want them.

Using a Color Picker in Web Design & Development

For designers and front-end developers, a good color picker is a daily tool. When you build a website, you constantly need to turn a colour from a mockup into code, tweak a shade to match a brand guideline, or find a lighter tint of your primary colour for a hover state. This picker gives you HEX, RGB, and HSL together and copies developer-ready snippets — CSS custom properties, Tailwind classes, SCSS variables, and RGBA — so the colour goes straight from the canvas into your codebase.

The HSL sliders are especially useful in development: because HSL separates hue from lightness, you can generate a whole scale of tints and shades from one base colour just by adjusting the lightness — exactly how modern design systems build their colour ramps. Pair that with the built-in WCAG contrast check and you can confirm your text stays readable on every background as you design. Whether you are theming a component library, matching a client's brand, or just picking a nicer blue, an online color picker that speaks every format saves you converting values by hand.

Color Picker for Accessibility & Color Blindness

Choosing a colour is not only about how it looks to you — it is about how it looks to everyone. This color picker has two accessibility features built in. The WCAG contrast checker tells you whether the colour you have picked has enough contrast against a background to be readable, showing whether it passes AA and AAA for normal and large text. Low-contrast text is one of the most common accessibility failures on the web, and checking it as you pick stops the problem before it ships.

The tool also includes a color blindness simulator. Around one in twelve men and one in two hundred women have some form of colour-vision deficiency, so a red-green combination that looks fine to you may be indistinguishable to them. The simulator shows how your chosen colour appears under protanopia, deuteranopia, tritanopia, and achromatopsia, so you can make sure your interface communicates through more than colour alone.

Color Picker vs a Chrome Extension or Google's Picker

Search for a colour tool and you will find plenty of Chrome extensions and the little Google color picker that appears when you search "color picker". Each has its place, but a full online color picker offers more. Compared with a browser extension, this tool needs nothing installed and no permission to read your pages — you just open it and pick. That makes it safer and instantly available on any computer, including work machines where you cannot install extensions.

Compared with Google's built-in picker, which is handy for a quick HEX code, this tool adds the screen eyedropper, CSS named colours, developer export formats, accessibility checks, colour-blindness simulation, and a saveable colour library. It is a fast, free Google color picker alternative for when you need to do more than copy a single value — and because everything runs in your browser, it is just as private as a native app.

Who Uses an Online Color Picker?

A color picker is a tool almost everyone who works with visuals reaches for. Web designers and developers turn mockups into code and build accessible colour systems. Graphic designers and illustrators sample and match colours across artwork. Digital marketers keep social posts and ads on-brand by copying exact brand colours. Interior designers pull shades from inspiration and paint charts. Teachers and students learn colour theory hands-on, and hobbyists — from crafters to game modders — grab the precise colours they need.

Whatever you do, the workflow is the same: pick a colour visually or with the eyedropper, read it in HEX, RGB, HSL, HSV, or CMYK, and copy it wherever you need it. To pull a full palette out of a photo, logo, or website instead, switch to our Image Color Picker — this tool focuses on picking and matching single colours precisely, while the image picker specialises in extracting colours from pictures.

Key Features