Color Picker
Pick any color and get HEX, RGB and HSL values, or upload an image to extract its color palette. Free and in-browser.
Drop an image here
or click to choose · colors extracted in your browser
How to use the Color Picker
- 1Drag the crosshair around the spectrum canvas and move the vertical hue slider to land on the color you want, or type a known HEX value into the input to jump straight to it.
- 2Read the HEX, RGB and HSL fields, which all update live as you move, and click the copy icon next to whichever format your project uses.
- 3To pull colors from an image, switch to the Extract tab and drag a JPG, PNG or WebP file onto the drop zone (or click to browse) — it is read locally, never uploaded.
- 4Wait a moment for the generated palette of dominant swatches to appear, then hover any swatch to preview its HEX, RGB and HSL values.
- 5Click a swatch to copy its value in your chosen format, or fine-tune it by sending it back to the picker canvas.
- 6Repeat with a new color or a different image; nothing is saved between sessions, so refresh the page to start clean.
About the Color Picker
Color Picker is a browser-based tool that turns any color you choose into the three values web and design work actually needs: HEX (like #3A7BD5), RGB (58, 123, 213) and HSL (213, 62%, 53%). You interact with a spectrum canvas and a hue slider, or type a value directly, and all three formats update together in real time so you never have to convert by hand. The second half of the tool works from images: drop in a JPG, PNG, WebP or screenshot and it reads the pixel data to pull out a palette of the dominant colors, each one ready to copy in your preferred format.
Everything happens client-side. The color math and the image analysis run in your browser using the HTML canvas API, so nothing is uploaded anywhere. Your photos and brand assets stay on your machine, which also means the palette extraction is instant even for large files and works offline once the page has loaded.
The everyday uses are concrete. A front-end developer grabs the exact HEX of a button from a mockup to paste into CSS. A designer samples the sky in a client photo to build a matching background gradient. A marketer checks that a logo color matches its brand guidelines down to the RGB value. Someone building a data chart pulls five distinct swatches from a reference image instead of guessing.
A few practical tips: HSL is the format to reach for when you want to make a color lighter or more muted, because you adjust the L (lightness) and S (saturation) numbers independently rather than juggling three RGB channels. When extracting from an image, a photo with a clear subject gives a cleaner palette than a busy collage. And because HEX, RGB and HSL describe the same color, you can copy whichever one your codebase or design tool expects.
Color Picker matters because color decisions are precise decisions. Eyeballing a shade leads to inconsistent interfaces and off-brand assets. Having exact, copy-ready values in every common notation removes that guesswork, and keeping it all in the browser means it is fast, private and free to use as often as you like.
Frequently asked questions
What is the difference between HEX, RGB and HSL and which should I copy?
They describe the same color three ways. HEX (#3A7BD5) is the compact form most CSS and design tools accept. RGB lists red, green and blue channels from 0–255, handy for canvas and image code. HSL gives hue, saturation and lightness, which is the easiest to tweak by hand when you want a lighter or less saturated variant. Copy whichever your tool expects — they are interchangeable.
Are my uploaded images sent to a server?
No. The image never leaves your device. Palette extraction runs entirely in your browser through the canvas API, reading the pixel data locally. That is why it works offline after the page loads and stays fast even with large photos, and why your private or unreleased assets never touch a server.
How many colors does the image palette extractor return?
It surfaces the handful of most dominant colors in the image, typically around five to eight swatches, by sampling the pixels and grouping similar tones together. Photos with a clear subject and limited color range produce the cleanest results; very busy or gradient-heavy images may blend nearby shades into one representative swatch.
Can I enter a specific color code instead of using the picker?
Yes. Type a HEX value directly into the input and the picker jumps to it, updating the RGB and HSL fields at the same time. This is the quickest way to check what a code from a style guide or a colleague actually looks like, or to convert one format into the other two.
Does it support transparency or alpha values?
The core picker works with fully opaque colors and outputs standard HEX, RGB and HSL. For a transparent look you would add an alpha channel yourself in code — for example using rgba() with the RGB values you copied here, or an 8-digit HEX. The tool gives you the base color; the opacity you control in your own stylesheet.
Related tools
Browse all free online tools in Generators and more.
Frequently asked questions
Can I get colors from an image?+
Yes — upload an image and the tool extracts a palette with HEX codes you can copy.