Page palette
With colors sorted by how often they’re used: backgrounds, text, borders and buttons. Each one in HEX, RGB and HSL.
Color
Extract the color palette of any website
Smart Design Inspector pulls a website’s color palette sorted by usage, with an eyedropper for any pixel and the WCAG contrast of every text and background pair.
Palette, eyedropper and WCAG contrast: free forever
Colors · yourclient.example
- #FFFFFFrgb 255 255 255Background214
- #0B0B0Brgb 11 11 11Text188
- #2563EBrgb 37 99 235Buttons46
- #E5E7EBrgb 229 231 235Borders39
- #6B7280rgb 107 114 128Text27
- #16A34Argb 22 163 74Accent8
- Aa#0B0B0B / #FFFFFF19.68:1AAA
- Aa#FFFFFF / #2563EB5.17:1AA
- Aa#6B7280 / #FFFFFF4.83:1AA
- Aa#16A34A / #FFFFFF3.30:1Large text only
- Aa#9CA3AF / #FFFFFF2.54:1Fails
01
What you get
3 toolsEyedropper
To pick the color of any point, including images.
WCAG contrast
For every text against its background, with the level it meets (AA or AAA) and a warning on the ones that fall short.
The most popular eyedropper for Chrome hasn’t been updated since May 2024. This one sits alongside fonts, CSS and SEO in the same extension.
02
Try it on this page
No installA sample website and the colors panel, with nothing to install. You see its palette in HEX, RGB and HSL. Hover over any text, or pick it from the list, to see its contrast with the background and the WCAG level it meets.
Pick an element
Smart Design Inspector · Colorsh1.hero-title
- Text
- —
- Background
- —
- RGB
- —
- HSL
- —
- Contrast
- —
- Size
- —
- AA
- —
- AAA
- —
Page palette
—
Sample website · values are read from this page
03
Why contrast matters
WCAG 2.2 · AALight gray text on white can look fine on your screen and be unreadable on a phone in the sun. The WCAG guidelines require a minimum contrast of 4.5:1 for normal text (level AA). The extension flags every text that falls short.
04
Take the palette to your project
Pro · early accessWith Pro you export the colors, along with typography and spacing, to Tailwind v4 @theme, CSS variables or DESIGN_SPECS.md. Extract the design system
| Free€0forever | Pro€49one-time payment | |
|---|---|---|
| Page palette sorted by usage, in HEX, RGB and HSL | ||
| Eyedropper for any point, including images | ||
| WCAG contrast for every text and background pair | ||
| Export the palette as CSS variables or Tailwind tokens (with typography and spacing) | — | Free early access |
Is it free?
Yes. The palette, the eyedropper and WCAG contrast are free forever.
Does it get colors from images?
The palette uses the colors in the page’s CSS. To pick a color from an image, there’s the eyedropper.
Which formats does it copy colors in?
HEX, RGB and HSL. With Pro, also as CSS variables or Tailwind tokens.
What contrast level do I need?
For normal text, 4.5:1 (AA). For large text, 3:1. For AAA, 7:1 and 4.5:1.
Which browsers and operating systems does it work on?
Chrome, Edge, Brave, Arc, Opera and Vivaldi, on Windows, Mac and Linux, from version 1.0. It works the same everywhere because the browser runs the extension, not the operating system. The code is ready to be brought to Firefox and Safari without a rewrite. While it’s in development, things may change.
07
Keep exploring
Related featuresFonts
Family, weights, source, license and type scale of the whole page.
Website fonts →Design system
Colors, spacing and typography to Tailwind v4 @theme, CSS variables or DESIGN_SPECS.md.
Extract the design system →Compare websites
Save a card for each competitor and compare them in an exportable table.
Compare websites →Waitlist
Be one of the first to try it
Smart Design Inspector is in development. Leave your email and we’ll let you know the day it goes live on the Chrome Web Store, with the 3 Pro features free in early access.
One email on launch day and very few more · Unsubscribe in one click