How to Create the Perfect Tailwind Color Palette for Your SaaS

Building a SaaS? One of the first decisions you'll face is choosing colors. Get it wrong, and your app looks either amateur or inconsistent. Get it right, and users trust your product before they even sign up.

Here's how to create a Tailwind color palette that works.

Start with your primary color

Your primary color does the heavy lifting. It's your buttons, links, and key actions. Pick one that:

• Stands out on white backgrounds
• Has enough contrast for accessibility (WCAG AA requires 4.5:1 for text)
• Fits your industry (blue for trust, green for finance, purple for creativity)

Most developers start with a hex code they like, but that's not enough. You need a full scale from 50 (lightest) to 950 (darkest).

// tailwind.config.ts
colors: {
  primary: {
    50: '#eff6ff',
    100: '#dbeafe',
    200: '#bfdbfe',
    300: '#93c5fd',
    400: '#60a5fa',
    500: '#3b82f6',  // Your main color
    600: '#2563eb',
    700: '#1d4ed8',
    800: '#1e40af',
    900: '#1e3a8a',
    950: '#172554',
  }
}

Add semantic colors

Beyond your brand colors, you need colors that communicate meaning:

colors: {
  success: '#10b981',
  warning: '#f59e0b',
  error: '#ef4444',
  info: '#0ea5e9',
}

Don't forget backgrounds and text

A common mistake: focusing only on accent colors and forgetting the 90% of your UI that's backgrounds and text.

You need:

• Background colors: Your main canvas (usually white or near-white)
• Surface colors: Cards, modals, dropdowns (slightly different from background)
• Border colors: Subtle separators
• Text colors: Primary text, secondary text, muted text

colors: {
  background: '#ffffff',
  foreground: '#0f172a',
  muted: {
    DEFAULT: '#f1f5f9',
    foreground: '#64748b',
  },
  border: '#e2e8f0',
}

The dark mode question

If you're building dark mode (you probably should), don't just invert your colors. Dark mode needs:

• Different background shades (not pure black—use dark grays)
• Slightly desaturated accent colors
• Adjusted contrast ratios

The easiest approach: define your colors as CSS variables and swap them based on a class or media query.

:root {
  --background: 0 0% 100%;
  --foreground: 222 47% 11%;
}
 
.dark {
  --background: 224 71% 4%;
  --foreground: 213 31% 91%;
}

Skip the work entirely

Choosing colors, generating scales, ensuring accessibility, handling dark mode... it adds up.

Want to experiment with colors right now? Our free brand color palette generator lets you pick a color, choose from 5 harmony modes, and get full shade scales (50–950) with WCAG contrast checking. You can export as Tailwind config, CSS variables, SCSS, or JSON — no signup required.

Once you have your palette, the Tailwind theme generator turns it into a complete Tailwind theme with fonts, radius, and shadows. And if you need platform-agnostic tokens, the design tokens generator exports to W3C, Style Dictionary, and Figma formats.

For a complete brand system with logo, colors, and typography generated by AI in 60 seconds, try OneMinuteBranding.