What colors are in the Clinical Calm palette?

The Clinical Calm palette has 5 colors: #0F2A2E, #17575E, #4FA8A0, #BFE3DC, #F2FAF8.

Where can I use this palette?

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

Is the Clinical Calm palette accessible?

Its darkest and lightest colors have a contrast ratio of 14.24:1. 5 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 Clinical Calm palette?

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

Text #0F2A2E Graphite Accent #17575E Dark Slate Gray Primary #4FA8A0 Cadet Blue Secondary #BFE3DC Seafoam Surface #F2FAF8 Off White

Clinical Calm

Calm Healthcare products 5 colors

Low-chroma teals lower the temperature of anxious moments. Surfaces stay near-white; the darkest tone is reserved for text.

Open in generator All palettes

Text Graphite — #0F2A2E

Accent Dark Slate Gray — #17575E

Primary Cadet Blue — #4FA8A0

Secondary Seafoam — #BFE3DC

Surface Off White — #F2FAF8

Contrast matrix

Text on Surface 14.24 AAA

Primary on Surface 2.66 Fail

Text on Secondary 10.95 AAA

Surface on Primary 2.66 Fail

Accent on Text 1.84 Fail

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: #0F2A2E;
  --accent: #17575E;
  --primary: #4FA8A0;
  --secondary: #BFE3DC;
  --surface: #F2FAF8;
}

$clinical-calm-text: #0F2A2E;
$clinical-calm-accent: #17575E;
$clinical-calm-primary: #4FA8A0;
$clinical-calm-secondary: #BFE3DC;
$clinical-calm-surface: #F2FAF8;

// tailwind.config.js — theme.extend.colors
colors: {
  'clinical-calm': {
    'text': '#0F2A2E',
    'accent': '#17575E',
    'primary': '#4FA8A0',
    'secondary': '#BFE3DC',
    'surface': '#F2FAF8',
  },
}

{
    "clinical-calm": {
        "text": {
            "value": "#0F2A2E",
            "type": "color"
        },
        "accent": {
            "value": "#17575E",
            "type": "color"
        },
        "primary": {
            "value": "#4FA8A0",
            "type": "color"
        },
        "secondary": {
            "value": "#BFE3DC",
            "type": "color"
        },
        "surface": {
            "value": "#F2FAF8",
            "type": "color"
        }
    }
}

{
    "text": "#0F2A2E",
    "accent": "#17575E",
    "primary": "#4FA8A0",
    "secondary": "#BFE3DC",
    "surface": "#F2FAF8"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#0F2A2E
#17575E
#4FA8A0
#BFE3DC
#F2FAF8

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.

Clinical Calm

Contrast matrix

Export tokens

How the roles work

Related palettes