Color Picker

What is a color picker?

A color picker is a visual tool for choosing a color and reading off the codes that represent it in different formats. Instead of guessing at a hex value or typing numbers into CSS until something looks right, you drag across a color field, watch the preview update live, and copy out the exact string your project needs. It is the fastest way to go from “that shade of blue” to a value a browser, a design tool, or a stylesheet can actually use.

This page works as a hex code finder in the other direction too: paste in a hex code you already have — from a screenshot, a brand guide, a competitor’s site — and the picker jumps straight to that color, showing you its RGB and HSL equivalents alongside it. Whether you are starting from a color in your head or a code on a page, the picker gets you to the other representation in one step.

How to use the color picker

1. Set the hue, then dial in saturation and brightness. Drag the hue slider below the color square to pick a base color, then click or drag inside the square to adjust how vivid and how bright it is. Use the opacity slider if you need transparency, and watch the preview swatch and checkerboard update as you go.
2. Or jump straight to a color you already have. Type or paste a hex code — 3-digit, 6-digit, or 8-digit with alpha, with or without the # — into the hex field, or click the eyedropper button (in supported browsers) to sample any pixel on your screen. Everything else on the page updates to match.
3. Copy the code you need. Click the copy button next to hex, rgb()/rgba(), or hsl()/hsla() to grab that exact string, or click a tint, shade, or the nearest named color chip to explore related colors before copying.

Where hex codes get used

Hex codes are the default color format in CSS, so most of the time a code copied from this picker is going straight into a stylesheet, a style attribute, or a component’s theme file. Design tools like Figma, Sketch, and Photoshop also accept hex directly, which makes it an easy way to match a color across a mockup and the code that ships it — pick once, paste the same hex value in both places.

Beyond screens, hex codes are how brand palettes get written down and handed off: a style guide lists the primary color as a six-character code so anyone on a team, regardless of tool, can reproduce it exactly. The same goes for documentation and spreadsheets — a hex value is compact enough to sit in a cell or a code block next to a swatch, and unambiguous enough that there is no room for “which blue did you mean”.

Honest limitations

A hex code is exact, but what you see is not: the same value renders slightly differently across monitors depending on gamut and calibration, and colors that look fine on screen are not guaranteed to survive CMYK printing. The color square also works in HSV (hue, saturation, brightness), while CSS’s hsl() uses HSL (hue, saturation, lightness) — they are different number systems describing the same colors, which is why the HSL readout will not line up one-to-one with where you clicked in the square.

The eyedropper button uses the browser’s built-in EyeDropper API, which today only exists in Chromium browsers — Chrome, Edge, Opera — and samples in sRGB; Safari and Firefox do not support it, so the button is simply absent there. The RGB and HSL numbers shown are rounded to whole numbers for readability, so converting hex to HSL and back can land one unit off from the original — the hex field itself stays lossless. And the nearest named color chip is picked by RGB distance to a set of 220 named colors, which gives you a close name, not a perceptually verified match.

Why is it free?

This color picker runs entirely in your browser — nothing you pick or paste is sent to a server. There is no account to create, no watermark on anything you copy, and no premium tier hiding features like the eyedropper or the copy buttons behind a paywall. It is free the same way every tool on this site is free: built to be useful, not to upsell you.