60 Dominant
Backgrounds, large surfaces, whitespace.
No palette yet.
Paste or drop a screenshot to begin. The dominant color becomes your 60, its closest related tone your 30, and the most legible, most saturated contrasting color your 10. Every result is checked against six design rules; colors that fail are corrected.
Extracted palette
60 / 30 / 10
30 Secondary
Navigation, cards, panels, headings.
10 Accent
Buttons, links, highlights, calls to action.
Design rules
Status colors
Success, warning, error and info, tuned to the screenshotPreview
Dashboard
New project
Heads up: storage is 86% full.
Revenue
$48.2k
Users
12,804
▲ 8.1%
Churn
2.4%
▲ 0.6%
Traffic by channel
SearchSocialEmailDirectAds
Acme Co.Paid
GlobexPending
InitechOverdue
UmbrellaDraft
ProductPricingDocs
Sign up
Built for teams
Ship faster with less noise.
Start free trial
Book a demo
Fast
Secure
Friendly
you@company.com
Join waitlist
✓ You're on the list!NewWomenMenSale
Cart 3
Canvas tote
$38
In stock
Field jacket$140 $98
Only 2 left
Wool beanie
$24
Sold out
Runner sneaker
$110
Pre-order
Added to cart. Free shipping unlocked.
Checkout · $160
Guide
Reference
Getting started
Note Requires version 2.0 or newer.
npm install colortool
Tip Run it with
--watch during development.Warning This resets your local settings.
Danger Never commit your API key.
Next: Configuration →
Make it pop.
Get started
Notifications
Payment sent$24.00 to Alex
Low battery12% remaining
Upload failedTap to retry
Update readyRestart to install