Teal#004D4B
Coral#D97C6F
Sage#A3C6B8
Palette direction

Teal Warm Neutral Color Palette

This calm, professional palette balances a deep teal with warm and soft supporting hues to evoke trust and human care, complemented by warm neutral backgrounds and clear text for comfort and readability.

ComplementaryHealth Wellnessmedicalhealthcarecliniccalm
palette-preview.example
Health Wellness color direction

Teal Warm Neutral Color Palette

This calm, professional palette balances a deep teal with warm and soft supporting hues to evoke trust and human care, complemented by warm neutral backgrounds and clear text for comfort and readability.

Explore the color system
Logo contrast guide

Logo color pairings

ColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.

Logo Ivory #F4EFE7on Teal #004D4B8.5:1 Excellent
Logo Charcoal #2D2A26on Coral #D97C6F4.8:1 Strong
Logo Charcoal #2D2A26on Ivory #F4EFE712.5:1 Excellent
Logo Charcoal #2D2A26on Sage #A3C6B87.7:1 Excellent
Icon color
BackgroundTeal#004D4BTextIvory#F4EFE7
Primary Button8.48:1
AAA

Best for the main action users should notice first.

BackgroundCoral#D97C6FTextCharcoal#2D2A26
Secondary Button4.80:1
AA

Useful for softer choices and secondary paths.

BackgroundIvory#F4EFE7TextTeal#004D4B
Outlined Button8.48:1
AAA

Good for lower-emphasis actions on light surfaces.

BackgroundIvory#F4EFE7TextTeal#004D4B
Text Button8.48:1
AAA

A quiet action for links, navigation, and inline decisions.

Palette composition6 colorsComplementary color relationship
9:41Teal Warm Neutral Color Palette Color role balance
Complementary system
60% DominantNeutrals

Backgrounds, large surfaces, whitespace, and reading comfort.

30% SecondarySupport colors

Sections, secondary UI, illustrations, and repeated brand moments.

10% AccentMain colors

High-attention moments like primary actions and memorable highlights.

CTeal Warm Neutral Color PaletteHealth Wellness brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors combine a strong deep teal with a soft warm coral-orange, creating a calm and reassuring brand identity that is professional yet warm and accessible.

Clear roles create a consistent brand experience.

Color Roles and Usage Map

Assign existing palette colors to brand, typography, and interface roles.

Brand identity

LogoUsed for logo marks and core brand symbols.Teal #004D4B
HeadlineUsed for main titles and key messages.Coral #D97C6F
LinkUsed for links and interactive text.Teal #004D4B

Buttons

Primary Button
BackgroundTeal #004D4B
TextIvory #F4EFE7
Secondary Button
BackgroundCoral #D97C6F
TextCharcoal #2D2A26
Outlined Button
BackgroundTeal #004D4B
TextTeal #004D4B

Interface

TextDefault readable body text.Charcoal #2D2A26
Bg LightLight page or section background.Ivory #F4EFE7
Bg DarkDark page or section background.Ivory #F4EFE7
IconSmall interface icons and marks.Sage #A3C6B8
BorderCards, inputs, and component borders.Sage #A3C6B8
DividerSubtle separators between content.Sage #A3C6B8
OutlineFocus rings and emphasis outlines.Sage #A3C6B8

Palette Colors

A compact view of the brand, support, and neutral colors that make up this system.

Main (Brand) Colors

The main colors combine a strong deep teal with a soft warm coral-orange, creating a calm and reassuring brand identity that is professional yet warm and accessible.

PrimaryTeal

RolesLogo, Link, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text

Teal conveys professional trust and calmness, grounding the brand with a contemporary yet warm presence.

HEX#004D4B
RGB0, 77, 75
HSL178, 100, 15
CMYK100, 0, 3, 70
SecondaryCoral

RolesBtn Secondary Bg, Headline

Coral adds a soft, approachable warmth that humanizes and balances the depth of teal with a reassuring glow.

HEX#D97C6F
RGB217, 124, 111
HSL7, 58, 64
CMYK0, 43, 49, 15

Support Colors

Soft supporting colors extend warmth and balance, offering subtle accents that complement main colors without overpowering the palette.

Sage

RolesIcon, Border, Divider, Outline

Sage complements teal with a gentle, muted green that enhances calm and natural reassurance.

HEX#A3C6B8
RGB163, 198, 184
HSL156, 23, 71
CMYK18, 0, 7, 22

Neutral Colors

Utility colors for backgrounds, text, borders, and balance.

Ivory

RolesBg Light, Bg Dark, Btn Primary Text

HEX#F4EFE7
RGB244, 239, 231
HSL37, 37, 93
CMYK0, 2, 5, 4
Warm Taupe
HEX#B4A89F
RGB180, 168, 159
HSL26, 12, 66
CMYK0, 7, 12, 29
Charcoal

RolesText, Btn Secondary Text

HEX#2D2A26
RGB45, 42, 38
HSL34, 8, 16
CMYK0, 7, 16, 82

Export and Handoff

Copy palette values for design systems, websites, and client handoff.

Color tokens

Use these in CSS when you want every raw palette color available by name. Best for websites, landing pages, and design system variables.

Use when: you need the actual colors.
:root {
  --color-teal: #004D4B;
  --color-coral: #D97C6F;
  --color-sage: #A3C6B8;
  --color-ivory: #F4EFE7;
  --color-warm-taupe: #B4A89F;
  --color-charcoal: #2D2A26;
}

Role tokens

Use these in CSS when colors are assigned to practical jobs like text, buttons, borders, links, and backgrounds.

Use when: you need UI roles, not just swatches.
:root {
  --role-logo: #004D4B;
  --role-link: #004D4B;
  --role-btn-primary-bg: #004D4B;
  --role-btn-outlined-border: #004D4B;
  --role-btn-outlined-text: #004D4B;
  --role-btn-secondary-bg: #D97C6F;
  --role-headline: #D97C6F;
  --role-icon: #A3C6B8;
  --role-border: #A3C6B8;
  --role-divider: #A3C6B8;
  --role-outline: #A3C6B8;
  --role-bg-light: #F4EFE7;
  --role-bg-dark: #F4EFE7;
  --role-btn-primary-text: #F4EFE7;
  --role-text: #2D2A26;
  --role-btn-secondary-text: #2D2A26;
}

JSON

Use this structured palette data in apps, generators, plugins, or tools that need to read the palette programmatically.

Use when: a developer or app needs data.
{
    "teal": "#004D4B",
    "coral": "#D97C6F",
    "sage": "#A3C6B8",
    "ivory": "#F4EFE7",
    "warm-taupe": "#B4A89F",
    "charcoal": "#2D2A26"
}
Press Space to load new palette