# Inspect Website Colors: Find the Hex Code of Any Element

> Inspect website colors on any live page. Point at the element and its Colors section shows text, background and border colors. One click copies the hex code.

- Canonical: https://www.superchargebrowser.com/features/website-color-inspector/
- Extension: inspect
- Published: 2026-10-08
- Updated: 2026-10-08
- Source: SuperchargeBrowser (https://www.superchargebrowser.com)

You want to inspect website colors: the exact text color or background color of a button or heading on a live site. You do not need to guess from a screenshot. [SuperchargeInspect](/inspect/) is a website color inspector built for that job. Point at the element, and the Colors section shows its text, background and border colors. One click copies the hex code to your clipboard.

## What the Colors Section Shows

The Colors section lists the color tiles for the element you point at.

**Text.** The text color of the element, the `color` value the browser used to draw it.

**Background.** The background color of the element, the `background-color` value.

**Border.** The border color, shown only when the element actually has a border.

Each tile copies just that one value when you click it, so you can copy CSS color values one at a time and paste them into your own stylesheet. These are the computed colors of that single element, not the colors of the whole page.

## Inspect Website Colors: Hex, RGBA, and Transparent

The format of a copied color depends on how transparent the color is. Opaque colors come out as hex, the compact `#rrggbb` form you paste straight into CSS. The table shows what each place gives you for the three cases.

| Color | Click in the panel | Copy reference text | Reference PNG footer |
| --- | --- | --- | --- |
| Opaque | `#rrggbb` hex | raw `rgb()` value | hex |
| Partly transparent | raw `rgba()` value | raw `rgba()` value | 8-digit hex |
| Fully transparent | `transparent` | `rgba()` with zero alpha | `transparent` |

The Copy reference text lists the raw values the browser returned, so you can see exactly what was computed. The PNG footer renders those as hex for a clean, short reference. SuperchargeInspect does not use HSL.

## What It Reads and What It Does Not

It works with CSS color values only. A color inside a photo, or a gradient or background image, is not a CSS color value, so it will not show as a tile.

One case to know: if the background color reads as `transparent`, the color you actually see comes from an element behind it. Move to the parent with `Ctrl+Up` (`Option+Up` on macOS) and read the color there.

## Keyboard Navigation

You can drive the whole flow from the keyboard. Press `Alt+Shift+E` to start inspecting. The arrow keys move to the previous or next element. Hold `Ctrl` and press `Up` or `Down` to move to the parent or to a child. On macOS, that is `Option` instead of `Ctrl`.

Press `Enter` to lock the element you are on. Press `Esc` to go back to picking or close the panel.

## Everything Stays on Your Device

SuperchargeInspect runs locally on your device and makes no network calls. There is no account and no analytics in the background.

[Read fonts and spacing too with the CSS inspector](/features/css-inspector/).

---

Canonical URL: https://www.superchargebrowser.com/features/website-color-inspector/