Patients decide whether they trust a clinic website long before they read a single word about your services. Colour does most of that work in the first few seconds: it signals hygiene, calm, competence or, when it goes wrong, budget cuts and neglect. This guide gives you 10 ready-to-use healthcare website color schemes, complete with hex codes, the reasoning behind each combination, and the contrast ratios you need for appointment buttons, forms and older patients.
Unlike most palette roundups, every colour pairing below has been checked against WCAG 2.2 contrast requirements. You can copy the hex codes straight into your design system and know that your “Book an appointment” button will still be readable for a 72 year old on a sun-lit tablet.
Why Colour Matters More in Healthcare Than in Any Other Sector
Health websites carry a heavier emotional load than a shop or a portfolio. A visitor may be anxious, in pain, caring for a parent, or trying to book a scan at 11pm. Your palette has three jobs:
- Signal hygiene: generous white and near-white space reads as “clean surfaces, sterile instruments, nothing hidden”.
- Lower the heart rate: desaturated blues, greens and teals are consistently associated with calm and recovery, which is why they dominate clinical environments.
- Prove competence: restrained, consistent colour use reads as professional. Rainbow gradients and six accent colours read as amateur.
The psychology in one short table
| Colour family | What patients read into it | Best used for |
|---|---|---|
| Blue | Trust, expertise, sterility, stability | Primary brand colour, navigation, headings |
| Green | Healing, nature, prevention, balance | Wellness clinics, nutrition, rehab, GP practices |
| Teal | Modern medicine, hygiene with warmth | Dental, physio, health tech |
| White / off-white | Cleanliness, clarity, transparency | Backgrounds, cards, forms |
| Warm neutrals (sand, beige) | Comfort, human care, less institutional | Maternity, paediatrics, aesthetics, wellness |
| Purple / lavender | Empathy, discretion, mental wellbeing | Therapy, telehealth, women’s health |
| Red / coral | Urgency, emergency, warning | Emergency numbers, error states, tiny accents only |
Before You Pick Colours: The Accessibility Numbers You Must Hit
Healthcare audiences skew older and include people with diabetic retinopathy, cataracts, glaucoma and colour vision deficiency. Accessibility is not a nice-to-have here, and in many markets it is a legal requirement for public health providers. These are the minimums:
| Element | Minimum contrast (AA) | Our recommendation for health sites |
|---|---|---|
| Body text | 4.5:1 | 7:1 or higher (AAA) for 16px to 18px copy |
| Large text (24px+, or 19px+ bold) | 3:1 | 4.5:1 |
| Button label on button background | 4.5:1 | 5:1 minimum for the appointment CTA |
| Form field borders, icons, toggles | 3:1 | 3:1 against the page background, never a 1px pale grey line |
| Focus indicator | 3:1 against adjacent colours | 2px to 3px solid outline plus 2px offset |
| Error / success messages | 4.5:1 plus a non-colour cue | Colour + icon + text, always |
All contrast ratios quoted in this article are calculated against pure white (#FFFFFF) unless stated otherwise.
Designing for patients over 65
The ageing eye changes in specific, predictable ways, and your palette should respond to them:
- The lens yellows, which filters blue light. Pale blues and pale violets lose definition and can look grey or white. Never place light blue text on white.
- Contrast sensitivity drops, so a 4.5:1 ratio that feels comfortable to a 30 year old designer can feel washed out at 70. Aim for 7:1 on body copy.
- Blue-yellow discrimination weakens first. Avoid using blue versus violet, or yellow versus light green, as the only way to distinguish two states.
- Glare tolerance falls. Pure #FFFFFF full-bleed backgrounds with pure #000000 text can cause halation. A very slightly tinted background such as #F7FBFC with #16262E text is easier on the eye.
- Tap targets need colour help. A button should look like a button: solid fill, minimum 44x44px, no ghost buttons as the primary action.
The 10 Healthcare Website Color Schemes
Each palette below lists a role for every colour, so you can drop them into CSS variables without guessing. Ratios in brackets are against white.
1. Clinical Blue and White (the safe, universal choice)
- Deep Ocean #0B4F6C (8.9:1) : headings, navigation bar, footer
- Clinical Blue #0E6E8C (5.8:1) : primary CTA fill with white label
- Mist #E8F1F5 : alternating section backgrounds, cards
- Paper #FFFFFF : main background
- Ink #16262E (15.5:1) : body text
Why it works: blue plus white is the visual shorthand for medicine worldwide. The two-tone blue system means your CTA never fights the navigation for attention, and the mist tint stops long pages looking like a blank sheet of paper.
Best for: general practices, hospitals, diagnostic labs, insurers. Medical Color Palettes covers this in more depth.
2. Sage Clinic (green, natural, preventive)
- Forest #1F4D3D (9.6:1) : headings and nav
- Healing Green #2E7D5B (5.0:1) : CTA fill with white label
- Linen #F4F1EA : page background
- Stone #E3E0D8 : borders, dividers, disabled states
- Ink #1C2B25 (14.8:1) : body text
Why it works: green signals prevention and recovery rather than intervention, and the warm linen base removes the cold, institutional feel that pure white can carry. The stone neutral gives you visible form borders without resorting to weak grey lines.
Best for: nutrition, physiotherapy, integrative medicine, rehab clinics.
3. Navy and Muted Teal (authority with a modern edge)
- Navy #12263F (15.3:1) : body text and headings
- Deep Teal #1F7A6E (5.2:1) : CTA fill with white label
- Bright Teal #2A9D8F (3.3:1) : icons, underlines, chart accents, never small text
- Vapour #F2F7F6 : section backgrounds
- White #FFFFFF : cards and forms
Why it works: navy does the trust work, teal does the “we are not a 2009 hospital website” work. Note the discipline: the bright teal is decorative only because it fails text contrast on white. This is exactly where most medical sites break accessibility.
Best for: specialist consultants, cardiology, private hospital groups.
4. Warm Care (blue plus apricot, for families)
- Trust Blue #1D4E89 (8.4:1) : primary CTA and headings
- Apricot #F4A261 : highlight blocks, illustration fills, badge backgrounds
- Cream #FFF8F1 : soft section background
- Ink #16262E (15.5:1) : body text, and the required text colour on apricot (7.5:1 on #F4A261)
- White #FFFFFF : cards
Why it works: the apricot adds human warmth without the alarm signal of red. Critically, apricot only reaches 2.1:1 against white, so it can never hold white text. Use it as a background with dark ink on top.
Best for: paediatrics, family medicine, maternity, vaccination campaigns.
5. Lavender Calm (mental health and telehealth)
- Amethyst #5B4B8A (7.5:1) : CTA fill with white label, headings
- Lilac Wash #EDE9F6 : section backgrounds, quote blocks
- Soft Aqua #A8DADC : decorative shapes and illustration only
- Deep Plum Ink #221F33 (16:1) : body text
- White #FFFFFF : forms and cards
Why it works: purple reads as discreet and empathetic, which suits services where the patient feels vulnerable. The palette avoids the corporate blue that many people now associate with insurance paperwork.
Best for: psychology, psychiatry, counselling platforms, sleep clinics.
6. Mint and Charcoal (dental and cosmetic)
- Charcoal #2B3A42 (11.8:1) : headings, navigation, body text
- Clinical Mint #00796B (5.3:1) : CTA fill with white label
- Pale Mint #E0F2F1 : section backgrounds and card tints
- Frost #F6F9F9 : page background
- White #FFFFFF : cards, forms
Why it works: mint is the closest colour we have to “minty fresh clean”, and charcoal keeps it from feeling juvenile. The very low saturation of the pale mint makes before-and-after photography look accurate rather than filtered.
Best for: dental practices, orthodontics, aesthetic clinics, hygiene services.
7. Senior Care High-Contrast (maximum legibility)
- Pure White #FFFFFF and Soft Grey #F5F5F5 : backgrounds
- Near Black #1A1A1A (17.4:1) : body text at 18px minimum
- Institutional Blue #00457C (9.8:1) : headings, links, primary CTA
- Alert Red #B3261E (6.5:1) : emergency contact button and error text only
- Focus Amber #FFB000 : keyboard focus outline against dark and light surfaces
Why it works: every functional pairing clears AAA. Links are blue and underlined so they do not depend on colour perception. The amber focus ring is visible for users with protanopia and deuteranopia, unlike a blue outline on a blue button. Anyone digging further should read Healthcare Color Palette.
Best for: geriatric care, home care agencies, hearing and vision clinics, public health portals.
8. Wellness Neutrals (sand, olive, bark)
- Sand #EFE9E1 : page background
- Taupe #A89B8C : dividers, decorative rules, image frames
- Olive #4F5D2F (7.1:1 on white, 5.9:1 on sand) : CTA fill with white label
- Bark #3B352E (12.1:1 on white, 10:1 on sand) : body text
- White #FFFFFF : cards and forms so inputs pop off the sand background
Why it works: for wellness and longevity brands, clinical blue can feel cold and transactional. Warm neutrals feel premium and human, while the deep olive and bark keep the contrast figures respectable. Keep the taupe for non-text elements only.
Best for: dermatology, functional medicine, menopause clinics, wellness retreats.
9. HealthTech Indigo (digital health and SaaS)
- Indigo #303F9F (9.0:1) : primary CTA, headings, active nav
- Cloud #F4F6FB : app-like section backgrounds and table rows
- Slate Ink #101828 (17.7:1) : body text
- Signal Cyan #00B8D9 (2.4:1) : data visualisation, progress bars, decorative gradients
- White #FFFFFF : dashboards, cards
Why it works: indigo carries the credibility of blue with enough personality for a product brand. The cyan is deliberately restricted to charts and graphics, where the 3:1 non-text rule applies rather than the 4.5:1 text rule.
Best for: health startups, patient portals, remote monitoring, medical software.
10. Slate and Coral (modern practice with a human accent)
- Slate Blue #34495E (9.3:1) : navigation, headings, body text
- Coral #C0392B (5.4:1) : secondary or emergency CTA with white label, used sparingly
- Blush Tint #FDEDEA : alert and notice backgrounds
- Cool Grey #F7F9FA : section backgrounds
- White #FFFFFF : cards and forms
Why it works: a warm red accent creates real visual energy on an otherwise sober layout. The caution: red also means “error” and “emergency” in a medical context, so if coral is your booking button, your error messages need a different treatment (icon plus bold text plus a darker border).
Best for: urgent care, occupational health, sports medicine, walk-in clinics.
Quick Comparison: Which Palette for Which Practice
| # | Palette | Primary | CTA hex | CTA contrast (white label) | Best fit |
|---|---|---|---|---|---|
| 1 | Clinical Blue and White | #0B4F6C | #0E6E8C | 5.8:1 | GP, hospital, lab |
| 2 | Sage Clinic | #1F4D3D | #2E7D5B | 5.0:1 | Physio, nutrition, rehab |
| 3 | Navy and Muted Teal | #12263F | #1F7A6E | 5.2:1 | Specialists, private hospitals |
| 4 | Warm Care | #1D4E89 | #1D4E89 | 8.4:1 | Paediatrics, family, maternity |
| 5 | Lavender Calm | #5B4B8A | #5B4B8A | 7.5:1 | Therapy, telehealth |
| 6 | Mint and Charcoal | #2B3A42 | #00796B | 5.3:1 | Dental, aesthetics |
| 7 | Senior Care High-Contrast | #00457C | #00457C | 9.8:1 | Geriatric, home care, public health |
| 8 | Wellness Neutrals | #3B352E | #4F5D2F | 7.1:1 | Dermatology, wellness, longevity |
| 9 | HealthTech Indigo | #303F9F | #303F9F | 9.0:1 | Health startups, patient portals |
| 10 | Slate and Coral | #34495E | #C0392B | 5.4:1 | Urgent care, occupational health |
How to Apply a Palette Without Wrecking It
Use the 60 / 30 / 10 split
- 60% neutral: white, off-white or the lightest tint. This is your “clean surface”.
- 30% primary: the deep blue, green or navy used for navigation, headings, footer and image overlays.
- 10% accent: the CTA colour and nothing else. If your accent appears on more than a handful of elements, it stops meaning “click here”.
Appointment buttons: the five rules
- One primary button style across the whole site. Patients should recognise “book” instantly.
- Solid fill, white label, 5:1 minimum. No outline-only primary buttons.
- Hover and active states must also pass contrast, not just the default state. Darken by 8 to 12% rather than lightening.
- Disabled states should still be readable (aim for 3:1) so users understand why they cannot proceed.
- Never put a booking CTA in the same colour as your error messages.
Forms that people can actually complete
- Input borders at 3:1 against the background. A #E5E5E5 border on white is roughly 1.3:1 and effectively invisible.
- Labels above fields, in your ink colour, never placeholder-only labels.
- Required fields marked with text or an asterisk plus a legend, not only a red tint.
- Error state: a dark red text and icon plus a 2px border. Success: a dark green text and a check icon. Colour alone fails 1 in 12 men.
- Focus ring visible on every field, with 3:1 contrast against both the field and the page.
Status colours that pass for colour-blind users
| State | Text / icon hex | Background tint | Non-colour cue |
|---|---|---|---|
| Success | #1E6B4F | #E8F5EF | Check icon + “Confirmed” |
| Warning | #8A5A00 | #FFF6E5 | Triangle icon + “Please check” |
| Error | #B3261E | #FDEDEA | Cross icon + explicit fix instruction |
| Info | #0E6E8C | #E8F1F5 | “i” icon + label |
Colours and Combinations to Avoid on a Healthcare Site
- Saturated red as a brand colour. It raises perceived urgency and collides with emergency and error meanings.
- Neon or acid green. Reads as sports supplement, not clinic.
- Light grey body text (#999 and lighter). It fails contrast and is the single most common accessibility error we find in medical site audits.
- Dark backgrounds behind long medical copy. Dark mode is fine as an option, but light-on-dark reduces reading speed for many users with astigmatism.
- Blue links on a blue background, or any link that relies on hue alone. Underline them.
- Red and green side by side for accept/decline or available/unavailable slots, without icons or labels.
- Full-width gradients behind text. Contrast changes across the block and one side always fails.
A 7-Point Colour Check Before You Launch
- Run every text and background pair through a contrast checker and record the ratio in your design system documentation.
- Simulate deuteranopia, protanopia and tritanopia on the booking page and the appointment calendar.
- View the homepage on a phone at full brightness outdoors.
- Zoom the browser to 200% and confirm nothing overlaps or loses its background.
- Tab through the whole booking flow with a keyboard and confirm the focus ring is visible on every step.
- Print the appointment confirmation page in greyscale and check it is still understandable.
- Ask two people over 65 to book a test appointment and watch where they hesitate.
What Is Working in Health Web Design Right Now
Across the projects we are shipping into 2027, three colour habits are separating credible clinics from the rest:
- Two-tone primaries. A dark shade for structure and a mid shade for action, rather than one brand colour doing both jobs badly.
- Warm neutrals replacing cold greys. Sand and bone tints make a medical layout feel less like a waiting room and more like a clinic people choose.
- Contrast tokens baked into the design system. Teams now define “text-on-primary” and “border-default” tokens with recorded ratios, so accessibility survives the next redesign.
FAQ: Healthcare Website Color Schemes
What is the best colour for a healthcare website?
A deep, desaturated blue used with generous white space remains the most reliable choice because it is universally read as trustworthy and hygienic. Blue is a default rather than a rule: green suits preventive and wellness services, teal suits dental and physio, and purple suits mental health. What matters more than the hue is contrast and consistency.
How many colours should a medical website use?
Three to five. One primary, one action colour, one or two neutrals for backgrounds, and one ink colour for text. Add semantic colours for success, warning and error, but treat those as functional rather than brand colours.
What contrast ratio does an appointment button need?
The WCAG AA minimum for a button label is 4.5:1, but we recommend at least 5:1 for the main booking CTA, and the button itself should have at least 3:1 contrast against the page background so its shape is perceivable. Hover, focus and disabled states all need checking, not just the default.
Is red ever acceptable on a clinic website?
Yes, in small doses. A dark red such as #B3261E works for an emergency phone number, a closure notice or an error message. Avoid it as a large-area brand colour, and never use the same red for both a booking CTA and an error state.
Which palettes are best for older patients?
Palette 7 (Senior Care High-Contrast) is built for it, but any of the ten can be adapted by raising body text to 18px, targeting 7:1 contrast on copy, underlining links, and avoiding pale blue or pale violet text. Remember that the ageing lens filters blue light, so light blues lose definition first.
Should a healthcare website offer dark mode?
Offer it as a user choice if your audience skews younger or if you run a patient portal used at night. Do not make dark mode the default for a public clinic site, and make sure every colour token has a tested dark equivalent rather than simply inverting the palette. The Best 15 Hospital Color Palette Combinations is a useful companion to this.
Do these colour palettes work for colour-blind visitors?
The pairings above are chosen for luminance contrast, which is what protects colour-blind users, since luminance difference survives every type of colour vision deficiency. The remaining risk is meaning conveyed by hue alone, so always pair colour with an icon, a label or an underline.
Need Help Applying This to Your Practice?
Choosing hex codes is the easy part. Turning them into a consistent, accessible, conversion-focused website with a booking flow patients complete on the first attempt is where most medical practices lose ground. At Branded Web Design we build healthcare websites with accessibility baked into the design system from day one, including documented contrast tokens, tested form patterns and appointment CTAs that perform. Get in touch for a colour and accessibility audit of your current site.