{"product_id":"swatch-color-picker-palette-browser-extension","title":"Swatch - Color Picker \u0026 Palette","description":"\u003cp style=\"text-align: center; margin-top: 16px; margin-bottom: 24px;\"\u003e\n  \u003ca href=\"https:\/\/demo.projetostack.com\/extensions\/color-picker\" _blank style=\"display: inline-block; background-color: #0A0A0A; color: #FFFFFF; font-weight: bold; text-decoration: none; padding: 12px 24px; border-radius: 4px; font-size: 14px; text-transform: uppercase; letter-spacing: 1px;\"\u003e\n    Live Demo ↗\n  \u003c\/a\u003e\n\u003c\/p\u003e\n\u003cp\u003ePick colours from webpages, extract polished palettes, and copy accurate colour values from one clean browser extension.\u003c\/p\u003e\n\u003cp\u003eSwatch is a premium React and TypeScript colour picker extension featuring a native EyeDropper, visible-page palette extraction, CSS colour scanning, contrast analysis, colour history, and saved palettes. It provides a complete source-code foundation for design tools, developer utilities, branding applications, and client extension projects.\u003c\/p\u003e\n\u003ch2\u003ePerfect For\u003c\/h2\u003e\n\u003cp\u003e✓ Web Designers\u003c\/p\u003e\n\u003cp\u003e✓ UI \u0026amp; UX Designers\u003c\/p\u003e\n\u003cp\u003e✓ Frontend Developers\u003c\/p\u003e\n\u003cp\u003e✓ Graphic Designers\u003c\/p\u003e\n\u003cp\u003e✓ Brand Designers\u003c\/p\u003e\n\u003cp\u003e✓ Design Agencies\u003c\/p\u003e\n\u003cp\u003e✓ Creative Professionals\u003c\/p\u003e\n\u003cp\u003e✓ Website Auditing Tools\u003c\/p\u003e\n\u003cp\u003e✓ Browser Productivity Products\u003c\/p\u003e\n\u003cp\u003e✓ Agency Client Projects\u003c\/p\u003e\n\u003ch2\u003eWhy Choose Swatch?\u003c\/h2\u003e\n\u003cp\u003e✓ Native browser EyeDropper tool\u003c\/p\u003e\n\u003cp\u003e✓ Extract dominant colours from visible webpages\u003c\/p\u003e\n\u003cp\u003e✓ Scan colours used in webpage styles\u003c\/p\u003e\n\u003cp\u003e✓ Copy HEX, RGB, and HSL values\u003c\/p\u003e\n\u003cp\u003e✓ Built-in colour contrast analysis\u003c\/p\u003e\n\u003cp\u003e✓ Automatic colour history\u003c\/p\u003e\n\u003cp\u003e✓ Save and reload custom palettes\u003c\/p\u003e\n\u003cp\u003e✓ Local browser storage\u003c\/p\u003e\n\u003cp\u003e✓ No external colour-processing service\u003c\/p\u003e\n\u003cp\u003e✓ Lightweight browser permissions\u003c\/p\u003e\n\u003cp\u003e✓ Clean and organised source code\u003c\/p\u003e\n\u003cp\u003e✓ Easy to customise and extend\u003c\/p\u003e\n\u003cp\u003e✓ No recurring subscription fees\u003c\/p\u003e\n\u003ch2\u003eWhat’s Included\u003c\/h2\u003e\n\u003cp\u003eYour download includes:\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Complete React \u0026amp; TypeScript Source Code\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Chrome Manifest V3 Production Build\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Microsoft Edge-Compatible Build\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Colour Picker Popup Interface\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Native EyeDropper Tool\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Visible Page Palette Extractor\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 CSS Colour Scanner\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Colour Conversion Utilities\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Contrast Ratio Calculator\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Colour History System\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Saved Palette Management\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Copy Format Preferences\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Background Service Worker\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Browser Storage System\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Extension Icons \u0026amp; Assets\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 WXT Configuration\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 TypeScript Configuration\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Package Configuration\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📄 Documentation (README.md)\u003c\/strong\u003e\u003c\/p\u003e\n\u003ch2\u003eKey Features\u003c\/h2\u003e\n\u003cp\u003e✓ Native EyeDropper Colour Picker\u003c\/p\u003e\n\u003cp\u003e✓ Visible Page Palette Extraction\u003c\/p\u003e\n\u003cp\u003e✓ Median-Cut-Style Colour Analysis\u003c\/p\u003e\n\u003cp\u003e✓ CSS Colour Scanning\u003c\/p\u003e\n\u003cp\u003e✓ HEX Colour Values\u003c\/p\u003e\n\u003cp\u003e✓ HEX Values Without Hash Symbol\u003c\/p\u003e\n\u003cp\u003e✓ RGB Colour Values\u003c\/p\u003e\n\u003cp\u003e✓ HSL Colour Values\u003c\/p\u003e\n\u003cp\u003e✓ One-Click Colour Copying\u003c\/p\u003e\n\u003cp\u003e✓ Configurable Default Copy Format\u003c\/p\u003e\n\u003cp\u003e✓ Contrast Ratio Against White\u003c\/p\u003e\n\u003cp\u003e✓ Contrast Ratio Against Black\u003c\/p\u003e\n\u003cp\u003e✓ Automatic Colour History\u003c\/p\u003e\n\u003cp\u003e✓ Duplicate Colour Prevention\u003c\/p\u003e\n\u003cp\u003e✓ Saved Colour Palettes\u003c\/p\u003e\n\u003cp\u003e✓ Load Saved Palettes\u003c\/p\u003e\n\u003cp\u003e✓ Delete Saved Palettes\u003c\/p\u003e\n\u003cp\u003e✓ Copy Complete Extracted Palette\u003c\/p\u003e\n\u003cp\u003e✓ Local Browser Storage\u003c\/p\u003e\n\u003cp\u003e✓ Lightweight Manifest V3 Permissions\u003c\/p\u003e\n\u003ch2\u003eTechnology Stack\u003c\/h2\u003e\n\u003cp\u003eBuilt using modern browser-extension technologies:\u003c\/p\u003e\n\u003cp\u003e✓ React 19\u003c\/p\u003e\n\u003cp\u003e✓ TypeScript\u003c\/p\u003e\n\u003cp\u003e✓ WXT\u003c\/p\u003e\n\u003cp\u003e✓ Manifest V3\u003c\/p\u003e\n\u003cp\u003e✓ Browser EyeDropper API\u003c\/p\u003e\n\u003cp\u003e✓ Browser Storage API\u003c\/p\u003e\n\u003cp\u003e✓ Browser Scripting API\u003c\/p\u003e\n\u003cp\u003e✓ Visible Tab Capture API\u003c\/p\u003e\n\u003cp\u003e✓ Offscreen Canvas\u003c\/p\u003e\n\u003cp\u003e✓ ImageData Processing\u003c\/p\u003e\n\u003cp\u003e✓ Component-Based Architecture\u003c\/p\u003e\n\u003cp\u003e✓ Modern CSS\u003c\/p\u003e\n\u003cp\u003e✓ Modern Folder Structure\u003c\/p\u003e\n\u003ch2\u003ePerformance Features\u003c\/h2\u003e\n\u003cp\u003eDesigned for fast colour-selection workflows:\u003c\/p\u003e\n\u003cp\u003e✓ Local Colour Processing\u003c\/p\u003e\n\u003cp\u003e✓ No External Processing Server\u003c\/p\u003e\n\u003cp\u003e✓ Lightweight Popup Interface\u003c\/p\u003e\n\u003cp\u003e✓ Downscaled Screenshot Analysis\u003c\/p\u003e\n\u003cp\u003e✓ Sampled Pixel Processing\u003c\/p\u003e\n\u003cp\u003e✓ Near-Duplicate Colour Filtering\u003c\/p\u003e\n\u003cp\u003e✓ Limited DOM Scanning\u003c\/p\u003e\n\u003cp\u003e✓ Local History Storage\u003c\/p\u003e\n\u003cp\u003e✓ Local Palette Storage\u003c\/p\u003e\n\u003cp\u003e✓ Fast Client-Side Colour Conversion\u003c\/p\u003e\n\u003cp\u003e✓ Reusable React Components\u003c\/p\u003e\n\u003cp\u003e✓ Clean TypeScript Implementation\u003c\/p\u003e\n\u003cp\u003e✓ Modern Manifest V3 Architecture\u003c\/p\u003e\n\u003cp\u003e✓ Easy Branding Customisation\u003c\/p\u003e\n\u003cp\u003e✓ Scalable Source-Code Structure\u003c\/p\u003e\n\u003ch2\u003eHow It Works\u003c\/h2\u003e\n\u003col\u003e\n\u003cli\u003eDownload and extract the project files.\u003c\/li\u003e\n\u003cli\u003eInstall the project dependencies.\u003c\/li\u003e\n\u003cli\u003eRun the development environment or generate a production build.\u003c\/li\u003e\n\u003cli\u003eLoad the generated Chrome extension folder into your browser.\u003c\/li\u003e\n\u003cli\u003eOpen Swatch from the browser toolbar.\u003c\/li\u003e\n\u003cli\u003eUse the EyeDropper to select any visible colour.\u003c\/li\u003e\n\u003cli\u003eExtract a palette from the visible webpage or scan its CSS colours.\u003c\/li\u003e\n\u003cli\u003eCopy colours in HEX, RGB, HSL, or bare HEX format.\u003c\/li\u003e\n\u003cli\u003eSave useful palettes and return to recently selected colours.\u003c\/li\u003e\n\u003cli\u003eCustomise the branding, interface, icons, palette limits, and functionality.\u003c\/li\u003e\n\u003cli\u003eBuild and publish the completed extension when ready.\u003c\/li\u003e\n\u003c\/ol\u003e\n\u003ch2\u003eBrowser Compatibility\u003c\/h2\u003e\n\u003cp\u003eWorks with:\u003c\/p\u003e\n\u003cp\u003e✓ Google Chrome\u003c\/p\u003e\n\u003cp\u003e✓ Microsoft Edge\u003c\/p\u003e\n\u003cp\u003e✓ Brave\u003c\/p\u003e\n\u003cp\u003e✓ Opera\u003c\/p\u003e\n\u003cp\u003eCompatibility with other Chromium-based browsers depends on their support for the required browser APIs and should be tested before production use.\u003c\/p\u003e\n\u003ch2\u003eLicense\u003c\/h2\u003e\n\u003cp\u003eYour purchase includes:\u003c\/p\u003e\n\u003cp\u003e✓ Lifetime access to the purchased source code\u003c\/p\u003e\n\u003cp\u003e✓ Commercial use for personal and client projects\u003c\/p\u003e\n\u003cp\u003e✓ Full customisation rights\u003c\/p\u003e\n\u003cp\u003e✓ Unlimited personal and client projects\u003c\/p\u003e\n\u003cp\u003eYou may not:\u003c\/p\u003e\n\u003cp\u003e✗ Resell the original source code\u003c\/p\u003e\n\u003cp\u003e✗ Redistribute the files\u003c\/p\u003e\n\u003cp\u003e✗ Share the files publicly\u003c\/p\u003e\n\u003cp\u003e✗ Repackage the source code as a competing digital product for resale\u003c\/p\u003e\n\u003ch2\u003eInstant Digital Download\u003c\/h2\u003e\n\u003cp\u003eNo physical product will be shipped.\u003c\/p\u003e\n\u003cp\u003eImmediately after purchase, you’ll receive instant access to download the complete colour-picker source code, production build, and documentation so you can begin creating your own browser design tool.\u003c\/p\u003e\n\u003ch2\u003eImportant Note\u003c\/h2\u003e\n\u003cp\u003e\u003cem\u003eThe EyeDropper feature requires a browser that supports the native EyeDropper API.\u003c\/em\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cem\u003eVisible-page palette extraction analyses the portion of the webpage currently displayed in the browser. CSS scanning reviews supported computed colour properties from a limited number of webpage elements.\u003c\/em\u003e\u003c\/p\u003e\n\u003cp\u003eThe product does not guarantee extraction of:\u003c\/p\u003e\n\u003cp\u003e✗ Every Colour From Extremely Large Webpages\u003c\/p\u003e\n\u003cp\u003e✗ Complex CSS Gradients\u003c\/p\u003e\n\u003cp\u003e✗ Background Images\u003c\/p\u003e\n\u003cp\u003e✗ Every CSS Custom Property\u003c\/p\u003e\n\u003cp\u003e✗ Colours Inside Restricted Browser Pages\u003c\/p\u003e\n\u003cp\u003e✗ Content Inside Inaccessible Cross-Origin Frames\u003c\/p\u003e\n\u003cp\u003e\u003cem\u003eBrowser settings pages, extension stores, internal browser URLs, and other restricted pages may prevent screenshot capture or webpage scanning.\u003c\/em\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003ePROJETO STACK - Premium software templates and digital products built for modern businesses.\u003c\/strong\u003e\u003c\/p\u003e","brand":"PROJETO STACK","offers":[{"title":"Default Title","offer_id":65440209437021,"sku":null,"price":15.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/1089\/3633\/1613\/files\/BECD1DCB-8E95-4063-8C2E-80873EC26317.png?v=1786284818","url":"https:\/\/projetostack.com\/products\/swatch-color-picker-palette-browser-extension","provider":"PROJETO STACK","version":"1.0","type":"link"}