SaaS Modern
A sleek modern SaaS palette with vibrant indigo and clean grays. Built for dashboards, landing pages, and product interfaces.
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
CSS Variables
:root {
--background: #ffffff;
--surface: #f9fafb;
--primary: #6366f1;
--secondary: #6b7280;
--accent: #ec4899;
}Tailwind Config
// 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
Healthcare Clean
A clean and trustworthy palette designed for healthcare applications. Light backgrounds with calming blues inspire confidence and clarity.
Healthcare Modern
A modern healthcare palette blending deep indigo with fresh teal accents. Ideal for innovative health-tech platforms seeking a contemporary feel.
Fintech Trust
A trustworthy fintech palette built on deep navy and professional grays. Designed to communicate security and financial reliability.
Fintech Bold
A bold fintech palette that breaks convention with vibrant violet and sharp contrasts. Perfect for disruptive financial startups.
Ecommerce Warm
A warm and inviting ecommerce palette that encourages browsing and purchasing. Soft backgrounds with orange accents create urgency without pressure.
Ecommerce Luxury
A luxurious ecommerce palette featuring deep backgrounds and gold accents. Designed for premium brands and high-end product showcases.
Build with This Scheme
Use our palette generator to customize and extend this color scheme for your project.
Open Palette Generator