How to Find the Hex Code of Any Color

Whether you're building a website, designing a logo, or trying to match a brand color exactly, knowing how to find a hex color code is a fundamental skill. Hex codes give you a precise, shareable way to identify any color — no guessing, no approximation.

What Is a Hex Color Code?

A hex code (short for hexadecimal color code) is a six-character string that represents a specific color. It always starts with a # symbol, followed by six characters made up of numbers (0–9) and letters (A–F).

For example: #FF5733 is a vivid orange-red.

The six characters break into three pairs:

• First pair → Red value
• Second pair → Green value
• Third pair → Blue value

Each pair ranges from 00 (none of that color) to FF (maximum intensity). This maps directly to the RGB color model, just expressed in base-16 (hexadecimal) rather than decimal. So #FF0000 is pure red, #00FF00 is pure green, and #000000 is black.

Method 1: Use a Browser-Based Color Picker 🎨

The fastest method for most people requires nothing extra installed.

Google's built-in color picker: Type "color picker" directly into Google Search. A full interactive color tool appears at the top of results. Click anywhere on the gradient, drag the hue slider, and the hex code updates in real time. You can also manually enter RGB, HSL, or hex values to convert between formats.

Most online color tools like Coolors, Adobe Color, and ColorHexa work the same way — pick or paste a color, get the hex code instantly.

Method 2: Use a Browser DevTools Eyedropper

If you're trying to identify a color already on a webpage:

1. Open Chrome, Firefox, or Edge
2. Right-click anywhere on the page → Inspect
3. In the Styles panel, find any color value listed (often shown as a small colored square)
4. Click that square to open the browser's built-in color picker
5. Use the eyedropper tool to click any pixel on the screen

The hex code for that exact pixel will appear in the picker. This works for text colors, backgrounds, borders — anything rendered in the browser.

Method 3: Use a Desktop Color Picker App

When you need to grab a color from anywhere on your screen — not just inside a browser — a dedicated color picker app is the right tool.

Digital Color Meter on macOS (found in Applications → Utilities) lets you hover over any pixel anywhere on screen and shows RGB or hex values in real time. On Windows, PowerToys Color Picker (free from Microsoft) activates with a keyboard shortcut and captures hex, RGB, HSL, and more from any pixel.

Method 4: Use Design Software Directly

If you're working in Figma, Adobe Photoshop, Illustrator, or Sketch, hex codes are displayed natively inside every color panel.

• In Figma: Select any element → look at the Fill section in the right panel → the hex value is shown and editable
• In Photoshop: Double-click the foreground color swatch → the Color Picker dialog shows the hex code in the # field
• In Illustrator: Open the Color panel → click the fill or stroke swatch → hex is visible in the swatches or color picker dialog

Design tools also let you use the eyedropper to sample colors from anywhere within the canvas or even from imported images.

Method 5: Sample from an Image File

If you have a logo, screenshot, or photo and need its exact color:

• Photoshop/GIMP: Use the Eyedropper Tool, click the color, then check the hex value in the Color panel
• Canva: Upload your image, create a shape, use the color fill picker, and select the eyedropper to sample from the image
• CSS from an image online: Tools like ImageColorPicker.com let you upload any image and click pixels to get instant hex codes — no software needed

Converting Between Color Formats

Sometimes you have a color in RGB, HSL, or CMYK and need the hex equivalent. The conversion is straightforward:

• RGB to Hex: Each RGB channel (0–255) converts to a two-digit hex pair. RGB(255, 87, 51) = #FF5733
• HSL to Hex: Most color pickers handle this automatically — enter HSL values and read the hex output
• CMYK to Hex: CMYK is a print color model and doesn't map perfectly to hex (a screen-based format), so conversions are approximate

Google's color picker and most online tools handle all these conversions in one interface. 💡

Factors That Affect Which Method Works Best for You

The right approach depends on several variables:

• Where the color lives — on a webpage, inside a design file, in an image, or somewhere else on your screen
• Your operating system — macOS, Windows, and Linux each have different native tools available
• Your workflow — developers tend to prefer DevTools; designers tend to work within Figma or Photoshop
• Precision requirements — sampling from a compressed JPEG introduces slight color shifts; working from vector files or direct brand assets gives exact values
• Whether you need a one-off grab or a repeated workflow — a quick Google search color picker is fine for occasional use, while a dedicated app makes more sense if you're matching colors constantly

Hex codes are only as accurate as their source. Sampling from a low-resolution screenshot of a logo will give you a close approximation — not necessarily the true brand hex, which you'd find in official brand guidelines instead. How much that precision gap matters depends entirely on what you're building and how it'll be displayed.