Tailwind scale studio
Tune each 50-950 shade, preview it on UI components, and export production-ready tokens.
#4769D6
Full Tailwind 50–950 color scale generated from any base hex — copy the config, drop it into tailwind.config.js, and every surface stays on-brand.
Workspace
Build with one to three linked palettes and choose which one drives the live preview.
Examples
Every card re-tints live as you change the base color.
Build polished UI themes from one color seed
Generate a full 50-950 range and keep components visually coherent across states, surfaces, and layouts.
Perfect for freelancers or hobbyists starting out.
Ideal for growing teams that need collaboration tools.
Designed for large organizations with custom needs.
Control who can view, edit, and approve content across your organization. Great for admins.
Customize when and how you receive alerts for important updates and requests.
Export activity summaries and detailed reports in multiple file formats, anytime.
Map interaction patterns and reusable page structures for product surfaces.
Ship responsive screens with component composition and state-driven styling.
Plan subtle motion cues that reinforce hierarchy and affordances.
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
primary: {
'50': '#ebf0ff',
'100': '#dfe5ff',
'200': '#c6ceff',
'300': '#a6b2ff',
'400': '#8091f7',
'500': '#4769d6',
'600': '#4163ce',
'700': '#2d53b5',
'800': '#13419a',
'900': '#00307f',
'950': '#002065',
},
},
},
},
}