The best colours for therapy websites are muted, natural tones such as sage green, soft blue, warm neutrals and dusky lavender, set on a warm off-white rather than stark white. Use one main colour, one or two supporting tones and dark text that meets WCAG's 4.5:1 contrast ratio, and avoid bright red, neon and clinical white.
What are the best colours for a therapist website?
In our experience, the palettes that work best for counsellors, psychotherapists and psychologists share three traits:
- —Muted rather than saturated. Colours with a little grey or brown in them feel calmer than pure, bright versions.
- —Natural references. Greens, blues, stone, sand, clay and dusk tones echo the outdoors, which most people find settling.
- —A warm, soft background. A slightly warm off-white like #F6F4EF feels gentler than pure #FFFFFF.
Beyond that, there's real room for personality. A trauma specialist, a couples therapist and a child psychologist shouldn't all look the same, and the palettes later in this guide reflect that.
Colour psychology for therapists: what do different colours signal?
A note of honesty first. Much of what's written about colour psychology is overstated, and colour meanings vary between cultures and individuals. Someone may associate a particular green with a hospital they'd rather forget. So treat the following as common associations in a UK context, not laws:
| Colour | Common associations | How to use it on a therapy site |
|---|---|---|
| Sage and muted green | Nature, growth, balance, rest | A strong primary for most counselling practices; pairs well with warm neutrals |
| Soft and dusty blue | Calm, trust, clarity, stability | Good for CBT, anxiety and psychology services; avoid icy or corporate blues |
| Deep navy | Expertise, seriousness, reliability | Suits clinics, psychologists and training providers; soften it with warm accents |
| Teal | Balance, freshness, clarity | Works for hypnotherapy and wellbeing; keep it deep enough for text contrast |
| Terracotta and clay | Warmth, earthiness, connection | Lovely for couples and relationship work; use as a primary or accent |
| Lavender and dusk purple | Gentleness, reflection, quiet | Suits grief, perinatal and reflective practices; keep it muted |
| Warm neutrals (sand, stone, oat) | Comfort, safety, simplicity | Ideal backgrounds and supporting tones in almost any palette |
| Yellow and ochre | Optimism, warmth, energy | Use sparingly as an accent; bright yellow can feel agitating in large areas |
| Red | Urgency, danger, alarm, passion | Avoid as a main colour; even error messages can use a softer, darker red |
12 therapy website colour palettes by specialism (with hex codes)
Each palette below has four colours: a background, a primary (for headings, links and buttons), a text colour and an accent. We've checked the contrast of each. 'Text' is the ratio of the text colour on the background; 'Primary' is the primary colour on the background; 'Button' is white text on the primary colour. All of them pass WCAG 2.2 AA for normal text (4.5:1).
| Palette (specialism) | Background | Primary | Text | Accent | Contrast (text / primary / button) |
|---|---|---|---|---|---|
| Grounded sage (trauma, EMDR) | #F6F4EF | #4F6358 | #2B2F2C | #C9A27E | 12.4 / 5.9 / 6.4 |
| Steady blue (anxiety, CBT) | #F5F8FA | #3B6585 | #1F2A33 | #A9C6D9 | 13.7 / 5.8 / 6.2 |
| Warm clay (couples, relationships) | #FBF6F1 | #9A4F2E | #3A2A22 | #E3B9A0 | 12.7 / 5.5 / 5.9 |
| Gentle meadow (children, families) | #FFFBF2 | #2F6E60 | #26323A | #F2C46D | 12.7 / 5.8 / 6.0 |
| Clinical navy, softened (psychology clinics) | #FAFAF7 | #1F3A5F | #1A1F26 | #8FB3A8 | 15.8 / 11.0 / 11.5 |
| Dusk lavender (grief, bereavement) | #F7F5F9 | #5E5478 | #2A2633 | #C8BEDB | 13.6 / 6.4 / 7.0 |
| Quiet teal (hypnotherapy, wellbeing) | #F3F8F7 | #2F6F73 | #1E2B2C | #E8D8B8 | 13.6 / 5.4 / 5.8 |
| Soft blush (eating disorders, body image) | #FCF7F5 | #875757 | #33292A | #E7C8C0 | 13.3 / 5.6 / 5.9 |
| Charcoal and moss (men's therapy, addiction) | #F4F4F1 | #3D4A3A | #1C1F1B | #B88A4E | 15.1 / 8.5 / 9.4 |
| Ink and gold (trainers, supervisors, CPD) | #FBFAF6 | #23395B | #1B2230 | #C79A3B | 15.3 / 11.1 / 11.6 |
| Calm slate (neurodivergent-affirming) | #FAF8F3 | #4A5D7A | #22262E | #E0B872 | 14.3 / 6.3 / 6.7 |
| Mauve and peach (perinatal, parenting) | #FDF8F4 | #6B5B73 | #2E2A30 | #D9B8A6 | 13.4 / 5.9 / 6.2 |
Notice the accents. Every accent above fails as a text colour on its background, with ratios between roughly 1.3:1 and 2.8:1. That's by design. Accents are for backgrounds of cards, dividers, illustrations and highlights, never for words people need to read.
Want to see these palettes in context, with copy-ready hex codes and contrast checks for each combination? Browse the therapist colour palettes →
How do you use the 60-30-10 rule on a therapy website?
The 60-30-10 rule is an interior design rule of thumb that translates well to websites. Roughly 60% of what people see is your dominant colour, 30% a secondary colour and 10% an accent.
- —60%: your background. On a therapy site that's usually the warm off-white, plus generous white space.
- —30%: your primary and text colours. Headings, body text, the footer, perhaps one full-width section in the primary colour.
- —10%: your accent. Highlights, a soft card background, an illustration, a small divider.
The percentages aren't exact, and nobody's measuring. The point is restraint. Most cluttered-looking therapy websites don't have the wrong colours; they have too many colours used in roughly equal amounts, so nothing feels settled and nothing stands out.
One practical tip: give your main button a single, consistent colour, usually the primary, and use it for nothing else that looks clickable. When the 'Book a free call' button is the only thing on the page in that colour, people find it without having to hunt.
What colour contrast does a therapist website need?
WCAG 2.2, the accessibility standard most UK organisations work to, sets clear minimums at level AA:
| What | Minimum contrast (AA) | Notes |
|---|---|---|
| Body text and small text | 4.5:1 | Applies to paragraphs, form labels, captions and links |
| Large text | 3:1 | 24px and above, or 18.66px and above if bold |
| Buttons, form borders, icons that convey meaning | 3:1 | Against the colours next to them |
| Enhanced (AAA) body text | 7:1 | A good target for body copy if your palette allows it |
Some reference points from our own checks: pure red (#FF0000) on white is about 4.0:1, which fails for body text. Mid-grey #999999 on white is about 2.8:1, a clear fail and very common on therapy sites. The lightest grey that passes on white is around #767676, at roughly 4.5:1.
Contrast isn't only a legal or technical matter. Someone reading your fees page on a phone, in sunlight, through tears, needs dark text on a light background. That's the brief.
Two more accessibility points: never rely on colour alone to convey meaning (a form error should say what's wrong in words, not just turn red), and check that your links are distinguishable from body text, ideally with an underline.
Why should therapists avoid red, neon and clinical white?
Red and bright orange
Red is the colour of warnings, sale banners and emergency signage. On a site visited by people who may already feel anxious or unsafe, large areas of red can raise arousal rather than settle it. If red is part of your brand, use a deep, warm version like brick or rust, in small amounts.
Neon and highly saturated colours
Electric blue, lime green and hot pink are tiring to look at and feel more like a tech start-up or nightclub than a consulting room. They're also hard to pair with readable text.
Clinical white and cold grey
Pure white backgrounds with cool grey text and a single blue can make a practice feel like an NHS letter or a dental surgery. That's fine if you're a large clinic that wants to look institutional, but most private practitioners want to feel more human. Warming the white slightly and darkening the text makes a noticeable difference.
When a therapist tells us their site feels cold but they can't say why, it's almost always pure white, pale grey text and a blue that's slightly too bright. Change those three things and the whole site exhales.
Adam Watters, Founder, Psyche Creative
What are the most common colour mistakes on therapy websites?
- —Pale text for a 'soft' look. It feels gentle to the designer and illegible to the visitor.
- —Too many colours. A different colour for every section or service makes the site feel scattered.
- —Text over busy photos. Even with a dark overlay, words over images often fail contrast on some part of the photo.
- —Inconsistent buttons. Three different button colours mean none of them signals 'this is the next step'.
- —Brand colours chosen from a logo alone. A logo colour that looks great at 40px may be overwhelming as a full-width background.
- —Off-brand print and social. Your leaflets, Instagram templates and email signature should use the same hex codes as your website.
- —Ignoring dark mode. You don't need a full dark theme, but check your logo and images don't vanish if a visitor's phone forces dark colours.
How do you choose a colour palette for your counselling practice?
A simple process we use with clients:
- —Write down how you'd like a new client to feel on landing: for example 'safe, unhurried, understood'.
- —Pick one primary colour that matches that feeling and darken it until it passes 4.5:1 on your background.
- —Choose a warm off-white background and a near-black text colour with a hint of your primary in it, rather than pure black.
- —Add one accent, a lighter or complementary tone, for decoration only.
- —Test it on a real page with real content, on your phone, outdoors.
- —Record the hex codes in a brand style guide so every future design uses the same values.
Colour works hand in hand with type. A calm palette with a heavy, shouty font still feels loud, and the reverse is also true.
Pair your palette with fonts that feel the same way. Read: Best fonts for therapist websites →
Colour is one part of a wider visual identity. Our branding guide covers the decisions that come before it. Read: Branding for therapists →
If you'd like a palette chosen, tested for accessibility and built into a calm, booking-first website, we can help. See our therapist web design service →
Frequently asked questions
What colours are best for a therapy website?
Muted, natural colours such as sage green, soft blue, warm neutrals, clay and dusky lavender work well for most practices. Set them on a warm off-white background with dark text that meets a 4.5:1 contrast ratio.
What colour is most calming for a counselling website?
Muted greens and soft blues are commonly associated with calm and trust, but colour meanings vary between people. The overall restraint of a palette matters more than any single colour.
Should a therapist website have a white background?
A slightly warm off-white, such as #F6F4EF or #FAF8F3, usually feels gentler than pure white while keeping excellent contrast. Pure white is fine, but it can feel clinical when paired with cool greys.
What contrast ratio does a therapy website need?
WCAG 2.2 AA requires at least 4.5:1 for body text and 3:1 for large text, buttons and meaningful icons. Aim for 7:1 on body text if your palette allows it.
Can I use red on my therapy website?
Use it sparingly, if at all. Bright red signals urgency and danger, so if it's part of your brand, choose a deep brick or rust tone and keep it to small details.
Adam works with UK therapy practices, EMDR trainers and mental health organisations on websites, social media and digital campaigns. He started Psyche Creative to give clinicians a marketing partner who understands the sector — and won't compromise on professional standards to get results.
