IN THE FIELD GUIDE
Chromapick
chromapick.click
ChromaPick is a Chrome extension that captures colors, gradients, and fonts from any website and exports them directly to Figma. It enables product teams to turn live websites into reusable design systems without manual sampling or screenshots.
THE PRODUCT, BEYOND THE PITCH
Editorially reviewed · Sources checked Oct 2, 2026
A good fit for
- Product teams, design studios, and freelancers who work extensively with Figma.
Know the limitations
- Free plan limits users to 5 extractions per month and basic gradient detection with single font detection.
What you can do
- Extracting design elements from websites to create reusable design systems in Figma.
- Designers and product teams capturing colors, gradients, and fonts quickly for design projects.
Features
- Color extraction capturing every color on the page grouped by role and usage.
- Gradient detection that finds and copies complex CSS gradients without opening developer tools.
- Font detection identifying typefaces, weights, and sizes in one click.
- Export to Figma with copy palettes, gradients, and fonts ready for use.
Integrations
- Integration with Figma for exporting palettes, gradients, and fonts directly as presets and components.
Platforms & data export
- Chrome browser extension.
- Exports design elements to Figma styles and components, and code formats including CSS and Tailwind.
THE COST FOR YOUR TEAM
Go beyond the starting price.
Published plan prices for your team size and usage. Results update as you type. Taxes, currency conversion and unlisted add-ons are excluded, and anything the source did not state is called out rather than guessed.
Known monthly subtotal
$0.00/month
1 of 1 tools could not be priced with these inputs, so this is not the full cost.
| Tool / plan | Monthly | Per year | What this assumes |
|---|---|---|---|
| No pricing recorded yet. Check the official site, or ask the owner to add it. | |||
A practical workflow
- Install the ChromaPick Chrome extension without needing an account.
- Click the ChromaPick icon on any website to scan the page instantly for colors, gradients, and fonts.
- Copy the extracted palettes, gradients, and fonts into Figma or code for use in design projects.
Based on the sources below. Editorial review does not imply hands-on product testing.
Alternatives to explore
Filter alternatives →Candidates based on category and primary feature. Check feature and pricing differences before switching.
Plan a switch from Chromapick →What changed
No changes recorded yet
Changes to the facts recorded here, not a live scan of every vendor update. Save this tool to follow updates in your account.
No changes recorded yet.
Comments
No comments yet. Be the first to say what Chromapick costs you.