What colors are in the Coral Wellness palette?

The Coral Wellness palette has 5 colors: #211815, #3D2E28, #E58B78, #F4C3B5, #FBF0EC.

Where can I use this palette?

It's a Muted palette — well suited to editorial layouts, minimal ui, photography portfolios, modern brands.

Is the Coral Wellness palette accessible?

Its darkest and lightest colors have a contrast ratio of 15.57:1. 6 color pairs in it meet WCAG AA for text.

How do I use this palette in CSS?

Copy the CSS custom properties (:root variables) from the Export section, or grab any single hex with one click.

Can I export the Coral Wellness palette?

Yes — export to CSS, SCSS, Tailwind config or JSON, or copy all hex codes at once.

Text #211815 Graphite Secondary #3D2E28 Bistre Primary #E58B78 Dark Salmon Accent #F4C3B5 Baby Pink Surface #FBF0EC Linen

Coral Wellness

Calm Wellbeing apps 5 colors

Wellbeing without the clinical teal: a warm coral does the caring and a blush softens the edges, while red is kept out of the way so it can still mean stop. Near-white surfaces keep it gentle.

Open in generator All palettes

Text Graphite — #211815

Secondary Bistre — #3D2E28

Primary Dark Salmon — #E58B78

Accent Baby Pink — #F4C3B5

Surface Linen — #FBF0EC

Contrast matrix

Text on Surface 15.57 AAA

Primary on Surface 2.26 Fail

Text on Secondary 1.34 Fail

Surface on Primary 2.26 Fail

Accent on Text 11.04 AAA

Ratios are WCAG 2 contrast between the roles as assigned above. AA needs 4.5:1 for body text, 3:1 for large text.

Export tokens

:root {
  --text: #211815;
  --secondary: #3D2E28;
  --primary: #E58B78;
  --accent: #F4C3B5;
  --surface: #FBF0EC;
}

$coral-wellness-text: #211815;
$coral-wellness-secondary: #3D2E28;
$coral-wellness-primary: #E58B78;
$coral-wellness-accent: #F4C3B5;
$coral-wellness-surface: #FBF0EC;

// tailwind.config.js — theme.extend.colors
colors: {
  'coral-wellness': {
    'text': '#211815',
    'secondary': '#3D2E28',
    'primary': '#E58B78',
    'accent': '#F4C3B5',
    'surface': '#FBF0EC',
  },
}

{
    "coral-wellness": {
        "text": {
            "value": "#211815",
            "type": "color"
        },
        "secondary": {
            "value": "#3D2E28",
            "type": "color"
        },
        "primary": {
            "value": "#E58B78",
            "type": "color"
        },
        "accent": {
            "value": "#F4C3B5",
            "type": "color"
        },
        "surface": {
            "value": "#FBF0EC",
            "type": "color"
        }
    }
}

{
    "text": "#211815",
    "secondary": "#3D2E28",
    "primary": "#E58B78",
    "accent": "#F4C3B5",
    "surface": "#FBF0EC"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#211815
#3D2E28
#E58B78
#F4C3B5
#FBF0EC

Download for Procreate

How the roles work

SurfaceThe lightest color — page and card backgrounds.

TextThe darkest color — body text and high-contrast UI.

PrimaryThe most chromatic middle — buttons, links, the one color that pushes.

AccentThe second most chromatic — badges, highlights, states.

SecondaryEverything else — fills, borders, supporting surfaces.

Coral Wellness

Contrast matrix

Export tokens

How the roles work

Related palettes