Extract colors, gradients & fonts from any website.
ChromaPick turns live sites into reusable design systems. Copy palettes and styles straight into Figma—no screenshots or manual sampling.
Colors
Typography
Inter · 400, 500, 600
Gradients
Try ChromaPick live in your browser
Select any top product below to see how ChromaPick extracts colors, gradients, font stacks, and Figma tokens instantly.
1. Brand Palette & Contrast Tokens
Click swatch to copy HEXBrand Accent
Primary / Accent
Void Dark
Main Background
Surface Card
Surface Layer
Muted Border
Borders & Lines
Subtle Text
Secondary Typography
Pure Light
Headings & Icons
2. Extracted CSS Gradient
3. Live Typography Discovery
Inter, -apple-system, sans-serif
Weights: 400 (Regular), 500 (Medium), 600 (SemiBold)
"Issue tracking built for high-performance software teams."
Instant Export Format
Ready to paste into your design or codebase
{
"name": "Linear Design Tokens",
"version": "1.0",
"extractedWith": "ChromaPick.click",
"colors": {
"brand_accent": {
"value": "#5E6AD2",
"type": "color",
"role": "Primary / Accent"
},
"void_dark": {
"value": "#0F1015",
"type": "color",
"role": "Main Background"
},
"surface_card": {
"value": "#1A1B23",
"type": "color",
"role": "Surface Layer"
},
"muted_border": {
"value": "#2E303E",
"type": "color",
"role": "Borders & Lines"
},
"subtle_text": {
"value": "#8A8F98",
"type": "color",
"role": "Secondary Typography"
},
"pure_light": {
"value": "#F7F8F8",
"type": "color",
"role": "Headings & Icons"
}
},
"gradient": "linear-gradient(135deg, #5E6AD2 0%, #B37AF3 50%, #FF6A00 100%)",
"typography": {
"primary": "Inter, -apple-system, sans-serif",
"weights": "400 (Regular), 500 (Medium), 600 (SemiBold)",
"sample": "Issue tracking built for high-performance software teams."
}
}Want to extract this from any live website in 1 click?
Install the ChromaPick Chrome Extension to extract palettes, typography, and gradients everywhere you browse.
Precision color extraction for Figma — one click from any website.
Colors, gradients, and fonts without manual sampling or dev tools.
98%
Color match accuracy
1-click
Extract from any site
Figma
Export ready
Built for product teams
Four tools that turn any website into a reusable design system inside Figma.
Color extraction
Capture every color on the page, grouped by role and usage.
Gradient detection
Find and copy complex CSS gradients without opening dev tools.
Font detection
Identify typefaces, weights, and sizes in one click.
Figma export
Copy as editable color and text styles into any Figma file.
How it works
Install extension
Add ChromaPick to Chrome in seconds. No account required.
Click extract
Open any site, hit the ChromaPick icon, and we scan the page instantly.
Copy & use
Copy palettes, gradients, and fonts into Figma or code.
Simple, one-time pricing
Start free. Upgrade once for lifetime Pro access.
Frequently asked questions
How do I install ChromaPick?+−
Click “Add to Chrome” from this page or find ChromaPick on the Chrome Web Store. The icon will appear in your toolbar.
How do I get my license?+−
After purchasing Pro, you’re redirected to a success page with your license key. It’s also in your dashboard, tied to your Google account.
Do I need an account?+−
Free works without an account. Sign in with Google to unlock Pro and sync your license across devices.
Is there a refund policy?+−
Yes. If ChromaPick doesn’t fit within 7 days, email support for a full refund—no questions asked.
Ready to capture colors?
Add ChromaPick to Chrome for free and extract your first palette in under 30 seconds.