Online Color Picker
Pick a color with a visual picker, fine-tune it, and copy the exact HEX, RGB, HSL, HSV, and CMYK codes — with a large live preview of your choice.
Tip: the “Pick from screen” eyedropper appears in Chromium-based browsers (Chrome, Edge) that support the EyeDropper API.
Quick answer
A color picker lets you choose a color visually and read its codes. Use the picker (and sliders) to land on a shade, and the tool shows the matching HEX, RGB, HSL, HSV, and CMYK values, each with a copy button. It updates a large swatch live so you can see exactly what you are selecting, all in your browser.
Formula & method
The picker reads the selected color as RGB channels and converts them to the other models with the standard formulas: HSL and HSV from the max and min channels, and CMYK from the black key value. Optional sliders adjust hue, saturation, and lightness, which are converted back to RGB so the swatch and every code stay in sync.
Examples
- Input
- Pick a blue
- Result
- #0080ff and its RGB/HSL/HSV/CMYK
- Why
- Choose a shade and copy the HEX for CSS, or any other format you need.
- Input
- Raise lightness
- Result
- A lighter version of the same hue
- Why
- Adjusting lightness keeps the hue while making the color paler, useful for building variants.
- Input
- Pick a brand red
- Result
- Its CMYK percentages
- Why
- Read the CMYK form to hand a web color to a print workflow as a starting point.
When to use this tool
- Choosing an exact color for a website, design, or document and copying its code.
- Building lighter or darker variants of a base color with the sliders.
- Reading a color in several formats at once for different tools.
Common mistakes
- Copying the HEX when your code expects an rgb() or hsl() value — copy the format your stylesheet or tool actually uses.
- Expecting the on-screen color to print identically; screen (RGB) and print (CMYK) gamuts differ.
- Forgetting that very light or very dark picks can look different against other backgrounds — check contrast for text.
Frequently asked questions
What codes does the color picker give me?
For any color you pick it shows HEX, RGB, HSL, HSV, and CMYK, each with its own copy button so you can paste the format your project needs.
Can I fine-tune the color?
Yes. Beyond the visual picker, sliders let you nudge hue, saturation, and lightness, and every code plus the preview swatch update instantly.
Does it support an eyedropper?
On browsers that support the EyeDropper API, a pick-from-screen option may be offered. Where it isn't available, use the visual picker and sliders instead.
Is the picker free and private?
Yes. It is completely free and runs entirely in your browser, so your colors are never uploaded.
What is the difference between this and the color converter?
The picker is for choosing a color visually, while the color converter is for typing an existing code and translating it. Both output the same set of formats.
How do I make a color lighter or darker?
Adjust the lightness slider, or use the Color Shades Generator to produce a full ramp of tints and shades from your base color.
Sources & references
External references open in a new tab. We are independent and not affiliated with these organizations.
- ✓ Free to use
- ✓ No sign-up required
- ✓ Runs entirely in your browser — nothing is uploaded.
- ✓ Formula and method shown above
Provided “as is” for general information only — results may be inaccurate, so verify before you rely on them. No warranty; use at your own risk.
Built and reviewed by HIFreeTools against the formula shown above and any authoritative references cited on this page. See our methodology and editorial standards.
Related tools
Embed this tool on your site
Free to embed, no sign-up. Paste this code where you want the color picker to appear: