What colors are in the Vitals Teal palette?

The Vitals Teal palette has 5 colors: #0D2830, #155E63, #3BA9AE, #F26D6D, #EDF7F7.

Where can I use this palette?

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

Is the Vitals Teal palette accessible?

Its darkest and lightest colors have a contrast ratio of 14.12:1. 4 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 Vitals Teal palette?

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

Text #0D2830 Graphite Secondary #155E63 Dark Slate Gray Accent #3BA9AE Light Sea Green Primary #F26D6D Neon Coral Surface #EDF7F7 White Smoke

Vitals Teal

Calm Clinical dashboards 5 colors

Teal reads as "monitoring", not "alarm". The single coral is reserved strictly for critical states, so red means red and nothing else does.

Open in generator All palettes

Text Graphite — #0D2830

Secondary Dark Slate Gray — #155E63

Accent Light Sea Green — #3BA9AE

Primary Neon Coral — #F26D6D

Surface White Smoke — #EDF7F7

Contrast matrix

Text on Surface 14.12 AAA

Primary on Surface 2.68 Fail

Text on Secondary 2.06 Fail

Surface on Primary 2.68 Fail

Accent on Text 5.48 AA

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: #0D2830;
  --secondary: #155E63;
  --accent: #3BA9AE;
  --primary: #F26D6D;
  --surface: #EDF7F7;
}

$vitals-teal-text: #0D2830;
$vitals-teal-secondary: #155E63;
$vitals-teal-accent: #3BA9AE;
$vitals-teal-primary: #F26D6D;
$vitals-teal-surface: #EDF7F7;

// tailwind.config.js — theme.extend.colors
colors: {
  'vitals-teal': {
    'text': '#0D2830',
    'secondary': '#155E63',
    'accent': '#3BA9AE',
    'primary': '#F26D6D',
    'surface': '#EDF7F7',
  },
}

{
    "vitals-teal": {
        "text": {
            "value": "#0D2830",
            "type": "color"
        },
        "secondary": {
            "value": "#155E63",
            "type": "color"
        },
        "accent": {
            "value": "#3BA9AE",
            "type": "color"
        },
        "primary": {
            "value": "#F26D6D",
            "type": "color"
        },
        "surface": {
            "value": "#EDF7F7",
            "type": "color"
        }
    }
}

{
    "text": "#0D2830",
    "secondary": "#155E63",
    "accent": "#3BA9AE",
    "primary": "#F26D6D",
    "surface": "#EDF7F7"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#0D2830
#155E63
#3BA9AE
#F26D6D
#EDF7F7

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.

Vitals Teal

Contrast matrix

Export tokens

How the roles work

Related palettes