Use the Chrome integrated Color Picker without Extensions

Let me tell you something: I can’t believe I never found this. Inside the Chrome Dev Tools, there is an integrated Color Picker, also called Eye Dropper, CSS Color Picker or Pipette Tool.

If you don’t know: A Color Picker is a tool, which allows you to extract HTML or CSS Hex Color Codes of specific pixels, icons or selectors on any web page and to apply them to CSS properties right away. This is especially useful, if your work includes a lot of web design related things.

Of curse there are also plenty of color selector Chrome extensions available in the Chrome Web Store, but since it is already integrated you don’t really need an extension for that. So here is, better late then never I guess, my tip for you on how you can make use of the Color Picker in Google Chrome, so you don’t have to wait 2 years (like I did o.O):

  1. Open your Developer-Tools (Dev-Tools) in Google Chrome (F12) and the Styles Tab on the lower left-hand side.
  2. Search for any element with CSS color properties and click on the colored Square in front of the Hex Code.
  3. The Chrome Color Picker appears, as soon as you move your mouse back on the website, away from the Dev-Tools.
  4. A left-click on any element on the Website will make the color property you selected change to the color you clicked on
Gif des in Chrome integrierten Color Picker (Farbwähler)

Hopefully this guide did help you to get your eyes on some cool features inside the Chrome dev tools and to drop some colors 😉

YOU MIGHT ALSO LIKE:
Preload Key Requests in WordPress (i.e. Font Preloading)

By the way, if you want to see the RGB Color instead of the HTML Color Codes, you can do that too:

Change html color codes to rgb color
Just click on the arrows next to the HTML Code to switch through the modes.

We love 💚 Feedback and fast websites, so if you have a questions left or it didn’t work for you, feel free to drop us a comment 👇

Leave a Comment

Send this to a friend