Deep Teal#1f4a4d
Coral#ef6f51
Dark Slate#36605a
Warm Gray#c2bab3
Soft Slate#798b8d
Palette direction

Teal Coral Balanced Color Palette

This palette draws from a deep, organic teal and coral tone juxtaposed with muted greys and off-whites to create a balanced, sophisticated look. The main colors establish a strong identity with a refreshing yet grounded feeling, while the support colors expand versatility without overpowering. The neutrals ensure readability and clarity, emphasizing content and interface elements effectively.

ComplementaryCreativetealcoralbalancedmodern
palette-preview.example
Creative color direction

Teal Coral Balanced Color Palette

This palette draws from a deep, organic teal and coral tone juxtaposed with muted greys and off-whites to create a balanced, sophisticated look. The main colors establish a strong identity with a refreshing yet grounded feeling, while the support colors expand versatility without overpowering. The neutrals ensure readability and clarity, emphasizing content and interface elements effectively.

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 White #F6F6F2on Deep Teal #1F4A4D9.0:1 Excellent
Logo Charcoal Black #222625on Coral #EF6F515.1:1 Strong
Logo Charcoal Black #222625on Ivory White #F6F6F214.1:1 Excellent
Logo Charcoal Black #222625on Light Gray #D7D2CC10.2:1 Excellent
Icon color
BackgroundDeep Teal#1f4a4dTextIvory White#f6f6f2
Primary Button9.04:1
AAA

Best for the main action users should notice first.

BackgroundCoral#ef6f51TextCharcoal Black#222625
Secondary Button5.15:1
AA

Useful for softer choices and secondary paths.

BackgroundIvory White#f6f6f2TextCoral#ef6f51
Outlined Button2.74:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundIvory White#f6f6f2TextDeep Teal#1f4a4d
Text Button9.04:1
AAA

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

Palette composition8 colorsComplementary color relationship
9:41Teal Coral Balanced 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 Coral Balanced Color PaletteCreative brand direction ColorFly.design
Strategic palette preview

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.Deep Teal #1f4a4d
HeadlineUsed for main titles and key messages.Coral #ef6f51
LinkUsed for links and interactive text.Deep Teal #1f4a4d

Buttons

Primary Button
BackgroundDeep Teal #1f4a4d
TextIvory White #f6f6f2
Secondary Button
BackgroundCoral #ef6f51
TextCharcoal Black #222625
Outlined Button
BackgroundDeep Teal #1f4a4d
TextCoral #ef6f51

Interface

TextDefault readable body text.Charcoal Black #222625
Bg LightLight page or section background.Ivory White #f6f6f2
Bg DarkDark page or section background.Light Gray #d7d2cc
IconSmall interface icons and marks.Warm Gray #c2bab3
BorderCards, inputs, and component borders.Warm Gray #c2bab3
DividerSubtle separators between content.Warm Gray #c2bab3
OutlineFocus rings and emphasis outlines.Warm Gray #c2bab3

Palette Colors

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

Main (Brand) Colors

The main colors showcase a complementary teal and coral pair, providing vibrant contrast and strong brand recognition while staying sophisticated and modern.

PrimaryDeep Teal

RolesLogo, Btn Primary Bg, Link, Btn Outlined Border

Deep Teal conveys stability and professionalism, grounding the palette with an organic, refreshing tone.

HEX#1f4a4d
RGB31, 74, 77
HSL184, 43, 21
CMYK60, 4, 0, 70
SecondaryCoral

RolesBtn Secondary Bg, Btn Outlined Text, Headline

Coral introduces warmth and energy, creating approachable and engaging highlights.

HEX#ef6f51
RGB239, 111, 81
HSL11, 83, 63
CMYK0, 54, 66, 6
TertiaryDark Slate

Dark Slate provides a muted variation that complements and softens the intensity of the main colors.

HEX#36605a
RGB54, 96, 90
HSL171, 28, 29
CMYK44, 0, 6, 62

Support Colors

Support colors are muted tones that extend the palette's versatility, reinforcing the brand's balance and ensuring interface elements harmonize without distraction.

Warm Gray

RolesIcon, Border, Divider, Outline

Warm Gray softens the palette with neutral warmth, balancing the vibrancy of teal and coral.

HEX#c2bab3
RGB194, 186, 179
HSL28, 11, 73
CMYK0, 4, 8, 24
Soft Slate

Soft Slate offers a subdued cool hue that pairs well with both teal and coral, aiding in hierarchy and emphasis.

HEX#798b8d
RGB121, 139, 141
HSL186, 8, 51
CMYK14, 1, 0, 45

Neutral Colors

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

Ivory White

RolesBg Light, Btn Primary Text

HEX#f6f6f2
RGB246, 246, 242
HSL60, 18, 96
CMYK0, 0, 2, 4
Light Gray

RolesBg Dark

HEX#d7d2cc
RGB215, 210, 204
HSL33, 12, 82
CMYK0, 2, 5, 16
Charcoal Black

RolesText, Btn Secondary Text

HEX#222625
RGB34, 38, 37
HSL165, 6, 14
CMYK11, 0, 3, 85

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-deep-teal: #1f4a4d;
  --color-coral: #ef6f51;
  --color-dark-slate: #36605a;
  --color-warm-gray: #c2bab3;
  --color-soft-slate: #798b8d;
  --color-ivory-white: #f6f6f2;
  --color-light-gray: #d7d2cc;
  --color-charcoal-black: #222625;
}

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: #1f4a4d;
  --role-btn-primary-bg: #1f4a4d;
  --role-link: #1f4a4d;
  --role-btn-outlined-border: #1f4a4d;
  --role-btn-secondary-bg: #ef6f51;
  --role-btn-outlined-text: #ef6f51;
  --role-headline: #ef6f51;
  --role-icon: #c2bab3;
  --role-border: #c2bab3;
  --role-divider: #c2bab3;
  --role-outline: #c2bab3;
  --role-bg-light: #f6f6f2;
  --role-btn-primary-text: #f6f6f2;
  --role-bg-dark: #d7d2cc;
  --role-text: #222625;
  --role-btn-secondary-text: #222625;
}

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.
{
    "deep-teal": "#1f4a4d",
    "coral": "#ef6f51",
    "dark-slate": "#36605a",
    "warm-gray": "#c2bab3",
    "soft-slate": "#798b8d",
    "ivory-white": "#f6f6f2",
    "light-gray": "#d7d2cc",
    "charcoal-black": "#222625"
}
Press Space to load new palette