Teal Coral Mint Color Palette for Tech Brand Identity

Teal Coral Mint Color Palette

This palette draws from the deep teal, bright coral, and soft mint green found in the logo, combining them with subdued support colors and balanced neutrals to create a cohesive modern brand identity. The main colors relate through a split-complementary harmony, providing vibrant recognizability alongside functional color contrasts.

ComplementaryTechtealcoralmintmodern

Main (Brand) Colors

The main colors teal, coral, and mint green are chosen for their distinct yet harmonious contrast, forming a split-complementary palette that is visually engaging and brand recognizably distinctive.

PrimaryTeal

RolesLogo, Link, Btn Primary Bg

Teal provides a confident and trustworthy presence ideal for technology branding.

HEX#006766

RGB0, 103, 102

HSL179, 100, 20

CMYK100, 0, 1, 60

SecondaryCoral

RolesBtn Outlined Border, Btn Outlined Text

Coral delivers energy and vibrancy, making key interactions stand out without overwhelming.

HEX#E74C3C

RGB231, 76, 60

HSL6, 78, 57

CMYK0, 67, 74, 9

TertiaryMint Green

RolesBtn Secondary Bg, Headline

Mint green brightens the palette with a fresh and approachable accent that balances the deeper hues.

HEX#95E1D3

RGB149, 225, 211

HSL169, 56, 73

CMYK34, 0, 6, 12

Support Colors

The support colors extend the main palette with softer, muted blues and grays, enhancing usability by offering subtle iconography, borders, and dividers that complement the core colors without competing for attention.

Slate Blue

RolesIcon, Border, Divider, Outline

Slate blue adds depth and neutrality to support interface elements, harmonizing with teal and coral.

HEX#508B9C

RGB80, 139, 156

HSL193, 32, 46

CMYK49, 11, 0, 39

Neutral Colors

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

Ghost White

RolesBg Light, Btn Primary Text

HEX#F8F9FA

RGB248, 249, 250

HSL210, 17, 98

CMYK1, 0, 0, 2

Charcoal

RolesText, Btn Secondary Text

HEX#1C1E22

RGB28, 30, 34

HSL220, 10, 12

CMYK18, 12, 0, 87

Dark Slate

RolesBg Dark

HEX#2C3E50

RGB44, 62, 80

HSL210, 29, 24

CMYK45, 23, 0, 69

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Teal", "hex": "#006766", "role": "main", "cmyk": { "c": 100, "m": 0, "y": 1, "k": 60, "source": "colorfly" } }, { "name": "Coral", "hex": "#E74C3C", "role": "main", "cmyk": { "c": 0, "m": 67, "y": 74, "k": 9, "source": "colorfly" } }, { "name": "Mint Green", "hex": "#95E1D3", "role": "main", "cmyk": { "c": 34, "m": 0, "y": 6, "k": 12, "source": "colorfly" } }, { "name": "Slate Blue", "hex": "#508B9C", "role": "support", "cmyk": { "c": 49, "m": 11, "y": 0, "k": 39, "source": "colorfly" } }, { "name": "Ghost White", "hex": "#F8F9FA", "role": "neutral", "cmyk": { "c": 1, "m": 0, "y": 0, "k": 2, "source": "colorfly" } }, { "name": "Charcoal", "hex": "#1C1E22", "role": "neutral", "cmyk": { "c": 18, "m": 12, "y": 0, "k": 87, "source": "colorfly" } }, { "name": "Dark Slate", "hex": "#2C3E50", "role": "neutral", "cmyk": { "c": 45, "m": 23, "y": 0, "k": 69, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-teal: #006766; --color-coral: #E74C3C; --color-mint-green: #95E1D3; --color-slate-blue: #508B9C; --color-ghost-white: #F8F9FA; --color-charcoal: #1C1E22; --color-dark-slate: #2C3E50; }

