Salmon Midnight Green Color Palette for Modern Branding

Salmon Midnight Green Color Palette

This palette pairs a warm salmon coral with a deep midnight teal to create a vivid, modern contrast that feels both expressive and grounded. The result is a memorable system for brands that want energy, polish, and a slightly editorial edge.

ComplementaryNonesalmonmidnight greencoralteal

Main (Brand) Colors

The main colors create a clear warm-versus-cool relationship that is immediately recognizable and easy to build into a brand system. Salmon brings approachable warmth while midnight green adds depth and restraint, giving the palette strong contrast without feeling harsh.

PrimarySalmon Coral

RolesLogo, Btn Primary Bg

This warm coral drives recognition and gives the brand a lively, inviting first impression.

HEX#F57F6A

RGB245, 127, 106

HSL9, 87, 69

CMYK0, 48, 57, 4

SecondaryMidnight Green

RolesLink, Btn Secondary Bg, Headline

This deep teal adds seriousness and stability, making the palette feel composed and trustworthy.

HEX#0D5B5A

RGB13, 91, 90

HSL179, 75, 20

CMYK86, 0, 1, 64

Support Colors

The support colors extend the salmon-and-teal relationship with muted, usable accents that stay subordinate to the main contrast. They add structure and interface clarity without competing for attention.

Ash Mauve

RolesIcon, Border

This subdued mauve-gray softens the palette and works well for functional UI details.

HEX#6E6A78

RGB110, 106, 120

HSL257, 6, 44

CMYK8, 12, 0, 53

Tidal Teal

RolesDivider, Outline, Btn Outlined Border, Btn Outlined Text

This cooler teal bridges the main colors and keeps outlined elements aligned with the core brand mood.

HEX#2D7C7A

RGB45, 124, 122

HSL178, 47, 33

CMYK64, 0, 2, 51

Neutral Colors

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

Pure White

RolesBg Light, Btn Secondary Text

HEX#FFFFFF

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

Warm Ivory

HEX#F4EFE8

RGB244, 239, 232

HSL35, 35, 93

CMYK0, 2, 5, 4

Ink Black

RolesBg Dark, Text, Btn Primary Text

HEX#121212

RGB18, 18, 18

HSL0, 0, 7

CMYK0, 0, 0, 93

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Salmon Coral", "hex": "#F57F6A", "role": "main", "cmyk": { "c": 0, "m": 48, "y": 57, "k": 4, "source": "colorfly" } }, { "name": "Midnight Green", "hex": "#0D5B5A", "role": "main", "cmyk": { "c": 86, "m": 0, "y": 1, "k": 64, "source": "colorfly" } }, { "name": "Ash Mauve", "hex": "#6E6A78", "role": "support", "cmyk": { "c": 8, "m": 12, "y": 0, "k": 53, "source": "colorfly" } }, { "name": "Tidal Teal", "hex": "#2D7C7A", "role": "support", "cmyk": { "c": 64, "m": 0, "y": 2, "k": 51, "source": "colorfly" } }, { "name": "Pure White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Warm Ivory", "hex": "#F4EFE8", "role": "neutral", "cmyk": { "c": 0, "m": 2, "y": 5, "k": 4, "source": "colorfly" } }, { "name": "Ink Black", "hex": "#121212", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 93, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-salmon-coral: #F57F6A; --color-midnight-green: #0D5B5A; --color-ash-mauve: #6E6A78; --color-tidal-teal: #2D7C7A; --color-pure-white: #FFFFFF; --color-warm-ivory: #F4EFE8; --color-ink-black: #121212; }

:root { --role-logo: #F57F6A; --role-btn-primary-bg: #F57F6A; --role-link: #0D5B5A; --role-btn-secondary-bg: #0D5B5A; --role-headline: #0D5B5A; --role-icon: #6E6A78; --role-border: #6E6A78; --role-divider: #2D7C7A; --role-outline: #2D7C7A; --role-btn-outlined-border: #2D7C7A; --role-btn-outlined-text: #2D7C7A; --role-bg-light: #FFFFFF; --role-btn-secondary-text: #FFFFFF; --role-bg-dark: #121212; --role-text: #121212; --role-btn-primary-text: #121212; }

{ "salmon-coral": "#F57F6A", "midnight-green": "#0D5B5A", "ash-mauve": "#6E6A78", "tidal-teal": "#2D7C7A", "pure-white": "#FFFFFF", "warm-ivory": "#F4EFE8", "ink-black": "#121212" }

<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: #F57F6A; --gradient-partner: #F8A597; --gradient-accent: #6E6A78; --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: #F57F6A; --gradient-text-b: #865952; --gradient-text-c: #6E6A78; 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>