Teal#61bbbc
Coral#db6954
Gold#dcb158
Muted Sapphire#5a7a91
Soft Peach#f1d5c9
Palette direction

Teal Coral Gold Color Palette

This palette uses a distinctive triadic color scheme with vibrant teal, warm coral, and bright gold to create a balanced and energetic brand identity. The support colors extend the vibrancy with softened muted sapphire and subtle soft peach, providing usability and visual interest without competing with the main colors. The neutrals offer a crisp white, a light ivory for backgrounds, and a deep charcoal for text, ensuring strong readability and clarity across all uses.

Split ComplementaryCreativetealcoralgoldtriadic
palette-preview.example
Creative color direction

Teal Coral Gold Color Palette

This palette uses a distinctive triadic color scheme with vibrant teal, warm coral, and bright gold to create a balanced and energetic brand identity. The support colors extend the vibrancy with softened muted sapphire and subtle soft peach, providing usability and visual interest without competing with the main colors. The neutrals offer a crisp white, a light ivory for backgrounds, and a deep charcoal for text, ensuring strong readability and clarity across all uses.

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 Charcoal #2C2C2Con Gold #DCB1587.0:1 Strong
Logo Charcoal #2C2C2Con Teal #61BBBC6.2:1 Strong
Logo Charcoal #2C2C2Con White #FFFFFF14.0:1 Excellent
Logo White #FFFFFFon Charcoal #2C2C2C14.0:1 Excellent
Icon color
BackgroundTeal#61bbbcTextCharcoal#2c2c2c
Primary Button6.21:1
AA

Best for the main action users should notice first.

BackgroundCoral#db6954TextCharcoal#2c2c2c
Secondary Button4.10:1
Large text

Useful for softer choices and secondary paths.

BackgroundWhite#ffffffTextTeal#61bbbc
Outlined Button2.25:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundWhite#ffffffTextTeal#61bbbc
Text Button2.25:1
Low

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

Palette composition8 colorsSplit Complementary color relationship
9:41Teal Coral Gold 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 Gold Color PaletteCreative brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The triadic relationship between teal, coral, and gold creates a lively and harmonious palette that offers strong brand recognition with balanced warmth and coolness.

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 #61bbbc
HeadlineUsed for main titles and key messages.Gold #dcb158
LinkUsed for links and interactive text.Teal #61bbbc

Buttons

Primary Button
BackgroundTeal #61bbbc
TextCharcoal #2c2c2c
Secondary Button
BackgroundCoral #db6954
TextCharcoal #2c2c2c
Outlined Button
BackgroundTeal #61bbbc
TextTeal #61bbbc

Interface

TextDefault readable body text.Charcoal #2c2c2c
Bg LightLight page or section background.White #ffffff
Bg DarkDark page or section background.Ivory #f8f5f1
IconSmall interface icons and marks.Muted Sapphire #5a7a91
BorderCards, inputs, and component borders.Muted Sapphire #5a7a91
DividerSubtle separators between content.Muted Sapphire #5a7a91
OutlineFocus rings and emphasis outlines.Muted Sapphire #5a7a91

Palette Colors

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

Main (Brand) Colors

The triadic relationship between teal, coral, and gold creates a lively and harmonious palette that offers strong brand recognition with balanced warmth and coolness.

PrimaryTeal

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

Teal conveys modernity and trustworthiness, serving as the core brand color for memorable identity and trust.

HEX#61bbbc
RGB97, 187, 188
HSL181, 40, 56
CMYK48, 1, 0, 26
SecondaryCoral

RolesBtn Secondary Bg

Coral adds warmth and approachability, providing an engaging contrast to teal for secondary actions.

HEX#db6954
RGB219, 105, 84
HSL9, 65, 59
CMYK0, 52, 62, 14
TertiaryGold

RolesHeadline

Gold introduces a bright, optimistic highlight for headlines, drawing attention with a sophisticated flourish.

HEX#dcb158
RGB220, 177, 88
HSL40, 65, 60
CMYK0, 20, 60, 14

Support Colors

The muted sapphire and soft peach support colors reinforce the main palette by offering subtle accents and softer tonal variation to maintain visual interest without overpowering the brand hues.

Muted Sapphire

RolesIcon, Border, Divider, Outline

Muted Sapphire balances the vibrant main colors with a cool, subdued tone suitable for interface elements and subtle division.

HEX#5a7a91
RGB90, 122, 145
HSL205, 23, 46
CMYK38, 16, 0, 43
Soft Peach

Soft Peach complements coral by adding a gentle warmth in highlights and secondary headline areas, maintaining harmony with the main colors.

HEX#f1d5c9
RGB241, 213, 201
HSL18, 59, 87
CMYK0, 12, 17, 5

Neutral Colors

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

White

RolesBg Light

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

RolesBg Dark

HEX#f8f5f1
RGB248, 245, 241
HSL34, 33, 96
CMYK0, 1, 3, 3
Charcoal

RolesText, Btn Primary Text, Btn Secondary Text

HEX#2c2c2c
RGB44, 44, 44
HSL0, 0, 17
CMYK0, 0, 0, 83

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: #61bbbc;
  --color-coral: #db6954;
  --color-gold: #dcb158;
  --color-muted-sapphire: #5a7a91;
  --color-soft-peach: #f1d5c9;
  --color-white: #ffffff;
  --color-ivory: #f8f5f1;
  --color-charcoal: #2c2c2c;
}

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: #61bbbc;
  --role-link: #61bbbc;
  --role-btn-primary-bg: #61bbbc;
  --role-btn-outlined-border: #61bbbc;
  --role-btn-outlined-text: #61bbbc;
  --role-btn-secondary-bg: #db6954;
  --role-headline: #dcb158;
  --role-icon: #5a7a91;
  --role-border: #5a7a91;
  --role-divider: #5a7a91;
  --role-outline: #5a7a91;
  --role-bg-light: #ffffff;
  --role-bg-dark: #f8f5f1;
  --role-text: #2c2c2c;
  --role-btn-primary-text: #2c2c2c;
  --role-btn-secondary-text: #2c2c2c;
}

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": "#61bbbc",
    "coral": "#db6954",
    "gold": "#dcb158",
    "muted-sapphire": "#5a7a91",
    "soft-peach": "#f1d5c9",
    "white": "#ffffff",
    "ivory": "#f8f5f1",
    "charcoal": "#2c2c2c"
}
Press Space to load new palette