Color Picker & Converter

Runs entirely in your browser
Color

Color Values

Color Palette

Complementary
Analogous
Triadic

Recent Colors

No colors picked yet

T
ALL TOOLS · THE CATALOG
83 single-purpose utilities · runs local
Browse all →
IMAGE

Image Tools

MEDIA

Video & Audio

DEV

Developer Tools

DOCS

Documents & Utility

MIX

More Tools

CALC

Calculators

AI

AI Tools

MONEY

Finance

All tools process files entirely in your browser · Your data never leaves your device

Color Picker & Converter — HEX, RGB, HSL

Pick any color with your screen's native color swatch or the Eyedropper tool (Chrome/Edge), or type in HEX, RGB, or HSL directly. See matching complementary, analogous, and triadic color harmonies instantly, with your recent picks saved for later.

How to pick and convert colors in your browser

  1. Pick a color. Use the native color swatch, type a HEX/RGB/HSL value directly, or click Eyedropper (Chrome/Edge) to sample any pixel on your screen.
  2. Read the converted values. HEX, RGB, and HSL update together automatically — edit any one and the others sync instantly.
  3. Copy in any format. One-click copy button next to each format (#ff7a00, rgb(255, 122, 0), or hsl(...)).
  4. Explore color harmonies. See auto-generated complementary, analogous, and triadic swatches based on your current color — click any swatch to switch to it.

Use Cases

Sample an on-screen color with the Eyedropper and get instant complementary/triadic matches
Pick a brand's accent color directly off any open webpage or app with the Eyedropper
Match a CSS color to a specific pixel in a design mockup
Sample colors from a screenshot to rebuild a UI theme
Build a quick color harmony (complementary/analogous/triadic) from one starting color

Frequently Asked Questions

Is my color data uploaded to a server?

No. Everything — color math, harmonies, and your recent-color history — runs and stays entirely in your browser.

What is the Eyedropper tool?

It's a native browser API (Chrome and Edge) that lets you sample the exact color of any pixel on your screen — not just within the page, but anywhere on your desktop.

How are the color harmonies generated?

Complementary rotates the hue 180°, analogous rotates it ±30°, and triadic splits it into three colors 120° apart — standard color-theory relationships computed from your current HSL value.

Does it save my color history?

Yes. Your last 20 picked colors are saved to browser localStorage so you can revisit them across sessions — click Clear to reset.

Does the Eyedropper work in every browser?

It requires the EyeDropper API, currently supported in Chrome and Edge. In Safari or Firefox, use the native color swatch or type values manually instead.

Can I edit R, G, B or H, S, L individually?

Yes. Each channel has its own number input — change red, green, blue, hue, saturation, or lightness independently and the other formats update live.

Related tools

More free, in-browser tools from the Developer Tools set — every one runs locally, with no sign-up and no upload.

QR ReaderDecode QR codes from an image, pasted screenshot, or live camera — free, no upload.HTML PreviewLive sandboxed HTML editor + preview with device widths — code never leaves your browser.PGP ToolGenerate keys, encrypt, decrypt, sign & verify with OpenPGP.js — keys never leave your device.DNS LookupQuery A, MX, TXT, NS + more via Cloudflare or Google DoH — with TTLs, from your browser.Speed TestDownload, upload, latency & jitter in ~20s — measured against Cloudflare, no sign-up.PDF CompressorCrush a 40 MB PDF to 4 MB. Readable, emailable.

Browse all free online tools →