industryColor Scheme

Healthcare Modern

A modern healthcare palette blending deep indigo with fresh teal accents. Ideal for innovative health-tech platforms seeking a contemporary feel.

#f9fafb
#ffffff
#4f46e5
#6b7280
#14b8a6

Color Breakdown

Role

background

Name

Gray 50

Hex

#f9fafb

Tailwind

bg-gray-50

Role

surface

Name

White

Hex

#ffffff

Tailwind

bg-white

Role

primary

Name

Indigo 600

Hex

#4f46e5

Tailwind

text-indigo-600

Role

secondary

Name

Gray 500

Hex

#6b7280

Tailwind

text-gray-500

Role

accent

Name

Teal 500

Hex

#14b8a6

Tailwind

bg-teal-500

Live Preview

Welcome Back

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

Design Rationale

Indigo brings a modern tech-forward feel while remaining approachable. Teal accents connect back to health and wellness themes.

Use Cases

Health-tech startupsPatient portalsWellness apps

CSS Variables

CSS
:root {
  --background: #f9fafb;
  --surface: #ffffff;
  --primary: #4f46e5;
  --secondary: #6b7280;
  --accent: #14b8a6;
}

Tailwind Config

JavaScript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'healthcare-modern': {
  'background': '#f9fafb',  // bg-gray-50
  'surface': '#ffffff',  // bg-white
  'primary': '#4f46e5',  // text-indigo-600
  'secondary': '#6b7280',  // text-gray-500
  'accent': '#14b8a6',  // bg-teal-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

How does indigo differ from traditional healthcare blue?
Indigo adds a tech-savvy, innovative edge while still maintaining the trustworthiness associated with blue tones.