What a hex code is and why you need it

A hex code is a six-character string that tells your computer exactly which color to display. It starts with a hash symbol (#) followed by numbers and letters — for example, #FF5733 is a shade of orange, and #000000 is black. Designers use hex codes because they work the same way across every device, browser, and design tool. When you tell someone the color is "kind of reddish," they might picture something different. When you give them #E63946, everyone sees the same red.

You need hex codes when you're building a website, designing graphics in Figma or Adobe Photoshop, or matching colors across multiple files and platforms. If you see a color you want to use — on a website, in a photo, or in someone else's design — you can grab its hex code and drop it into your own work in seconds.

Key Takeaways

  • The fastest way to find a hex code is to use your browser's built-in color picker or a free online tool like Coolors or Color Picker.
  • If you have a screenshot or image file, upload it to an online color picker and click the exact pixel you want to match.
  • Most design software — Figrator, Photoshop, Figma — shows the hex code automatically when you select or create a color.
  • Browser extensions like ColorPick Eyedropper let you grab hex codes from any website without leaving your tab.
  • Once you have a hex code, paste it into any design tool's color field and it will reproduce that exact color.

Using your browser's built-in tools

Every modern browser has a color picker hidden in its developer tools. Open any webpage, right-click on the element with the color you want, and select "Inspect" or "Inspect Element." The developer panel opens at the bottom or side of your screen. Look for the color swatch — it's usually a small square of color next to a CSS property like background-color or color. Click that swatch and a color picker appears with the hex code displayed.

This method works in Chrome, Firefox, Safari, and Edge. The exact menu labels vary slightly, but the process is the same: right-click, inspect, find the color swatch, click it. You'll see the hex code in a field you can copy directly. This is the fastest route if you're already looking at a website and want to match a color from it.

Online color picker tools for images and screenshots

If you have a screenshot, a photo, or an image file saved to your computer, use a free online color picker. Go to a site like Coolors.co, Color-Hex.com, or Imagecolorpicker.com. Upload your image or screenshot, then click the exact pixel where the color you want is located. The tool displays the hex code instantly, along with RGB values and other color formats if you need them.

Imagecolorpicker is particularly useful because it shows you a zoomed-in view of where you clicked, so you can be precise. Coolors has a simpler interface and also lets you explore color palettes if you want to find complementary colors to go with your main color. None of these tools require you to create an account or pay anything.

Browser extensions for grabbing colors anywhere

If you find yourself hunting for hex codes often, install a browser extension that puts a color picker in your toolbar. ColorPick Eyedropper (available for Chrome and Firefox) and Eyedropper (Chrome) both work the same way: click the extension icon, then click any color on the page. The hex code copies to your clipboard automatically, and you can paste it straight into your design tool.

These extensions are faster than opening developer tools if you're doing this repeatedly. They also work on any webpage element — text, backgrounds, buttons, images — without needing to inspect code. The trade-off is that you're installing software, so check the reviews and permissions before you add it to your browser.

Finding hex codes in design software

If you're already working in Figma, Adobe Photoshop, Adobe Illustrator, or Canva, the hex code is visible whenever you select or create a color. In Figma, click any shape or text, then look at the right panel under "Fill" or "Stroke." You'll see a color swatch; click it to open the color picker, and the hex code appears in a field labeled "H" or in the input box at the top. In Photoshop, open the color picker (double-click the foreground color swatch), and the hex code is in the field marked "#." Copy it and paste it anywhere.

This is the most direct route if you're already designing. You don't need external tools — the software you're using already shows you the code. If you're trying to match a color from outside your design file, take a screenshot of that color, then use an online picker or extension to grab the hex code, and paste it into your software's color field.

Converting between color formats

Sometimes you'll encounter colors in other formats: RGB (like rgb(255, 87, 51)), HSL (like hsl(9, 100%, 60%)), or color names (like "crimson"). These all describe the same color, just in different ways. Most online color pickers and design tools let you switch between formats. If you need to convert manually, paste the color into a site like Convertacolor.com or Color-Hex.com, and it shows you the hex code plus every other format.

The hex code is almost always the most portable format — it works everywhere. If someone gives you an RGB value and you need a hex code, use a converter rather than trying to calculate it yourself. It takes five seconds and removes the chance of error.

Frequently Asked Questions

Can I use a hex code from one program in another?

Yes. Hex codes are universal. A color that is #FF5733 in Figma is the same #FF5733 in Photoshop, on a website, or in any other tool. Copy the code and paste it into any color field that accepts hex input. The color will be identical.

What if the hex code I copied doesn't look right when I paste it?

Check that you copied the full code including the # symbol. If the color still looks wrong, your screen brightness or color profile might be affecting how you see it. The hex code itself is correct — the issue is display, not the code. Try the color on a different device to verify.

Do I need to include the # symbol when I paste a hex code?

Most design tools and websites accept it either way — with or without the #. But including it is safer and faster. If a field rejects your code, try adding or removing the # symbol.

Can I find the hex code of a color in a video or live stream?

Not directly from the video itself. Take a screenshot of the video, save it as an image file, then upload that screenshot to an online color picker. This works for any color you can capture as a still image.

What's the difference between a hex code and an RGB value?

They describe the same color in different ways. Hex uses six characters (0-9 and A-F), while RGB uses three numbers from 0 to 255. Hex is more compact and works everywhere; RGB is more human-readable. Use whichever format your tool asks for — most tools let you switch between them.