Color Picker

About Color Picker

The Color Picker gives you a color three ways: build one with RGB or HSL sliders on the Color Wheel tab, click a pixel in an uploaded picture on From Image, or sample a live video frame on From Camera. It reports the result as HEX, rgb() and hsl() values you can paste straight into CSS or a design file.

How to use it

1. Choose a tab: Color Wheel, From Image or From Camera.
2. On Color Wheel, drag the Red, Green and Blue sliders or the Hue, Saturation and Lightness sliders.
3. On From Image, press Upload Image and click anywhere on the picture to sample that pixel.
4. On From Camera, press Start Camera, allow access when the browser asks, and click the video to sample.
5. Read the HEX, RGB and HSL values beside the large swatch, or type a six-digit hex code into the HEX box.

One color in three notations

#1E90FF

rgb(30, 144, 255) and hsl(210, 100%, 56%)

When to use it

• Matching a brand color from a logo image to a hex code for a stylesheet.
• Sampling the exact shade of a wall or fabric in a photo when picking paint or thread.
• Converting a hex code from a design file to HSL so you can adjust its lightness.
• Checking a color on a physical object by holding it up to a webcam.

Questions about Color Picker

Why did typing a short hex code give me black?

The HEX box accepts three-digit input but the conversion only reads six digits, so shorthand such as f00 is not expanded and resolves to black. Type the full form, for example ff0000.

Is the sampled color exactly the one in my file?

Nearly. Images wider than 600 or taller than 400 pixels are scaled down on the canvas before you click, so a sampled pixel can be a blend of neighbors. Edges and gradients may vary by a few values.

Does the camera feed leave my device?

No. The video stream is drawn to a canvas on your screen and never recorded or sent, and pressing Stop Camera releases the camera. The browser will still ask for permission first.

Which formats can I upload?

Any file the browser recognizes as an image works, including PNG, JPEG, WebP and GIF. The picture is read locally and drawn to a canvas for sampling.

Related tools

• Color Palette ExtractorExtract dominant colors from any image. Returns HEX, RGB codes with visual swatches.
• PNG to JPGEasily convert PNG images to JPG with this easy-to-use converter.
• PNG to BMPEasily convert PNG images to BMP with this easy-to-use converter.
• PNG to ICOEasily convert PNG images to ICO with this easy-to-use converter.
• PNG to GIFEasily convert PNG images to GIF with this easy-to-use converter.
• PNG to WEBPEasily convert PNG images to WEBP with this easy-to-use converter.