Indigo Color System

Why Indigo for your UI?

Indigo combines the trust of blue with the creativity of purple. It's the color of deep focus and intelligence — used by companies like Stripe, Twitch, and many fintech products. An indigo-based system feels premium, focused, and slightly unconventional compared to standard blue.

What you get

• 16 color tokens with semantic naming (--color-primary, --color-surface, --color-success, etc.)
• Dark mode + Light mode — generated automatically
• WCAG-compliant text contrast ratios
• Button states: primary, hover, disabled, accent
• CSS variables ready to paste into any project
• Works with Tailwind CSS, React, Vue, or plain HTML

When to use a Indigo color system

A indigo color system is ideal when you need to convey focus, intelligence, and premium quality. It works especially well for SaaS dashboards, landing pages, and any interface where users spend extended time. The key is having properly calibrated shades — not just one hex, but a complete system with background, surface, text, border, and interactive states that all work together harmoniously.

Light mode vs Dark mode

In light mode, indigo works as a strong accent against white and light gray backgrounds. Text contrast is achieved with dark grays. In dark mode, the indigo primary needs to be slightly desaturated to avoid eye strain on dark surfaces. Our generator handles these adjustments automatically — surface colors get darker, text colors flip to light, and the primary accent adapts its brightness for optimal contrast in both modes.

How to use with Tailwind CSS

The generated CSS variables integrate seamlessly with Tailwind CSS. Paste the variables into your globals.css under :root (light) and [data-theme="dark"] (dark mode). Then reference them in your Tailwind config or directly in your classes: bg-[var(--color-background)], text-[var(--color-text-primary)], border-[var(--color-border)]. For Tailwind v4+, you can use @theme to map them to custom utilities. This gives you a consistent indigo-based design system without fighting Tailwind's default palette.

How to export and use

After generating your color system, you get a CSS file with all variables defined for both light and dark modes. Simply paste the :root block into your project's global CSS file. The variables use semantic names (--color-primary, --color-surface, --color-text-muted, etc.) so they're self-documenting. You also get an HTML example file showing all the tokens in use, which serves as a reference for your team.

FAQ

What colors pair well with indigo?

Our generator automatically creates a complementary accent color (hue +120°), balanced text colors, and neutral backgrounds. The entire system is derived mathematically from the indigo base to ensure harmony.

Is a indigo color system good for dark mode?

Absolutely. Our generator creates optimized dark and light mode variants. In dark mode, the indigo primary maintains vibrancy against dark backgrounds, with adjusted surface and text colors for readability.

Can I customize the indigo palette after generating it?

Yes! The generated palette is a starting point. You can use our tool to pick any shade of indigo as your base, and the entire system adapts. You get CSS variables that are easy to override.

Explore more color systems