What this tool does

The Color Picker turns the abstract numeric forms of a color, HEX, RGB, HSL, CMYK, into a single visual interface. You drag inside a saturation/value canvas, slide a hue strip below it, optionally adjust transparency, and the four format readouts update simultaneously. Copy any of them with one click.

Everything runs in your browser. The color you pick, the colors you copy, and your "recent" history never leave the device.

How to pick a color

1. Drag inside the canvas. Horizontal axis = saturation (gray on the left, fully saturated on the right). Vertical axis = brightness (black at the bottom, full brightness at the top). 2. Move the hue strip below it to change the canvas's tint. The canvas's right edge always shows that hue at 100% saturation/value. 3. Slide the alpha bar if you need transparency. The little checkered grid behind it makes the alpha visually obvious. 4. Or type a value directly into HEX. RGB, HSL, and CMYK fields are read-only outputs, but the RGB sliders below let you nudge channels precisely.

Sampling a color from your screen

Click Pick from screen (visible only in browsers that support EyeDropper, Chrome / Edge 95+ and the Chromium-based browsers). The cursor turns into a magnifier; click any pixel on any window and the tool fills its value. Useful for matching a brand color from a screenshot, sampling a colour from a Figma frame, or copying a screenshot's accent.

EyeDropper is a privileged API, it asks the browser for permission the first time. The picked value comes back as sRGB hex; ICC-tagged images are converted to sRGB by the browser before sampling.

The four formats

  • HEX, the most common format in CSS. #0a84ff is shorthand for rgb(10, 132, 255). The 8-character form #0a84ffcc adds an alpha byte at the end. The tool accepts 3, 4, 6, or 8 hex characters with or without the leading #.
  • RGB, direct red/green/blue triplet, each 0–255. The native form for <canvas> APIs and most image processing.
  • HSL, hue (0–360°) / saturation / lightness. Better for thinking about palette shifts: "make this a bit darker" is easier in HSL than in RGB.
  • CMYK, cyan, magenta, yellow, key (black) percentages. Print-only. Browsers approximate CMYK from RGB; for production printing use a profile-aware tool that knows your printer's color space.

Why HSV instead of HSL on the canvas?

The visual canvas works in HSV (hue / saturation / value), not HSL (hue / saturation / lightness). HSV is better for picking: top-right is "fully saturated, fully bright", the unambiguous "purest" version of the hue. In HSL, that point would be 50% lightness, which is counterintuitive in a 2D canvas. The HSL output below converts on the fly.

Tips for working palettes

  • Keep one HSL component fixed to generate a coherent palette: shift only the hue for analogous colors, only the lightness for tints/shades, only the saturation for muted/vivid pairs.
  • Use the recents grid as a temporary palette. Click any swatch to recall, then nudge from there.
  • Verify contrast when picking a foreground/background pair. A 4.5:1 contrast ratio is the WCAG AA minimum for normal text, eyeballing it is unreliable.

Privacy

The picker is entirely client-side. The "recent" colors are stored in your browser's local storage (key zk:color-picker:recents) and can be cleared from your browser settings at any time. Nothing is uploaded, logged, or persisted on any server.

Frequently asked

Is this color picker private?

Yes. Picking, conversion, and the recent-colors history all run in your browser. The recents are stored in localStorage and never sent anywhere. Clearing your browser site data removes them.

Why doesn't the eyedropper button appear in my browser?

EyeDropper is only supported in Chromium-based browsers (Chrome, Edge, Opera) version 95+ and is not available in Safari or Firefox as of this writing. The button is hidden when the API is unavailable so you don't see a dead control.

What does HEX with 8 characters mean?

The last two hex digits are alpha (transparency), 00 fully transparent, FF fully opaque. So #0a84ff80 is the system blue at 50% opacity. The 4-character shorthand #abcd expands the same way as 3-char (#aabbccdd → #aabbccdd).

Why is the CMYK number different from my print software?

Browsers compute CMYK without an ICC profile — it's a rough mathematical conversion from sRGB. Real print workflows use ICC color management to match your printer's gamut. Use this tool for ballpark CMYK, not for color-critical print output.

How do I pick a color from a screenshot or another tab?

Open the screenshot or tab, return here, click 'Pick from screen', then click the pixel you want. The browser samples the pixel under the cursor and returns its hex value (Chromium browsers only).

Why does HSL show different numbers from HSV?

They measure different things. In HSV, V is value: 100% means full brightness, regardless of saturation. In HSL, L is lightness: 100% means white, 0% means black. They share H and have different S definitions. The picker uses HSV for the canvas because it's better for visual selection; HSL is the format that ships with CSS.

Can I save a palette?

Recently-copied colors are auto-saved to a 12-slot history in your browser. Click any swatch in the Recent card to reload it. For sharable palettes, copy each HEX and paste them into a Markdown table or design tool — there's no built-in export.

What's the keyboard shortcut to copy?

Use the Copy button on each format row, or click anywhere on a format's value and use your OS's copy shortcut (Cmd/Ctrl+C). The tool doesn't have a single 'copy current color' global shortcut because four formats are visible simultaneously and you usually want a specific one.

Related tools