Analyze website designs – instantly reveal color palettes and typography choices with a single click.
Perfect for designers and developers.
- 🎨 Scan used colors & fonts, Instantly see all colors and fonts used on the current page.
- ✨ Highlight a found color on webpage, Visually highlight any detected color directly on the page.
- 🟢 Pick any color from the page, Use the color picker tool to select and copy any color visible on the website.
- 🔠 Highlight fonts, Visually emphasize fonts used on the page for quick identification.
- 📋 Copy a color, Copy any color value in your preferred format (HEX, RGB, HSL) with one click.
- 🔄 Change format of found colors, Switch between HEX, RGB, and HSL formats for easy copying.
- 🌗 Toggle between light & dark mode, Choose the theme that fits your workflow.
- 🖍️ Change highlight color, Customize the highlight color for better visibility.
- 🏷️ See where colors and fonts are used, View which elements use each color or font.
- #️⃣ Count of colors and percentage of fonts, Get statistics on color usage and font distribution.
- 🧩 Collapse elements tab, Easily hide or show the elements panel to declutter your view.
- Clone or download this repository.
- Install dependencies:
npm install
- Build for production:
npm run build
- Open your browser's extensions page (e.g.,
chrome://extensions/). - Enable "Developer mode".
- Click "Load unpacked" and select the
/distdirectory.
If you find this project helpful, you can buy me a coffee to support ongoing development!
