Harmonious Tint Curves
Perceptually balanced lightness steps ensure high legibility and natural contrast across your UI hierarchy.
All tools
Designer & Developer tool
Color Palette & Tailwind Tint Generator
Pick a color or upload an image to generate full 50-950 Tailwind palettes, contrast badges, harmonies, and ready-to-use theme code.
Private by default. Processing happens in your browser.
- Add your inputChoose a file, paste content, or enter details.
- Choose settingsReview the useful defaults, then adjust if needed.
- Save the resultCopy or download the finished output.
Presets:
50
#fcf4f3
Dark AA
100
#f9e6e2
Dark AA
200
#f3c3b9
Dark AA
300
#ee9886
Dark AA
400
#ea684e
Dark AA
500Base
#e84e2f
Dark AA
600
#c23114
White AA
700
#9a250e
White AA
800
#711b0a
White AA
900
#471005
White AA
950
#2b0903
White AA
Quick Copy:
HSL: 10°, 80%, 55%·RGB: 232, 78, 47
Built for design systems & frontend developers
From image inspiration to copy-paste theme configs in seconds.
Image Eyedropper & Swatches
Extract brand color palettes directly from logos, photography, or UI screenshots in one click.
Tailwind v3 & v4 Ready
Export seamlessly into tailwind.config.js or modern @theme CSS rules.
Frequently asked questions
How are the 50 to 950 shades computed?
Shades are calculated using perceptual lightness curves in HSL space. Saturation is automatically adjusted at the extremes (lighter 50/100 and darker 900/950) to prevent colors from looking muddy or washed out.
Can I extract colors directly from an image or screenshot?
Yes. Upload any PNG, JPG, or WebP image. The tool samples canvas pixels and extracts the dominant harmonious colors with an interactive color picker.
Does this support Tailwind v4 @theme syntax?
Yes! You can toggle between Tailwind v3 config, Tailwind v4 @theme syntax, standard CSS custom properties (:root), SCSS, and raw JSON formats.
Do my images or color data ever leave my browser?
No. All color math, image pixel extraction, and code generation happen 100% locally in your client browser.
Need a tailor-made design system?
We build high-performance web applications, UI component libraries, and scalable design tokens.
Start a project