Build YourPerfect Palette
Visualize your colors on real templates instantly. A modern color palette generator built with Next.js 15, React, and Tailwind CSS.
by Prakash Timalsina
Full-Stack Developer
Everything You Need toDesign with Confidence
From designers to developers, teent provides the tools to create, visualize, and export beautiful color systems.
Live Preview
See your colors instantly applied to real website templates
Instant Updates
Changes reflect immediately across all previews
Export Ready
Get CSS variables, Tailwind config, and more
Multiple Templates
Dashboard, Blog, E-commerce, and more previews
Accessibility
WCAG contrast ratios and accessibility scores
Smart Suggestions
AI-powered color recommendations
Design YourColor System
Pick your colors and watch everything update in real-time. Drag and drop, enter HEX values, or use our color picker.
Color Palette
Random
Lock colors you like, then generate new palettes — locked ones stay the same
See Your ColorsIn Action
Your palette applied to real website templates. Switch between previews to see how your colors work in different contexts.
Palette Preview
Click colors to copy HEX values
Click to copy
Click to copy
Click to copy
Click to copy
Click to copy
Click to copy
Ready forProduction
Export your color system as CSS variables, Tailwind config, SCSS, or JSON. Perfect for your next project.
Export Configuration
Colors to be exported:
primary
#8b5cf6
secondary
#3b82f6
accent
#10b981
success
#f59e0b
warning
#ef4444
error
#ec4899
Preview Your ColorsOn Real Templates
See how your color palette looks across different website types. Click to explore full-screen previews.
Preview your palette on real templates
Ready to TransformYour Designs?
Join thousands of designers and developers who use teent to create beautiful, accessible color systems.
No account required • 100% Free • Open Source