How to Find Hex Codes for Colors on Any Website

If you are building a presentation deck, designing a flyer in Canva, or coding a basic portfolio site, choosing a color palette is the hardest part. The best designers in the world rarely invent colors from scratch; they find a massive, successful brand site (like Stripe or Apple) and "borrow" their exact color combinations.

But when you want to use the exact color of the Spotify logo, you can't just select "Green" from a dropdown menu. You need the exact 6-digit mathematical identifier for that precise shade of green: The Hex Code (which, for Spotify, is #1DB954).

In this guide, we'll show you exactly how to find a color hex code on any website in less than ten seconds.

What is a Hex Code?

In digital design, computers don't understand names like "Navy Blue" or "Mint Green." Computers understand mathematical light values.

A Hexadecimal code (Hex code) is a six-symbol code made of up numbers (0-9) and letters (A-F). It defines exactly how much Red, Green, and Blue light a computer monitor must mix together to create a specific color.

• #000000 means zero light, which creates pure black.
• #FFFFFF means maximum light, which creates pure white.
• #0A192F creates a deep, professional navy blue.

When you have the Hex code, you guarantee that your design will look absolutely identical, pixel for pixel, on every single device.

Method 1: Inspect Element (No Downloads Required)

If you just want to find the hex code for the background color or a button on a website, the fastest method requires no software at all. You can use the Developer Tools built directly into Google Chrome, Edge, or Safari.

1. Find the color you want on the website (e.g., a bright purple "Sign Up" button).
2. Right-click directly on the colored button.
3. Select "Inspect" at the very bottom of the menu.
4. A massive coding panel will slide open on the right side of the screen. Look at the bottom half of that panel, specifically looking for a tab called "Styles."
5. In the Styles panel, you will see CSS code that says `background-color: #7b2cbf;`. There will usually be a tiny colored square next to the hex code.

Simply copy those 6 digits! You now possess the exact color used in the site's source code.

Method 2: Eyedropper Extensions (Best for Images)

The "Inspect Element" trick works flawlessly for buttons and website backgrounds, but it completely fails if you are trying to find a color inside a photograph or a flat logo image.

If you want to pull a color out of a JPEG image, you need an Eyedropper tool. Simply open the Chrome Web Store and download the free, famous extension called ColorZilla.

1. Click the small Eyedropper icon in your browser toolbar.
2. Your mouse cursor will turn into a crosshair.
3. Hover over any pixel on the entire screen—inside an image, over a logo, or on a video thumbnail.
4. Click your mouse. The extension will instantly copy the exact Hex code to your computer's clipboard.

Method 3: Built-In Mac & PC Tools

If you prefer not to install browser extensions, both major operating systems have built-in utilities.

On macOS: Use Digital Color Meter

Apple hides a brilliant tool specifically for designers. Press `Command + Spacebar` to open Spotlight Search, and type Digital Color Meter.

This opens a tiny sniper-scope window. As you move your mouse anywhere on your screen (even outside the web browser), it gives you real-time color values. Press `Shift + Command + C` to instantly copy the value of wherever you are pointing.

On Windows: Use Microsoft PowerToys

Windows has a similar, but far more powerful feature. You have to install Microsoft PowerToys (a free official app from the Microsoft Store). Once installed, press `Win + Shift + C`. This instantly pauses your entire screen and opens an eyedropper tool. Click anywhere, and it copies the Hex code immediately.

How to Convert Hex to RGB

Once you grab the beautiful Hex Code off the internet, you might run into a problem. If you are building a website, Hex codes (#FF5733) are perfect. But if you open Photoshop, Word, or graphic design software, the program might ask you for an RGB Code (Red, Green, Blue format: `255, 87, 51`).

They are exactly the same color, just written in a different language format. You don't need to try and do the math yourself. Simply plug your copied code into our free Hex to RGB Calculator to translate it instantly.

🎨 Convert Hex Codes to RGB Instantly →

If the reverse is true—someone gave you an RGB value and you need to put it into a CSS website file—you can use our RGB to Hex Converter to generate the 6-digit hashtag code.

Conclusion

You never have to guess at colors again. By mastering the right-click "Inspect" tool on modern web browsers or using powerful eyedropper extensions, you can reverse-engineer the absolute best color palettes on the entire internet and apply them directly to your own projects in seconds.