Color Picker

Eyeballing a color from a screenshot and translating it into a hex code is the kind of small task that breaks creative flow ten times a day.

This picker gives you a clean swatch surface, a real-time preview, and the value in every format you actually need: hex, RGB, HSL, and CSS-compatible RGBA. Adjust hue, saturation, and lightness independently, or paste an existing value and refine from there.

The useful trick most pickers skip is showing all four formats at once, so you don't have to bounce between converters when a designer hands you HSL and your CSS file uses hex. Contrast info is shown against white and black so you can spot accessibility problems before they ship.

The formats matter because each one solves a different problem. Hex (#3b82f6) is compact and copy-paste-friendly, which is why CSS authors default to it — but it's terrible for tweaking, because mentally adjusting two hex digits to make something 10% darker is real work. HSL (hue, saturation, lightness) maps directly to how humans think about color: 'same hue, less saturated' is one slider move. RGB is what monitors actually do, and RGBA adds the alpha channel for transparency. The picker shows all four because the friction of bouncing between converters when a designer hands you HSL and your CSS pipeline wants hex is a small drain that adds up across a workday.

The contrast check exists because accessibility regrets are silent. You ship a button with #999 text on #ccc background, it looks fine on your monitor, and weeks later someone with low vision can't read the label. WCAG 2.2 AA requires 4.5:1 contrast for normal body text and 3:1 for large text (18pt+ or 14pt+ bold). The picker calculates the ratio in real time against both white and black so you catch problems before they ship.

Where this picker can't help: color in print contexts. Screen colors live in RGB; print uses CMYK, and the gamut conversion isn't lossless. A vivid screen blue often desaturates noticeably on press. If you're working on print collateral, validate your colors in the actual deliverable medium — a Pantone book or a calibrated proof — not in a browser picker. Same caveat for video: rec.709 versus sRGB matters in some pipelines.

One nuance worth flagging: human perception of color isn't uniform across hue. A 10% lightness change in green looks different from a 10% lightness change in blue, because our eyes are most sensitive to green. If a palette feels off even though the math says it shouldn't, that's why. Tools like OKLCH and LCH model this perceptually, and the de-facto standard for serious design systems is shifting toward those — worth knowing if you're building one.