Color Picker

Choosing the right color is half the work of a good UI; communicating it precisely is the other half. A color picker that only shows HEX falls short when you need the HSL for a CSS variable, the RGB for a canvas draw call, or the CMYK for a print spec. This color picker gives you every common color space side by side so you can grab the exact format your workflow needs.

The picker itself combines a saturation-value square with a hue slider, an alpha slider, and direct input in any supported format. Click anywhere in the picker to select a color; paste a HEX like #3b82f6 into the input and the picker jumps to it; drag the hue to explore a family. The tool updates every output simultaneously, so HEX, RGB, HSL, HSV, and CMYK stay synchronized without a round-trip conversion.

Building palettes is a second use case. Save a picked color to the swatches panel, pick another, and soon you have a full palette. Export as JSON, CSS variables, Tailwind config entries, or a plain-text list. The picker remembers your last few colors during the session so you can compare easily. Combined with the palette, contrast checker, and shades generator tools, this is the core of a design system color workflow that keeps values consistent across every surface.

Colors live in different coordinate systems, and the best one depends on the task. HEX and RGB are hardware-adjacent: they describe red, green, and blue light intensity on a display. HSL and HSV are perceptual: they let you think in hue (which color), saturation (how vivid), and lightness or value (how bright). CMYK targets four-color process printing. CSS supports HEX, RGB(A), HSL(A), HWB, and modern syntax like oklch() for perceptually uniform adjustments.

Every format has rounding quirks. HEX is 8-bit per channel (256 values per primary). RGB supports 0-255 integers or modern percentages. HSL uses degrees (0-360) for hue and percentages for saturation and lightness. CMYK is ink-coverage percentages and is device dependent, which is why print workflows need ICC profiles. When converting between spaces this tool uses the standard sRGB D65 white point and produces values accurate to the nearest integer (for 8-bit formats) or two decimals (for percentages and degrees).

Alpha transparency is first-class. The picker exposes an alpha slider and outputs rgba(), hsla(), #RRGGBBAA (8-digit HEX), and modern CSS color-syntax when toggled. The 8-digit HEX is supported in every modern browser and is handy for Tailwind, CSS custom properties, and many design tools. Contrast-related metrics (luminance, WCAG ratio against white/black) can be computed on the picked color to guide accessible choices.

Native OS color pickers usually return HEX only and lack swatch management. Figma's picker is excellent but requires the file to be open. Browser DevTools color pickers work but are per-property and clunky for building palettes. Online pickers often lack alpha, CMYK, or batch export. This tool combines an interactive picker, every major color space, swatch management, and exports for every common format in one place. It also pairs naturally with the other color tools on the site for contrast, shades, and palette generation.