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.
Updated
Ag
- Ink
- Amber
- Paper
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 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.
Frequently Asked Questions
How do I find the hex color of an element on a website?
Can it find the background color of an element?
What happens with transparent or semi-transparent colors?
Can it pick a color from an image?
Does it send page data anywhere?
Related Features
Show Your AI Coding Tool the Exact Element to Change
Point at the element, add a note, and copy a reference with an annotated screenshot and observed styles, then paste it into the AI coding tool you use today.
CSS Inspector for Any Element: View and Copy CSS Values
A CSS inspector that lets you view the CSS of any element on a website. Read the font, colors, spacing and box model, then copy CSS values to your clipboard.
Font Finder from Website: See the Declared Font Stack
SuperchargeInspect is a font finder from website text. It shows the declared font-family stack, size, weight and line height, and copies them with one click.