industryColor Scheme

SaaS Modern

A sleek modern SaaS palette with vibrant indigo and clean grays. Built for dashboards, landing pages, and product interfaces.

#ffffff
#f9fafb
#6366f1
#6b7280
#ec4899

Color Breakdown

Role

background

Name

White

Hex

#ffffff

Tailwind

bg-white

Role

surface

Name

Gray 50

Hex

#f9fafb

Tailwind

bg-gray-50

Role

primary

Name

Indigo 500

Hex

#6366f1

Tailwind

text-indigo-500

Role

secondary

Name

Gray 500

Hex

#6b7280

Tailwind

text-gray-500

Role

accent

Name

Pink 500

Hex

#ec4899

Tailwind

bg-pink-500

Live Preview

Welcome Back

This is a live preview of the SaaS Modern color scheme applied to a sample card component. See how the colors work together in a realistic UI context.

Design Rationale

Indigo strikes the perfect balance between professional and innovative for SaaS products. Pink accents create visual interest for key metrics and CTAs.

Use Cases

SaaS dashboardsProduct landing pagesAdmin panels

CSS Variables

CSS
:root {
  --background: #ffffff;
  --surface: #f9fafb;
  --primary: #6366f1;
  --secondary: #6b7280;
  --accent: #ec4899;
}

Tailwind Config

JavaScript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'saas-modern': {
  'background': '#ffffff',  // bg-white
  'surface': '#f9fafb',  // bg-gray-50
  'primary': '#6366f1',  // text-indigo-500
  'secondary': '#6b7280',  // text-gray-500
  'accent': '#ec4899',  // bg-pink-500
        },
      },
    },
  },
};

Related Color Schemes

Build with This Scheme

Use our palette generator to customize and extend this color scheme for your project.

Open Palette Generator

Frequently Asked Questions

Why is indigo popular in SaaS design?
Indigo blends the trust of blue with the creativity of purple, making it ideal for innovative yet reliable software products.