industryColor Scheme

Healthcare Clean

A clean and trustworthy palette designed for healthcare applications. Light backgrounds with calming blues inspire confidence and clarity.

#ffffff
#f8fafc
#2563eb
#64748b
#10b981

Color Breakdown

Role

background

Name

White

Hex

#ffffff

Tailwind

bg-white

Role

surface

Name

Slate 50

Hex

#f8fafc

Tailwind

bg-slate-50

Role

primary

Name

Blue 600

Hex

#2563eb

Tailwind

text-blue-600

Role

secondary

Name

Slate 500

Hex

#64748b

Tailwind

text-slate-500

Role

accent

Name

Emerald 500

Hex

#10b981

Tailwind

bg-emerald-500

Live Preview

Welcome Back

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

Design Rationale

Clean whites and soft slates establish clinical trust, while blue conveys reliability. The emerald accent adds a touch of health and vitality.

Use Cases

Hospital websitesTelehealth platformsMedical dashboards

CSS Variables

CSS
:root {
  --background: #ffffff;
  --surface: #f8fafc;
  --primary: #2563eb;
  --secondary: #64748b;
  --accent: #10b981;
}

Tailwind Config

JavaScript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'healthcare-clean': {
  'background': '#ffffff',  // bg-white
  'surface': '#f8fafc',  // bg-slate-50
  'primary': '#2563eb',  // text-blue-600
  'secondary': '#64748b',  // text-slate-500
  'accent': '#10b981',  // bg-emerald-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 use blue in healthcare design?
Blue is universally associated with trust, calm, and professionalism, making it ideal for medical interfaces.