Color Picker - by Siam Ahnaf

Color Picker by Siam Ahnaf — Pick, build, and export colors from anywhere on the web. A fast, beautifully designed color toolkit for designers and developers. Grab the exact hex of any pixel on any page, generate harmonious schemes, build gradients, check WCAG contrast, and export your palette to CSS, SCSS, Tailwind, or Adobe .ase — all from one tidy popup. ━━━━━━━━━━━━━━━━━━━━ WHAT YOU CAN DO ━━━━━━━━━━━━━━━━━━━━ • One-click eyedropper — Click "Pick a Color", then click anywhere on the page. The color is copied to your clipboard instantly in your chosen format. • Magnifier fallback — When the native eyedropper isn't available (chrome:// pages, PDFs, the new-tab page), a pixel-accurate magnifier lets you pick anywhere a screenshot can be taken. • Keyboard shortcut — Press Alt+Shift+P from any page to pick instantly without opening the popup. Press Alt+Shift+O to open the popup. • Right-click menu — Pick a color directly from the page context menu, or save any hex code you've selected in text. • Color history — Every color you pick is saved locally. Browse, copy, or clear your history any time. • Recent picks at a glance — Your last picked color and four most-recent shades are always one click away. • Page color scanner — Click "Refresh" on the Page tab to extract every color used on the current site, sorted by frequency. Perfect for stealing inspiration or auditing a design system. • HSV color palette — Customize and fine-tune any color with a saturation pad and hue slider. The palette auto-loads your last picked color so you can iterate fast. • Scheme generator — From any seed color, instantly generate complementary, analogous, triadic, tetradic, tints, and shades palettes. • Gradient builder — Build linear or radial gradients with unlimited stops, custom angles, and a live preview. Copies clean, ready-to-paste CSS. • WCAG contrast checker — Drop in a foreground and background color, see the contrast ratio with AA / AAA badges for normal and large text, and let the "Suggest accessible foreground" button auto-fix failing combos. • Smart output formats — Copy colors as HEX, RGB, RGBA, HSL, HSLA, CSS variable, or nearest Tailwind class. Pick your default in Settings. • Export your palette — Send your full history to JSON, CSS variables, SCSS variables, a Tailwind config snippet, or an Adobe Swatch Exchange (.ase) file for Photoshop, Illustrator, and Figma. • Hex input — Paste or type any hex code (3 or 6 digits) and the palette syncs automatically. ━━━━━━━━━━━━━━━━━━━━ HOW TO USE ━━━━━━━━━━━━━━━━━━━━ 1. Click the Color Picker icon in your toolbar (or press Alt+Shift+O). 2. Hit "Pick a Color" and click anywhere on the page — the color is copied automatically. 3. Switch tabs to "Palette" to fine-tune, generate schemes, build gradients, or check contrast. 4. Use the "History" tab to revisit past picks or export them as CSS, SCSS, Tailwind, JSON, or .ase. 5. Use the "Page" tab to scan the current site for every color it uses. 6. Click any tile to re-copy it and bump it to the top of your history. ━━━━━━━━━━━━━━━━━━━━ PRIVACY FIRST ━━━━━━━━━━━━━━━━━━━━ Color Picker collects zero personal data. Everything — your history, your last pick, your preferences — is stored locally in your browser via chrome.storage.local. Nothing is sent to any server, analytics, or third party. Ever. Permissions used: • activeTab — to read pixels from the page you're currently on, only when you click Pick or use the keyboard shortcut. • scripting — to inject the picker / magnifier and to extract colors when you tap Refresh on the Page tab. • storage — to remember your color history and settings locally. • clipboardWrite — to copy color values for you. • contextMenus — to add "Pick a color from this page" to the right-click menu. No broad host permissions. No "read & change all your data on all websites." The extension only touches the page when you explicitly ask it to. ━━━━━━━━━━━━━━━━━━━━ DESIGNED FOR ━━━━━━━━━━━━━━━━━━━━ • Web developers grabbing CSS colors and building palettes • UI / UX designers building accessible color systems • Illustrators and digital artists • Anyone who's ever needed "what hex is that?" ━━━━━━━━━━━━━━━━━━━━ ABOUT THE DEVELOPER ━━━━━━━━━━━━━━━━━━━━ Built with care by Siam Ahnaf, a senior full-stack web & app developer from Dhaka, Bangladesh, specializing in NodeJS, React, NextJS, and NestJS. Website: https://siamahnaf.com Email: mail@siamahnaf.com GitHub: https://github.com/siamahnaf LinkedIn: https://www.linkedin.com/in/siamahnaf/ Medium: https://siamahnaf.medium.com/ Twitter: https://twitter.com/siamahnaf198 Facebook: https://www.facebook.com/siamahnaf198/ Got feedback, ideas, or a bug to report? Reach out via WhatsApp from the extension popup, or email mail@siamahnaf.com — happy to hear from you. If Color Picker makes your workflow a little smoother, please leave a review — it really helps.