:root { --role-logo: #006766; --role-link: #006766; --role-btn-primary-bg: #006766; --role-btn-outlined-border: #E74C3C; --role-btn-outlined-text: #E74C3C; --role-btn-secondary-bg: #95E1D3; --role-headline: #95E1D3; --role-icon: #508B9C; --role-border: #508B9C; --role-divider: #508B9C; --role-outline: #508B9C; --role-bg-light: #F8F9FA; --role-btn-primary-text: #F8F9FA; --role-text: #1C1E22; --role-btn-secondary-text: #1C1E22; --role-bg-dark: #2C3E50; }

<div class="colorfly-moving-gradient-bg"> <span class="colorfly-gradient-spark" aria-hidden="true"></span> <div> <small>Motion gradient</small> <h2>Gradient background</h2> <p>A moving brand gradient built from your palette.</p> </div> </div> <style> .colorfly-moving-gradient-bg { --gradient-anchor: #006766; --gradient-partner: #73ABAB; --gradient-accent: #508B9C; --gradient-text: #000000; position: relative; display: grid; place-items: center; min-height: 340px; overflow: hidden; padding: 42px; color: var(--gradient-text); border-radius: 28px; background: radial-gradient(circle at 20% 82%, color-mix(in srgb, var(--gradient-accent) 48%, transparent) 0 14%, transparent 42%), radial-gradient(circle at 84% 18%, color-mix(in srgb, var(--gradient-partner) 52%, transparent) 0 16%, transparent 46%), linear-gradient(135deg, var(--gradient-anchor), color-mix(in srgb, var(--gradient-anchor) 72%, black 18%), var(--gradient-partner), var(--gradient-anchor)); background-size: 160% 160%, 180% 180%, 240% 240%; animation: colorfly-gradient-bg 10.5s cubic-bezier(.72, 0, .22, 1) infinite; } .colorfly-moving-gradient-bg > div { position: relative; z-index: 1; max-width: 640px; text-align: center; } .colorfly-moving-gradient-bg::before, .colorfly-moving-gradient-bg::after, .colorfly-gradient-spark { content: ""; position: absolute; z-index: 0; aspect-ratio: 1; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; } .colorfly-moving-gradient-bg::before { left: -10%; top: -18%; width: min(520px, 72%); background: radial-gradient(circle, color-mix(in srgb, var(--gradient-partner) 88%, white 8%) 0%, transparent 66%), radial-gradient(circle at 68% 32%, color-mix(in srgb, var(--gradient-accent) 58%, white 10%) 0%, transparent 38%); opacity: .86; animation: colorfly-gradient-orb-one 11s cubic-bezier(.65, 0, .22, 1) infinite; } .colorfly-moving-gradient-bg::after { right: -12%; bottom: -24%; width: min(620px, 82%); background: radial-gradient(circle, color-mix(in srgb, var(--gradient-accent) 86%, white 6%) 0%, transparent 68%), radial-gradient(circle at 28% 72%, color-mix(in srgb, var(--gradient-partner) 62%, white 8%) 0%, transparent 42%); opacity: .78; animation: colorfly-gradient-orb-two 12.8s cubic-bezier(.56, 0, .25, 1) infinite; } .colorfly-gradient-spark { left: 42%; top: 44%; width: min(360px, 54%); background: radial-gradient(circle, color-mix(in srgb, var(--gradient-anchor) 64%, white 12%) 0%, transparent 62%); opacity: .46; animation: colorfly-gradient-spark 9.2s cubic-bezier(.62, 0, .2, 1) infinite; } @keyframes colorfly-gradient-bg { 0%, 100% { background-position: 0% 46%, 100% 24%, 0% 50%; } 18% { background-position: 44% 88%, 58% 12%, 34% 22%; } 39% { background-position: 86% 38%, 18% 74%, 86% 64%; } 63% { background-position: 26% 16%, 84% 92%, 42% 100%; } 82% { background-position: 68% 68%, 32% 30%, 100% 34%; } } @keyframes colorfly-gradient-orb-one { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 22% { transform: translate3d(78%, 22%, 0) scale(1.12); } 47% { transform: translate3d(44%, 86%, 0) scale(.92); } 72% { transform: translate3d(112%, 56%, 0) scale(1.2); } } @keyframes colorfly-gradient-orb-two { 0%, 100% { transform: translate3d(0, 0, 0) scale(1.08); } 19% { transform: translate3d(-48%, -18%, 0) scale(.9); } 53% { transform: translate3d(-92%, -62%, 0) scale(1.14); } 79% { transform: translate3d(-22%, -86%, 0) scale(.98); } } @keyframes colorfly-gradient-spark { 0%, 100% { transform: translate3d(-12%, -8%, 0) scale(.84); } 28% { transform: translate3d(52%, -34%, 0) scale(1.08); } 58% { transform: translate3d(-44%, 38%, 0) scale(.96); } 84% { transform: translate3d(20%, 28%, 0) scale(1.18); } } </style>

<div class="colorfly-gradient-text-card"> <small>Gradient type</small> <h2>Gradient on text</h2> <p>A moving text gradient built from your palette.</p> </div> <style> .colorfly-gradient-text-card { --gradient-text-a: #006766; --gradient-text-b: #73ABAB; --gradient-text-c: #508B9C; position: relative; display: grid; place-items: center; min-height: 310px; overflow: hidden; padding: 42px; text-align: center; border-radius: 28px; background: radial-gradient(circle at 14% 18%, color-mix(in srgb, var(--gradient-text-a) 8%, transparent), transparent 28%), linear-gradient(135deg, #fff, #fbfbfd); } .colorfly-gradient-text-card::before, .colorfly-gradient-text-card::after { content: ""; position: absolute; pointer-events: none; border-radius: 50%; filter: blur(2px); } .colorfly-gradient-text-card::before { left: 9%; top: 15%; width: min(330px, 48%); aspect-ratio: 1; background: radial-gradient(circle, color-mix(in srgb, var(--gradient-text-a) 20%, transparent) 0%, transparent 68%); animation: colorfly-gradient-text-glow-one 8s cubic-bezier(.62, 0, .2, 1) infinite; } .colorfly-gradient-text-card::after { right: 7%; bottom: 6%; width: min(360px, 52%); aspect-ratio: 1; background: radial-gradient(circle, color-mix(in srgb, var(--gradient-text-c) 18%, transparent) 0%, transparent 70%); animation: colorfly-gradient-text-glow-two 9.5s cubic-bezier(.56, 0, .25, 1) infinite; } .colorfly-gradient-text-card small, .colorfly-gradient-text-card p { position: relative; z-index: 1; color: #65616d; } .colorfly-gradient-text-card h2 { position: relative; z-index: 1; margin: 10px 0 12px; color: transparent; font-size: clamp(42px, 8vw, 96px); line-height: .92; background: radial-gradient(circle at 18% 50%, var(--gradient-text-b) 0 12%, transparent 38%), radial-gradient(circle at 82% 44%, var(--gradient-text-c) 0 14%, transparent 40%), linear-gradient(100deg, var(--gradient-text-a), var(--gradient-text-b), var(--gradient-text-c), var(--gradient-text-a)); background-size: 220% 220%, 240% 240%, 280% 100%; -webkit-background-clip: text; background-clip: text; animation: colorfly-gradient-text-shift 6.2s cubic-bezier(.68, 0, .22, 1) infinite; } @keyframes colorfly-gradient-text-shift { 0%, 100% { background-position: 8% 52%, 92% 42%, 0% 50%; } 27% { background-position: 78% 18%, 28% 82%, 42% 50%; } 61% { background-position: 36% 92%, 86% 24%, 100% 50%; } 84% { background-position: 92% 48%, 18% 40%, 58% 50%; } } @keyframes colorfly-gradient-text-glow-one { 0%, 100% { transform: translate3d(0, 0, 0) scale(.92); } 42% { transform: translate3d(80%, 32%, 0) scale(1.12); } 72% { transform: translate3d(28%, 86%, 0) scale(.98); } } @keyframes colorfly-gradient-text-glow-two { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 36% { transform: translate3d(-62%, -18%, 0) scale(.9); } 76% { transform: translate3d(-36%, -78%, 0) scale(1.12); } } </style>