What a hex code is and why designers need it

A hex code is a six-character code that describes a color in a language computers understand. It always starts with a # symbol, followed by numbers and letters — for example, #FF5733 is a shade of orange, and #000000 is black. When a designer wants to use the exact same color across a website, email, or design file, they share the hex code instead of saying "that blue" or sending a screenshot, because hex codes are precise and work the same way everywhere.

You might need a hex code when you want to match a color from a logo, a competitor's website, or an image you like. Instead of guessing or trying to describe it, you can extract the exact code and use it in your own design work or give it to a designer so they build what you have in mind.

Key Takeaways

  • The simplest way to find a hex code is to use your browser's built-in color picker tool, which works on any color visible on your screen.
  • On Windows, the Snipping Tool has a color picker; on Mac, use the system color picker in the Digital Color Meter app or browser extensions.
  • If you have an image file saved on your computer, open it in any image editor — even free ones like GIMP or Photoshop's free trial — and use the eyedropper tool.
  • Online color picker tools let you upload an image and click the color you want, then copy the hex code directly.
  • Once you have the hex code, paste it into your design tool's color field, and the color will match exactly.

Using your browser's color picker on any website

The fastest way to grab a hex code from something you see on the web is to use your browser's built-in developer tools. Open the website in Chrome, Firefox, Safari, or Edge, then right-click on the color you want to match and select "Inspect" or "Inspect Element." A panel will open at the bottom or side of your screen showing the code behind that page.

Look for a small colored square in the code panel — it usually appears next to the word "color" or "background-color." Click that square, and a color picker window will pop up. The hex code is displayed in a field labeled "Hex" or "#" at the bottom of the picker. Highlight the code, copy it, and paste it wherever you need it. This method works on any website and takes about ten seconds once you know where to look.

Extracting hex codes from images on your computer

If you have an image file saved locally — a screenshot, a photo, a logo — you can find the hex code of any color in it by opening the file in an image editor. If you do not have design software installed, GIMP is free and works on Windows, Mac, and Linux. Photoshop's free trial also works if you want to test it first.

Open your image in the editor, then look for the eyedropper tool or color picker tool in the toolbar — it usually looks like a dropper or pipette icon. Click the tool, then click the color in your image that you want to match. The color will load into your foreground color swatch. Double-click that swatch to open the color dialog, and the hex code will be displayed in a field. Copy it and use it in your design work.

If you do not want to install software, you can upload the image to an online color picker tool instead. Websites like Imagecolorpicker.com or Coolors.co let you upload a file, click the color you want, and the hex code appears when ready. No account or read needed.

Finding hex codes from colors in the real world

If you want to match a color from a physical object — a paint chip, a printed design, a piece of fabric — you need to photograph it first. Take a clear photo in good lighting with your phone or camera, save it to your computer, then use the image method above. The accuracy depends on your camera and lighting, so if the match needs to be exact, take the photo in natural daylight and avoid shadows or glare.

Some designers use specialized hardware color pickers for this, but they are expensive and unnecessary for most web and graphic work. A phone photo and an online color picker tool will get you 95 percent of the way there.

Using browser extensions for one-click color picking

If you find yourself grabbing hex codes often, a browser extension saves time. Extensions like ColorPick Eyedropper (Chrome and Firefox) or Pastel (Safari) add a color picker button to your browser toolbar. Click the button, then click any color on any website, and the hex code copies to your clipboard automatically. No right-clicking, no inspecting code, no dialog boxes — just click and paste.

Install the extension from your browser's app store, then look for the new icon in your toolbar. The first time you use it, the extension may ask permission to access the page you are viewing. Grant it, and you are ready to go. Most of these extensions are free and do not track your activity.

Pasting hex codes into your design tool

Once you have the hex code, you need to put it into whatever you are designing in. In most design tools — Figma, Canva, Adobe Creative Suite, even Google Slides — you can click on a color field and paste the hex code directly. Look for a color picker or color swatch in your tool's interface, click it, and you will see a field that accepts hex input. Paste the code (with or without the # symbol, depending on the tool), and the color will load when ready.

If the tool does not have a hex input field, look for a text field labeled "Hex," "HTML," or "Web Color." Paste the code there. If you still cannot find it, check the tool's help documentation for "hex color input" — the location varies by software, but every design tool accepts hex codes in some form.

Frequently Asked Questions

Can I find a hex code from a color in a video or moving image?

Not directly from the video itself, but you can take a screenshot of the frame you want, save it as an image file, then use the image picker method. Most devices let you screenshot with a keyboard shortcut (Print Screen on Windows, Command-Shift-3 on Mac), and then you can open that screenshot in an image editor or online picker.

Why does the hex code I copied not match the color on my screen?

The most common reason is monitor calibration — your screen may display colors slightly differently than another screen. The hex code itself is correct; the difference is in how your monitor renders it. If the match needs to be exact, check your monitor's color settings or use a calibration tool. For most web and graphic work, the hex code will match closely enough across devices.

Is there a difference between hex codes and RGB codes?

They describe the same color in different formats. Hex codes use letters and numbers (#FF5733), while RGB codes use three numbers separated by commas (255, 87, 51). Most design tools accept both. If you have an RGB code and need hex, or vice versa, online converters like RapidTables.com will convert between them when ready.

What if the color picker is not working in my browser?

Try right-clicking on the color again and selecting "Inspect Element" instead of just "Inspect." If that does not work, try a different browser — the inspect tool works in all modern browsers, but the interface varies slightly. If you are on an older version of your browser, update it and try again.