Color Picker

A browser-based color picker that works on any device — no downloads, no sign-up. Just open and start picking.

Choose colors from a color wheel, or load an image and extract the exact color of any pixel. Supported formats include PNG, JPEG, WebP, GIF, BMP, AVIF, and SVG.

Every color you pick is shown in nine different formats — HEX, RGB, HSL, HSV, HWB, CMYK, CIE Lab, OKLab, and OKLCH — and you can copy any of them with a single tap. The closest matching color name is also displayed automatically.

The palette lets you save up to 32 colors, add custom name memos, rearrange them, and import or export palette data. Color harmony suggestions help you explore complementary, analogous, and other classic color schemes.

There are several ways to represent a color as numbers, and different tools and workflows favor different formats. Here are the most common ones.

HEX

The most familiar format on the web. A HEX code like `#FF5733` uses six hexadecimal digits after a `#` — two for red, two for green, two for blue, each ranging from 00 to FF. You'll see HEX codes in CSS, design specs, and style guides everywhere.

RGB

Stands for Red, Green, Blue — the three values (0–255) that match how screens actually produce color by mixing light. In CSS you can write `rgb(255, 87, 51)`. HEX and RGB are really the same thing in different notation, so converting between them doesn't change the color at all.

HSL

Describes color as Hue (0°–360°), Saturation (0%–100%), and Lightness (0%–100%). It's intuitive for adjustments — "make it a bit brighter" or "tone down the saturation" — because each axis maps to how we naturally think about color. CSS supports `hsl(14, 100%, 60%)` directly.

HSV

Similar to HSL, but Value replaces Lightness. Most color pickers in tools like Photoshop and Figma use HSV. The key difference: in HSL, white is at L=100%; in HSV, pure vivid colors sit at V=100%.

HWB

Hue, Whiteness, Blackness — think of it as mixing white or black paint into a pure hue. It became an official part of CSS Color Level 4, and its mental model can feel more natural than percentages of saturation and lightness.

CMYK

Cyan, Magenta, Yellow, Key (black) — the ink model used in printing. Screens mix light (RGB); printers mix ink (CMYK), which is why on-screen colors don't always match what comes off the printer. If you're preparing artwork for print, CMYK values matter.

CIE Lab

A color space modeled on human perception: L for lightness, a for green-to-red, b for blue-to-yellow. Its main strength is measuring how different two colors look — the delta-E (ΔE) metric — which makes it standard in industrial quality control and color science.

OKLab & OKLCH

An improved successor to CIE Lab with better perceptual uniformity. OKLCH uses Lightness, Chroma, and Hue in cylindrical coordinates, so it feels a lot like HSL but with more accurate gradients. CSS now supports `oklch()`, and designers are adopting it for smoother color transitions.

Pick from the Color Wheel

Drag across the wheel on the "Color Wheel" tab to choose a hue and saturation. Use the slider on the right to adjust brightness.

Extract from an Image

Switch to the "Extract from Image" tab and drop in an image or choose a file. Drag the image to move it around — the crosshair in the center picks the color of that pixel. Use the D-pad buttons to nudge 1 pixel at a time, and the magnifier to see nearby pixels up close.

Enter Values Manually

Type a HEX code into the input field, or enter RGB and HSL values directly. Handy when you want to match an exact color from another tool.

Palette

Save your favorite colors to the palette (up to 32). Add name memos to keep things organized, sort by hue or lightness, swap positions, and copy or paste palette data to share your color scheme across devices or with teammates.

All data and images are processed entirely on your device. Nothing is ever sent to a server.