About the Color Picker
A visual color picker and format converter built for designers, developers, and anyone working with color.
What it is
The Color Picker lets you pick any color visually from a spectrum and instantly see its value in HEX, RGB, and HSL — all three updating live as you move the picker or type into any field. It converts in both directions: type a HEX code and the spectrum jumps to that color; drag the picker and every text field updates immediately.
Everything runs in your browser. No color data is sent to a server or stored anywhere. Close the tab and it's gone.
Features
Visual spectrum picker
A 2D saturation/lightness canvas with a draggable thumb, plus a hue slider — the same picker UI you find in design tools and browser devtools.
Live HEX / RGB / HSL conversion
Edit any field — HEX, R, G, B, H, S, or L — and every other format updates instantly. Bidirectional, accurate, no rounding errors on round-trips.
Alpha (transparency) support
Set opacity with the alpha slider or the Alpha % field. HEX shows as #RRGGBBAA; copied RGB and HSL use rgba() and hsla() syntax when alpha is less than 100%.
One-click copy
Every format has its own Copy button. Click it and the value lands in your clipboard, ready to paste into CSS, Figma, Tailwind config, or anywhere else.
Shade & tint palette
Nine swatches from the lightest tint to the darkest shade of your color. Click any swatch to jump to it — useful for building a full color scale.
Complementary color
Shows the color directly opposite on the color wheel (hue + 180°), with its HEX code and a copy button — instantly useful for contrast and pairing decisions.
Color formats explained
HEX, RGB, and HSL are all ways to describe the exact same color — they just use different number systems. HEX is the most common in web development (#FF0000 for red), stored as a six-digit hexadecimal string. RGB splits the color into red, green, and blue channels, each from 0 to 255 — the same model your screen uses to emit light. HSL uses hue (the color's angle on the wheel, 0–360°), saturation (how vivid it is, 0–100%), and lightness (how light or dark, 0–100%), which makes it far more intuitive to adjust than RGB.
Who it's for
Web developers
Get the exact CSS color value in any format without leaving the browser — HEX for shorthand, HSL for readable variables, RGBA for overlays.
Designers
Match a brand color from its HEX code, generate a quick shade scale, or find a complementary pair for contrast work — all in one tool.
Anyone with a color
Got a color from a screenshot or spec and need its code? Type any format in and copy out whatever your tool needs. No conversions by hand.
Completely free
No sign-up, no rate limit, no premium tier. Pick and convert as many colors as you need, whenever you need them.