Firefox Browser Add-ons
  • Extensions
  • Themes
    • for Firefox
    • Dictionaries & Language Packs
    • Other Browser Sites
    • Add-ons for Android
Log in
Preview of ChromaKit - Discover Every Color Behind Any Websit

ChromaKit - Discover Every Color Behind Any Websit by Muzammil

All in one tool to Pick, convert, and export colors or assets from any webpage.

0 (0 reviews)0 (0 reviews)
Download Firefox and get the extension
Download file

Extension Metadata

Screenshots
ChromaKit Expert-Level Color ToolColor Contrast Verification ToolGradient Builder toolImage Color Extractor Tool
About this extension
ChromaKit — Pick, convert, and export colors from any webpage

Stop switching between dev tools and color apps — everything lives in one click 🎨
Pick any pixel, generate palettes, and ship CSS variables before your coffee cools ⚡
Say goodbye to hex-guessing and hello to WCAG-compliant colors in seconds 👋
ChromaKit

🚀 Why ChromaKit?
ChromaKit eliminates the tab-switching and manual conversion that slows down every design and frontend workflow. Pick any color from any webpage element — images, canvases, gradients, text — and instantly get HEX, RGB, HSL, CMYK, and Tailwind class output ready to paste. One tool replaces five.

🌟 Features
🎯 Universal Page Picker — Sample pixels from images, canvases, SVGs, and CSS backgrounds using the native EyeDropper API with a magnifier lens fallback.
🔄 Seven Format Outputs — Get HEX, RGB, RGBA, HSL, HSLA, HSV, and CMYK values with one-click copy for each.
🌈 Palette Generator — Generate complementary, analogous, triadic, split-complementary, and monochromatic palettes from any base color.
⚖️ WCAG Contrast Checker — Verify AA and AAA compliance in real time, with auto-suggested accessible alternatives when contrast fails.
🕐 Color History — Browse, search, pin, and export your last 100 picked colors as JSON or CSV.
🌅 Gradient Builder — Compose linear and radial gradients with multi-stop editing and instant CSS copy.
👁️ Color Blindness Simulator — Preview Protanopia, Deuteranopia, and Tritanopia simulations side-by-side.
🖼️ Image Color Extractor — Upload any image to sample individual pixels or auto-extract the 8 dominant colors.
📦 CSS & Tailwind Export — Output CSS custom properties and Tailwind config snippets with a custom variable name.

🔍 Perfect For
Frontend developers who need accurate color values without leaving their browser
UI/UX designers who validate contrast ratios and generate palettes mid-workflow
Design system engineers who export CSS variables and Tailwind tokens directly from live sites
Accessibility specialists who audit color contrast against WCAG AA and AAA standards
Freelancers who reverse-engineer client brand colors from live websites
Rated 0 by 0 reviewers
Log in to rate this extension
There are no ratings yet

Star rating saved

5
0
4
0
3
0
2
0
1
0
No reviews yet
Permissions and data

Required permissions:

  • Access your data for all websites

Data collection:

  • The developer says this extension doesn't require data collection.
Learn more
More information
Add-on Links
  • Support site
  • Support Email
  • Copy add-on ID
Version
0.0.1
Size
135.97 KB
Last updated
5 days ago (Jun 17, 2026)
Related Categories
  • Web Development
  • Search Tools
  • Appearance
License
All Rights Reserved
Version History
  • See all versions
Add to collection
Report this add-on
Go to Mozilla's homepage

Add-ons

  • About
  • Firefox Add-ons Blog
  • Extension Workshop
  • Developer Hub
  • Developer Policies
  • Community Blog
  • Forum
  • Report a bug
  • Review Guide

Browsers

  • Desktop
  • Mobile
  • Enterprise

Products

  • Browsers
  • VPN
  • Relay
  • Monitor
  • Pocket
  • Bluesky (@firefox.com)
  • Instagram (Firefox)
  • YouTube (firefoxchannel)
  • Privacy
  • Cookies
  • Legal

Except where otherwise noted, content on this site is licensed under the Creative Commons Attribution Share-Alike License v3.0 or any later version.