Color Picker

What is a Color Picker?

A color picker is a program that allows you to choose a color from an image, a live web page, your computer screen, or a color spectrum, and then return the color code in one or more formats. A color picker is not a palette generator, which generates new color schemes for you, but rather a color identification and precision tool: picking up an existing color and converting it into a color your tool understands.

There are three types, and most projects will ultimately require all three at some point:

• Image color picker — upload a photo, or screenshot and click anywhere on it to get the color of that exact pixel.
• Screen/eyedropper picker — Select a colour from any part of your screen, whilst the screen is working, from websites, PDFs or open applications directly from the browser's built in EyeDropper API.
• Spectrum or wheel picker — use a full color spectrum or wheel to see and select a color, instead of sampling from a pre-existing source.

Using the Color Picker tool.

1. Choose your source. Upload an image, paste an image from the clipboard, drop in an image URL or use the on-screen eyedropper.
2. Tap on the precise location. If you need to be exact about the colors, zoom in when looking at images; if you hover over an image, the zoom factor will appear in the top left corner of the screen.
3. Read the code. The tool will display the color in HEX (#RRGGBB), RGB and typically HSL and CMYK as well.
4. Duplicate the format required. Web and app designers usually want HEX or RGB, while print designers will need CMYK.
5. Create a palette using it, if necessary. Many pickers will also recommend a few of the other main colors in the same photo, so you can be more than one value.

The whole process only takes seconds — there's really only one skill to it, which is clicking correctly.

Familiarity with Color Codes and Formats

If you don't know what to do with the code it provides, a color picker is of little use. Let's see what each format means:

• Hex (#RRGGBB) — a 6 character code made up of hex numbers for red, green and blue. The standard for web and CSS.
• RGB — the same red, green and blue values, but represented as three numbers of 0-255 each. In many design and dev tools, it can be substituted by HEX.
• HSL — hue, saturation and lightness. Easier for people to make adjustments by hand: You can change the brightness or intensity of a colour without recalculating the entire colour.
• CMYK — The four colours of printing, cyan, magenta, yellow, and black. The format for print, as it's based on ink, not light.
• OKLCH — A newer color space, growing in popularity for modern CSS, OKLCH is perceptually uniform and maintains color appearance when changing lightness or chroma.

For web-based applications, HEX or RGB will suffice for just about anything. When you give a color to a printer, always convert to CMYK first – colors do not always look the same in color on a screen as they do on paper.

Here are the most common uses of a color picker.

• Selecting a color that matches from a logo, screen or existing marketing piece to ensure new materials are consistent with the brand.
• Taking a color from another person's or reference site to learn about it (not necessarily replicate it).
• Taking colours from a photograph to use as a palette for a wider design.
• Using UI color samples from a live application or site during a development or site redesign.
• Reviewing a color's true value prior to conducting an Accessibility Contrast Test with a background.

What is the difference between Color Picker and Color Palette Generator?

These 2 tools are mixed up all the time, as they are frequently hosted on the same site.

A color picker lets you select a particular existing color and provides you with a code for it. A colour palette generator is a tool that generates a palette of multiple colours that are pleasing to the eye, typically using a colour harmony theory other than a single sample colour.

They're actually paired together; use a color picker to select a brand color, and then input that hex code into a palette generator to create coordinating colors.

Things to Watch Out For

• Not all screen renderers support screen rendering. Hex color can appear slightly differently on screen, on mobile (phones), and when printed. Always test a chosen color on the medium it will be printed on.
• When the images are compressed, so are the colors. Highly compressed JPEG images may slightly alter true colors of the pixels — choose the highest quality JPEG version of an image possible.
• Off-pixel picks are caused by anti-aliasing and gradients. When sampling from a point with a soft edge/gradient, zoom in before sampling or else you may end up with a blended color rather than the target.
• The live eyedropper is supported by different browsers. The screen-sampling EyeDropper API is not supported by all browsers so an image-upload picker is used as a fall-back option.

Frequently Asked Questions

Final Thoughts

A color picker is a solution to a recurring problem — how to convert a color that you see into one that you can use. Either you have a brand color or sample from a photo or grab a color right off a live webpage, it's always the same process: pick, read the code, copy it into your project. Use it with a palette generator when you want to create an entire color scheme for a color you've selected.