Color Picker
Pick a color visually — saturation/value field, hue & alpha sliders, screen eyedropper, channel inputs, every format, and recent swatches.
About this ToolHow it works, benefits & use casesTap to collapse
Choose a color visually and read it back in every format you need. The picker centres on a saturation/value field you drag with a mouse or arrow keys, paired with a hue slider and an alpha slider over a checkerboard so you can dial in transparency. A live swatch shows the current color, its hex value and the nearest CSS color name. You can also set a color exactly: type or paste a hex value, nudge individual RGB or HSL channels (and alpha) with number inputs, use the native browser color box, or sample any pixel on screen with the eyedropper where the browser supports it. The selected color is output as HEX, RGB, HSL, HSV and CMYK, each a click to copy. Save colors to a local recent-swatches strip (up to twelve) and pick from a set of presets for quick starts. Because the canonical value is the color string, typed and sampled colors stay byte-exact, and the picked color is captured in a shareable URL.
How to Use
- 1Drag the marker on the saturation/value field (or use arrow keys) and move the hue slider to find a color.
- 2Use the alpha slider for transparency, or set an exact color via the Hex field, the RGB/HSL number inputs, or the native color box.
- 3Click the eyedropper (if your browser supports it) to sample any color on your screen.
- 4Copy the color in HEX, RGB, HSL, HSV or CMYK from the format rows.
- 5Click "Save" to store the color in your recent swatches, or pick a preset; copy the page URL to share the exact color.
Key Benefits
- Visual saturation/value field with keyboard control plus hue and alpha sliders
- Set colors precisely via hex text, RGB/HSL number inputs, or the native picker
- Screen eyedropper to sample any on-screen pixel (where supported)
- Outputs HEX, RGB, HSL, HSV and CMYK, each one click to copy
- Local recent-swatches strip (up to 12) and a preset palette
- Keeps typed and sampled colors byte-exact via a string-based source of truth
- Shareable URL captures the exact picked color; runs entirely in-browser
Common Use Cases
- Dialing in a brand or UI color by eye and copying it as hex or rgb()
- Setting an exact opacity with the alpha slider for overlays or shadows
- Sampling a color from a screenshot or another app with the eyedropper
- Fine-tuning an existing color by nudging its R, G, B or H, S, L channels
- Keeping a working palette of recent swatches while designing a component
RGB
HSL
Presets
Was this tool helpful?
Share Your Experience
Help others discover this tool!
Related tools
- Color Scheme GeneratorBuild colour harmonies with full 50–950 ramps, a WCAG accessibility matrix, and a live UI preview — export CSS, Tailwind, SCSS, JSON or SVG
- Color ConverterConvert between HEX, RGB, HSL, and HSV
- Color Name FinderFind the name of any color
- Contrast CheckerCheck color contrast for accessibility
- Random Color GeneratorGenerate random colors
- Gradient GeneratorCreate CSS gradients visually
You have several exact-entry options: type or paste into the Hex field, set individual RGB or HSL channel values (and alpha) with the number inputs, or use the native browser color box. The visual field, sliders and value all stay in sync as you do.
Yes. The saturation/value field is focusable and responds to the arrow keys — left/right adjust saturation and up/down adjust brightness — so you can fine-tune a color without a mouse and the swatch updates live.