Maybe you’re browsing the web and you come across exactly the color you’ve been searching for to use in your latest design project. Or you find an image that has the perfect palette. How can you figure out exactly what that color is so you can reproduce it to your heart’s content? That’s where a color picker comes in.

Color pickers allow you to choose a color and get the unique codes for that color. Color codes are a way to universally communicate the exact color you’re referring to and also work within computer code to signify colors. 

The most common formats are HTML color code (or hex codes), and RGB color codes (which share the red, blue, and green values)—but you’ll see many others out there, too.

vivid violet
Source: CoolorsThe difference between hex and RGB color codes.

Read on to check out some of our favorite color pickers and learn how they work so you can snag the right shades for your next project.

How Do I Pick a Color From an Image or Screen?

There are two ways color picker tools work to help you select colors from an image or screen: an eyedropper tool that lets you select a specific pixel from your screen, or an image uploader that pinpoints different colors in the image.

pink and blue swirls
Source: UnsplashEyedropper vs color picker from image. 

How Do I Choose a Color for My Website or App?

Once you find the color you want to use, check with your website host or developer about what format they need the color in, and make sure the color picker you’re using will provide that. 

If you’re not sure what color you want at all, you may need a color palette picker—and there are plenty of options out there to help you!

Pick Your Perfect Color Palette!

Building Awesome Color Schemes for Web & UI Design Projects

7 Free Color Picker Tools

Whether you need a web color picker or something that works on your operating system, an RGB color picker or hex color picker, or anything else, we’ve got great options for identifying exactly the hue you’re looking for. 

1. Google Color Picker

teal color codes
Source: Google Color PickerGoogle Color Picker

If you don’t want to download any new tools to get your HTML color codes, we’ve got good news—the Google search bar has a web color picker built into it. To use it, simply Google “color picker” and it will show up at the top of your search page. Click around the spectrum to explore colors, and then you can easily grab the hex, RBG, CMYK, HSV, or HSL values for a specific shade. You can also search any hex code to see what that color looks like in action.

2. Coolers

pacific blue
Source: CoolorsCooler’s color picker tool

Coolers is a powerful web color picker all around, letting you select a color from the spectrum or type in a hex code and get all kinds of info about it. Not only can you snag any color code your heart desires, but you can also see different variations on that color, color harmonies, and accessibility tools like a color blindness simulator and contrast checker. Plus, Coolers has an entire library of other helpful color tools, including a color palette generator, color picker from image, and more.

3. HTML Color Codes

teal

HTML Color Codes is a web color picker made by designers, for designers. Not only does it look sleek, it’s got a slew of useful tools like a hex to RGB converter (and vice versa), a color palette picker, information on color harmonies, and the ability to easily export your entire palette in whatever format you need. 

4. Adobe Capture (iOS and Android)

iphones with purple color palettes
Source: Adobe CaptureVarious color picker tools on Adobe Capture.

Want to select colors from the real world? Adobe users can with the help of the Adobe Capture app, which has a useful color picker from image tool. Simply take a photo and you can select individual colors, create gradients based on the image, or capture all the colors and shades for a general look and feel. Best of all? You can send the colors straight into Creative Cloud to use in just about any other Adobe app. 

5. ColorSlurp (MacOS)

skillshare color slurp
Source: Color slurp ColorSlurp’s color picker tool

If you’re a Mac user and you want a color code picker that’s easy to use at any time, download ColorSlurp. This eyedropper color picker can sit in your top menu bar so it’s easy to open, or you can set a keyboard shortcut to open it. The eyedropper magnifies your screen so it’s simple to find exactly what pixel you want to select. Plus, you can adjust the color after the fact and save colors into collections for the future. 

The free version gives you access to plenty of tools—upgrade to pro for $7.99 and you’ll get access to contrast checking tools and the ability to export your color in 20+ formats.

6. PowerToys Color Picker (Windows)

light blue palette
Source: Microsoft color PickerMicrosoft PowerTool’s color picker

Windows users, don’t fret! There’s a native color code picker you can download, too! This one similarly lets you pull up an eyedropper with a keyboard shortcut, use an eyedropper and zoom feature to select a specific pixel, and adjust it before storing it on your clipboard in your preferred format. 

7. Ultimate Color Picker (Google Chrome)

ultimate color picker extension used on skillshare
Source: Ultimate Color PickerUltimate Color Picker Chrome extension

If you’re looking for a Google Chrome color picker to be within reach while you’re using the web, try the Color Picker Chrome extension. This eyedropper tool zooms in on the screen to make it easy to pick your pixel, then saves all of your previous color choices within the extension itself. Simply click the hex or RGB code to copy it to your clipboard!

Check Out More Color Selector Options!

HTML/CSS: Color Selection Made Easy!

Written By

Erin Greenawald

  • Click here to share on Twitter
  • Click here to share on Facebook
  • Click here to share on LinkedIn
  • Click here to share on Pinterest