Healthcare Blue Color Palette
A calming healthcare palette evoking trust and cleanliness. Perfect for medical, pharma, and wellness brands.
Medical Dark
HEX: #0c4a6e
RGB: rgb(12, 74, 110)
HSL: hsl(202, 80%, 24%)
Healthcare Deep
HEX: #0284c7
RGB: rgb(2, 132, 199)
HSL: hsl(200, 98%, 39%)
Healthcare Blue
HEX: #0ea5e9
RGB: rgb(14, 165, 233)
HSL: hsl(199, 89%, 48%)
Care Light
HEX: #7dd3fc
RGB: rgb(125, 211, 252)
HSL: hsl(199, 95%, 74%)
Health Surface
HEX: #e0f2fe
RGB: rgb(224, 242, 254)
HSL: hsl(204, 94%, 94%)
CSS Variables
:root {
--healthcare-blue-1: #0c4a6e;
--healthcare-blue-2: #0284c7;
--healthcare-blue-3: #0ea5e9;
--healthcare-blue-4: #7dd3fc;
--healthcare-blue-5: #e0f2fe;
}Tailwind CSS Config
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'healthcare-blue': {
'100': '#0c4a6e',
'200': '#0284c7',
'300': '#0ea5e9',
'400': '#7dd3fc',
'500': '#e0f2fe',
},
},
},
},
}Use Cases
Hospitals
Telehealth apps
Pharma companies
Mental health platforms
Related Palettes
Frequently Asked Questions
Why do healthcare brands prefer blue?▾
Blue conveys cleanliness, trust, and calm — essential qualities for healthcare. It reduces anxiety and is associated with medical professionals and sterile environments.
Should healthcare UIs use warm or cool colors?▾
Cool blues are standard for clinical settings. For patient-facing wellness apps, warmer colors like teal or soft green can feel more approachable and less clinical.