Deep Teal Harmonious Color Palette for Creative Brands

Deep Teal Harmonious Color Palette

This palette is built around a distinctive deep teal main color balanced by softer blue and green accents, complemented by neutral tones that ensure clarity and sophistication. The deep teal gives a strong identity, while the support colors add depth and harmony without overwhelming the core brand essence.

AnalogousCreativedeep tealbluegreenneutral

Main (Brand) Colors

The main colors form an analogous palette with deep teal, soft blue, and muted green creating a cohesive and recognizable visual identity that evokes trust and creativity.

PrimaryDeep Teal

RolesLogo, Btn Primary Bg, Link

Deep Teal establishes a strong and trustworthy brand presence with its rich and calming tone.

HEX#154953

RGB21, 73, 83

HSL190, 60, 20

CMYK75, 12, 0, 67

SecondarySoft Blue

RolesBtn Secondary Bg, Headline

Soft Blue adds approachability and freshness, complementing the primary teal with a gentle contrast.

HEX#3B7A8F

RGB59, 122, 143

HSL195, 42, 40

CMYK59, 15, 0, 44

TertiaryMuted Green

RolesBtn Outlined Border, Btn Outlined Text

Muted Green enhances balance by quietly supporting the palette and harmonizing the blues with a natural feel.

HEX#59806B

RGB89, 128, 107

HSL148, 18, 43

CMYK30, 0, 16, 50

Support Colors

Support colors extend the main palette with deeper and lighter blue-green tones that reinforce the core teal family while maintaining visual subtlety.

Deep Slate Blue

RolesIcon, Border, Divider, Outline

Deep Slate Blue supports the main colors with additional depth and an elegant, modern edge.

HEX#2A5D62

RGB42, 93, 98

HSL185, 40, 27

CMYK57, 5, 0, 62

Pale Aqua

RolesBg Light

Pale Aqua provides a soft, light background that complements the teal tones and ensures content visibility.

HEX#9BC1B8

RGB155, 193, 184

HSL166, 23, 68

CMYK20, 0, 5, 24

Neutral Colors

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

Pure White

RolesBg Dark, Btn Primary Text, Btn Secondary Text

HEX#FFFFFF

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

Light Mist

HEX#F4F6F7

RGB244, 246, 247

HSL200, 16, 96

CMYK1, 0, 0, 3

Charcoal Black

RolesText

HEX#1A1F23

RGB26, 31, 35

HSL207, 15, 12

CMYK26, 11, 0, 86

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Deep Teal", "hex": "#154953", "role": "main", "cmyk": { "c": 75, "m": 12, "y": 0, "k": 67, "source": "colorfly" } }, { "name": "Soft Blue", "hex": "#3B7A8F", "role": "main", "cmyk": { "c": 59, "m": 15, "y": 0, "k": 44, "source": "colorfly" } }, { "name": "Muted Green", "hex": "#59806B", "role": "main", "cmyk": { "c": 30, "m": 0, "y": 16, "k": 50, "source": "colorfly" } }, { "name": "Deep Slate Blue", "hex": "#2A5D62", "role": "support", "cmyk": { "c": 57, "m": 5, "y": 0, "k": 62, "source": "colorfly" } }, { "name": "Pale Aqua", "hex": "#9BC1B8", "role": "support", "cmyk": { "c": 20, "m": 0, "y": 5, "k": 24, "source": "colorfly" } }, { "name": "Pure White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Light Mist", "hex": "#F4F6F7", "role": "neutral", "cmyk": { "c": 1, "m": 0, "y": 0, "k": 3, "source": "colorfly" } }, { "name": "Charcoal Black", "hex": "#1A1F23", "role": "neutral", "cmyk": { "c": 26, "m": 11, "y": 0, "k": 86, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-deep-teal: #154953; --color-soft-blue: #3B7A8F; --color-muted-green: #59806B; --color-deep-slate-blue: #2A5D62; --color-pale-aqua: #9BC1B8; --color-pure-white: #FFFFFF; --color-light-mist: #F4F6F7; --color-charcoal-black: #1A1F23; }

:root { --role-logo: #154953; --role-btn-primary-bg: #154953; --role-link: #154953; --role-btn-secondary-bg: #3B7A8F; --role-headline: #3B7A8F; --role-btn-outlined-border: #59806B; --role-btn-outlined-text: #59806B; --role-icon: #2A5D62; --role-border: #2A5D62; --role-divider: #2A5D62; --role-outline: #2A5D62; --role-bg-light: #9BC1B8; --role-bg-dark: #FFFFFF; --role-btn-primary-text: #FFFFFF; --role-btn-secondary-text: #FFFFFF; --role-text: #1A1F23; }

{ "deep-teal": "#154953", "soft-blue": "#3B7A8F", "muted-green": "#59806B", "deep-slate-blue": "#2A5D62", "pale-aqua": "#9BC1B8", "pure-white": "#FFFFFF", "light-mist": "#F4F6F7", "charcoal-black": "#1A1F23" }

<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: #154953; --gradient-partner: #7E9BA0; --gradient-accent: #2A5D62; --gradient-text: #FFFFFF; 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: #154953; --gradient-text-b: #7E9BA0; --gradient-text-c: #2A5D62; 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>