The Live Website Palette Engine.
PaletteLive is a free Manifest V3 browser extension that extracts, edits, and exports any live website's full color palette in real time. Scan the full DOM (including Shadow DOM), override colors live, enforce WCAG accessibility, and persist changes per domain — across reloads, SPA routes, and BFCache — without touching source code.
Add to Edge (Manifest V3) — FreeThe four power pillars
Deep color extraction
Full DOM scan including Shadow DOM, CSS variables and stylesheets parsing, pseudo-state colors (:hover, :focus), heatmap overlay with hex tooltips, and perceptual clustering (CIEDE2000) with threshold control.
Non-destructive real-time override engine
Live inline CSS patching with no source edits, mutation observer watchdog for sticky overrides, SPA route resilience and BFCache resilience, per-domain persistence across tabs, and undo/redo history.
Smart palette intelligence
6 harmony generators (mono, 60-30-10, analogous, complementary, split, triadic), harmony scoring, import and auto-apply with contrast preservation, export to JSON, CSS vars, Tailwind config, OKLCH, LAB, CMYK.
Accessibility-first
WCAG contrast checker with AA/AAA indicators, auto text contrast enforcement, vision simulation overlays for color blindness, force light/dark mode override, and accessibility diagnostics.
Before / After transformation
Full-theme remaps, contrast enforcement, and production-ready token output — all on a live website.
Who is PaletteLive for?
- UI/UX Designers — Rapid brand exploration on live sites
- Frontend Developers — Inspect and refactor real-world color systems
- Accessibility Auditors — Test contrast compliance instantly
- Design System Teams — Extract and export structured tokens
- Brand Designers — Re-skin competitor layouts for pitch decks
- QA Teams — Validate dark mode and theme consistency
Import → Map → Apply → Export
Export-ready for design systems: CSS Variables, JSON Tokens, Tailwind Config, OKLCH, CIE LAB, CMYK. Every export is tracked so you can backtrack and reproduce outputs.
Everything the others are missing
Most color tools stop at a basic picker. PaletteLive goes deeper — persistence, accessibility, exports, and live-site intelligence that no other extension offers.
| Feature | PaletteLive | Others |
|---|---|---|
| Works inside Shadow DOM — detects and overrides colors inside Web Components and Shadow roots | Yes | No |
| Survives page navigation in SPAs — overrides persist through React Router, Next.js, and Vue Router route changes | Yes | No |
| Survives browser back/forward cache — re-applies overrides after bfcache restores | Yes | No |
| Synced across all your tabs — changes in one tab immediately visible in every other tab on the same domain | Yes | No |
| Edits saved instantly — every color change committed to storage in real time, no clicking Save | Yes | No |
| Full undo and redo for every color change — step backward and forward through entire edit history | Yes | No |
| Side-by-side before and after view — toggle a split-screen overlay to compare original vs overrides | Yes | No |
| Color heatmap with hex tooltips — overlays every colored element with its hex value | Yes | Some |
| Click-to-edit color picker — click any element, pick a new color, see it applied instantly | Yes | Yes |
| 6 harmony types with quality scoring — complementary, triadic, split-complementary, and more, each scored for balance | Yes | No |
| Groups similar colors across your site — clusters near-duplicate colors to consolidate messy palettes | Yes | No |
| Reads and rewrites CSS custom properties — edit :root and scoped CSS variables (design tokens) directly | Yes | No |
| Captures :hover and :focus colors — detects colors in :hover, :focus, :active, :visited states | Yes | No |
| Import a palette and auto-map to your site — paste a Figma palette or design token file and PaletteLive maps each color to the closest live element | Yes | No |
| One-click WCAG contrast auto-fix — detects failing text contrast ratios and auto-adjusts to meet AA or AAA | Yes | No |
| Preview your site for color-blind users — simulates 8 types of color vision deficiency | Yes | No |
| Export to JSON, Tailwind, Design Tokens, OKLCH, LAB and CMYK — one-click export in every format your stack needs | Yes | No |
17 features. One extension. Add to Edge — it's free.
How to install PaletteLive on Edge
- Visit the PaletteLive listing on the Edge Add-ons store.
- Click "Get" to install — Edge downloads and installs it automatically.
- Pin PaletteLive to your toolbar, then click the icon on any website to start extracting and editing its color palette in real time.
Frequently Asked Questions
Does PaletteLive modify the website's source code?
No. Overrides are applied at runtime via inline CSS patching. Your changes live in the browser and can be persisted per domain without editing the site's codebase.
Will it slow down pages?
PaletteLive scans efficiently and re-applies overrides only when needed. The watchdog/mutation observer stays sticky without constant heavy reprocessing.
Does it work with React, Vue, Next.js, and SPAs?
Yes — persistence across SPA route changes is a core feature. Overrides survive re-renders and route transitions.
Is it safe? Does data leave my browser?
All processing is client-side. No tracking, no analytics on visited pages. Permissions are used solely for scanning and applying your own overrides.
Why not just use DevTools?
DevTools is great for debugging, but it doesn't give you a persistent per-domain override engine, palette clustering, harmony generation/scoring, WCAG auto-fix, or multi-format export workflow.
Can I export to Tailwind and design tokens?
Yes — CSS variables, JSON tokens, Tailwind config, plus OKLCH/LAB/CMYK and export history.
Get in Touch
For technical support, bug reports, feature requests, or general questions: mckesavdev+support@gmail.com