Teal Blue Gray Color Palette for Professionals Community

Teal Blue Gray Color Palette

This palette combines calming blues with confident teals and versatile grays, creating a professional and trustworthy identity suitable for a community-focused professionals directory and membership platform. The support colors provide subtle depth and balance while the neutrals ensure readability and visual clarity across digital interfaces.

MonochromaticNonetealbluegrayprofessional

Main (Brand) Colors

The main colors harmonize through adjacent hues in the blue-green spectrum, providing a cohesive and calming yet confident look that fosters trust and engagement.

PrimaryTeal

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

Teal conveys trust and calm professionalism, making it ideal for logo and primary interactive elements.

HEX#007D8A

RGB0, 125, 138

HSL186, 100, 27

CMYK100, 9, 0, 46

SecondaryPrussian Blue

RolesBtn Secondary Bg

Prussian Blue adds depth and authority as a secondary button background, distinguishing it clearly from primary teal while maintaining cohesion.

HEX#005E7A

RGB0, 94, 122

HSL194, 100, 24

CMYK100, 23, 0, 52

TertiarySlate Blue

RolesHeadline

Slate Blue provides a slightly lighter headline color that supports the main palette while improving readability and visual hierarchy.

HEX#4A899D

RGB74, 137, 157

HSL194, 36, 45

CMYK53, 13, 0, 38

Support Colors

The support colors extend the palette with soft teal and gray hues that balance the stronger main colors, adding subtle texture and calm reinforcement throughout the interface.

Shadow Blue

RolesIcon, Border, Divider, Outline

Shadow Blue is a subdued muted blue that complements the main teal and prussian blue by providing gentle contrast for icons and borders.

HEX#659EA3

RGB101, 158, 163

HSL185, 25, 52

CMYK38, 3, 0, 36

Neutral Colors

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

White

RolesBg Light, Btn Primary Text, Btn Secondary Text

HEX#FFFFFF

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

Cultured

RolesBg Dark

HEX#F5F7FA

RGB245, 247, 250

HSL216, 33, 97

CMYK2, 1, 0, 2

Charcoal

RolesText

HEX#182026

RGB24, 32, 38

HSL206, 23, 12

CMYK37, 16, 0, 85

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Teal", "hex": "#007D8A", "role": "main", "cmyk": { "c": 100, "m": 9, "y": 0, "k": 46, "source": "colorfly" } }, { "name": "Prussian Blue", "hex": "#005E7A", "role": "main", "cmyk": { "c": 100, "m": 23, "y": 0, "k": 52, "source": "colorfly" } }, { "name": "Slate Blue", "hex": "#4A899D", "role": "main", "cmyk": { "c": 53, "m": 13, "y": 0, "k": 38, "source": "colorfly" } }, { "name": "Shadow Blue", "hex": "#659EA3", "role": "support", "cmyk": { "c": 38, "m": 3, "y": 0, "k": 36, "source": "colorfly" } }, { "name": "White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Cultured", "hex": "#F5F7FA", "role": "neutral", "cmyk": { "c": 2, "m": 1, "y": 0, "k": 2, "source": "colorfly" } }, { "name": "Charcoal", "hex": "#182026", "role": "neutral", "cmyk": { "c": 37, "m": 16, "y": 0, "k": 85, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-teal: #007D8A; --color-prussian-blue: #005E7A; --color-slate-blue: #4A899D; --color-shadow-blue: #659EA3; --color-white: #FFFFFF; --color-cultured: #F5F7FA; --color-charcoal: #182026; }

:root { --role-logo: #007D8A; --role-link: #007D8A; --role-btn-primary-bg: #007D8A; --role-btn-outlined-text: #007D8A; --role-btn-outlined-border: #007D8A; --role-btn-secondary-bg: #005E7A; --role-headline: #4A899D; --role-icon: #659EA3; --role-border: #659EA3; --role-divider: #659EA3; --role-outline: #659EA3; --role-bg-light: #FFFFFF; --role-btn-primary-text: #FFFFFF; --role-btn-secondary-text: #FFFFFF; --role-bg-dark: #F5F7FA; --role-text: #182026; }

<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: #007D8A; --gradient-partner: #73B8BF; --gradient-accent: #659EA3; --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: #007D8A; --gradient-text-b: #73B8BF; --gradient-text-c: #659EA3; 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>