Teal#008080
Coral#FF6B61
Slate#556B7A
Morganite Pink#C7A9A1
Dusty Blue#7895A1
Palette direction

Teal Coral Slate Color Palette

This palette uses a harmonious triadic scheme to balance credibility, warmth, and approachability for Pilates professionals. The main colors establish trust and optimism while the support colors provide subtle sophistication and calm, complemented by neutrals that enhance readability and a clean, minimal feel.

Split ComplementaryHealth Wellnesstrustgrowthconnectionmentorship
palette-preview.example
Health Wellness color direction

Teal Coral Slate Color Palette

This palette uses a harmonious triadic scheme to balance credibility, warmth, and approachability for Pilates professionals. The main colors establish trust and optimism while the support colors provide subtle sophistication and calm, complemented by neutrals that enhance readability and a clean, minimal feel.

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 White #FFFFFFon Slate #556B7A5.6:1 Strong
Logo Charcoal #2E2E2Eon Coral #FF6B614.9:1 Strong
Logo White #FFFFFFon Teal #0080804.8:1 Strong
Logo Charcoal #2E2E2Eon White #FFFFFF13.6:1 Excellent
Icon color
BackgroundTeal#008080TextWhite#FFFFFF
Primary Button4.77:1
AA

Best for the main action users should notice first.

BackgroundCoral#FF6B61TextCharcoal#2E2E2E
Secondary Button4.87:1
AA

Useful for softer choices and secondary paths.

BackgroundWhite#FFFFFFTextCoral#FF6B61
Outlined Button2.79:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundWhite#FFFFFFTextCoral#FF6B61
Text Button2.79:1
Low

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

Palette composition8 colorsSplit Complementary color relationship
9:41Teal Coral Slate Color Palette Color role balance
Split 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 Coral Slate Color PaletteHealth Wellness brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main triadic colors combine a fresh Teal, an optimistic Coral, and a grounded Slate to express trust, warmth, and professionalism in a balanced and memorable way.

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 #008080
HeadlineUsed for main titles and key messages.Slate #556B7A
LinkUsed for links and interactive text.Coral #FF6B61

Buttons

Primary Button
BackgroundTeal #008080
TextWhite #FFFFFF
Secondary Button
BackgroundCoral #FF6B61
TextCharcoal #2E2E2E
Outlined Button
BackgroundTeal #008080
TextCoral #FF6B61

Interface

TextDefault readable body text.Charcoal #2E2E2E
Bg LightLight page or section background.White #FFFFFF
Bg DarkDark page or section background.Ivory #F4F4F4
IconSmall interface icons and marks.Morganite Pink #C7A9A1
BorderCards, inputs, and component borders.Morganite Pink #C7A9A1
DividerSubtle separators between content.Dusty Blue #7895A1
OutlineFocus rings and emphasis outlines.Dusty Blue #7895A1

Palette Colors

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

Main (Brand) Colors

The main triadic colors combine a fresh Teal, an optimistic Coral, and a grounded Slate to express trust, warmth, and professionalism in a balanced and memorable way.

PrimaryTeal

RolesLogo, Btn Primary Bg, Btn Outlined Border

Teal conveys stability, trust, and a fresh modern feel ideal for a credible yet inviting wellness brand.

HEX#008080
RGB0, 128, 128
HSL180, 100, 25
CMYK100, 0, 0, 50
SecondaryCoral

RolesLink, Btn Secondary Bg, Btn Outlined Text

Coral introduces warmth, energy, and optimism, making the brand approachable and human.

HEX#FF6B61
RGB255, 107, 97
HSL4, 100, 69
CMYK0, 58, 62, 0
TertiarySlate

RolesHeadline

Slate adds grounded sophistication and professionalism, anchoring the palette with a calm yet confident tone.

HEX#556B7A
RGB85, 107, 122
HSL204, 18, 41
CMYK30, 12, 0, 52

Support Colors

The subdued Morganite Pink and Dusty Blue support colors quietly accent the main palette, adding softness and balance without competing, thus enhancing the brand's welcoming and elevated character.

Morganite Pink

RolesIcon, Border

Morganite Pink complements Coral by adding a muted softness that supports warmth without overwhelming.

HEX#C7A9A1
RGB199, 169, 161
HSL13, 25, 71
CMYK0, 15, 19, 22
Dusty Blue

RolesDivider, Outline

Dusty Blue balances the stronger teals and corals with a gentle, calming presence that reinforces professionalism.

HEX#7895A1
RGB120, 149, 161
HSL198, 18, 55
CMYK25, 7, 0, 37

Neutral Colors

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

White

RolesBg Light, Btn Primary Text

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Ivory

RolesBg Dark

HEX#F4F4F4
RGB244, 244, 244
HSL0, 0, 96
CMYK0, 0, 0, 4
Charcoal

RolesText, Btn Secondary Text

HEX#2E2E2E
RGB46, 46, 46
HSL0, 0, 18
CMYK0, 0, 0, 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: #008080;
  --color-coral: #FF6B61;
  --color-slate: #556B7A;
  --color-morganite-pink: #C7A9A1;
  --color-dusty-blue: #7895A1;
  --color-white: #FFFFFF;
  --color-ivory: #F4F4F4;
  --color-charcoal: #2E2E2E;
}

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: #008080;
  --role-btn-primary-bg: #008080;
  --role-btn-outlined-border: #008080;
  --role-link: #FF6B61;
  --role-btn-secondary-bg: #FF6B61;
  --role-btn-outlined-text: #FF6B61;
  --role-headline: #556B7A;
  --role-icon: #C7A9A1;
  --role-border: #C7A9A1;
  --role-divider: #7895A1;
  --role-outline: #7895A1;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-bg-dark: #F4F4F4;
  --role-text: #2E2E2E;
  --role-btn-secondary-text: #2E2E2E;
}

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": "#008080",
    "coral": "#FF6B61",
    "slate": "#556B7A",
    "morganite-pink": "#C7A9A1",
    "dusty-blue": "#7895A1",
    "white": "#FFFFFF",
    "ivory": "#F4F4F4",
    "charcoal": "#2E2E2E"
}
Press Space to load new palette