Explore the blog:

2 Ways To Find A Color’s Hex Code For Your Website

Share on:

Updated April 10, 2024

Note: This post may contain affiliate links; we may earn a commission (at no additional cost to you) if you make a purchase via our links. See our disclosure for more info.

Have you ever found a graphic or website online and wanted to use the EXACT same color on your website or marketing project? There’s actually an easy way to get the hex color code to utilize the color you found out in the wild. I’ll show you how…

What is a hex code?

If you had a giant box of crayons with millions of color shades, how would you tell a computer to pick the exact shade you want? With a hex code (short for hexadecimal code). Hex codes are like a secret language that computers use to understand colors. They contain six-digit combinations of letters and numbers that tell computers exactly what color to display. These codes start with a hash symbol (#), followed by six characters, which are a mix of numbers (0-9) and letters (A). This mix represents the intensity of red, green, and blue in color, with each pair of characters representing one of these primary colors. For example, #FF0000 is the hex code for the color red.

So, next time you pick a color for a website or a digital design, remember that the hex code is the precise way of telling the computer which color to use from that massive, virtual crayon box!

Option 1. Use the ColorPick Eyedropper Tool

If you want to get the hex code for any color, you can install the Chrome Extension ColorPick Eyedropper. It’s a zoomed eyedropper and color chooser tool that allows you to select color values from web pages and more. Watch the video for details!

Option 2. Use Google Chrome’s Developer Tools

Alternatively, you can find the hex code using Google’s Developer Tools.

To use the built-in Google Chrome color picker that’s packaged as part of the browser’s suite of DevTool extensions, follow these steps:

  1. Right-click on any web page.
  2. Select the Inspect option.
  3. Navigate to the Styles tab.
  4. Find a stylesheet element that uses a color.
  5. Click the box that represents the color.
  6. Click the color picker eyedropper in the top left color dashboard.
  7. Click on different images and elements on the page.
  8. The HEX or RGB color value will be displayed.
Share on:
About the Author

Katy Boykin is a WordPress website designer, marketing strategist and CEO of DIY Dream Site. She and her team have helped hundreds of business owners launch scroll-stopping websites, rank on the first page of Google for targeted keywords, grow engaged email lists on autopilot, create digital products that sell like hotcakes, and book dream clients! Want to create these same results? Shop now or hire us.