Navy Coral Charcoal Color Palette for Creative Branding

Navy Coral Charcoal Color Palette

This palette blends a strong navy, warm coral-orange, and charcoal grey to evoke professionalism with a friendly, dynamic approach. The main colors form a balanced triadic harmony that ensures brand recognition and visual interest, supported by softer muted hues that reinforce usability and subtle accents. Neutrals provide a clean and versatile base for text and backgrounds, maintaining clarity and readability.

ComplementaryCreativenavycoralcharcoalprofessional

Main (Brand) Colors

The main colors of navy, coral, and charcoal create a triadic harmony that balances boldness and approachability, making the palette memorable and versatile for branding.

PrimaryNavy

RolesLogo, Link, Btn Primary Bg

Navy conveys trust, stability, and professionalism, providing a strong foundation for the brand identity.

HEX#001F3F

RGB0, 31, 63

HSL210, 100, 12

CMYK100, 51, 0, 75

SecondaryCoral

RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text

Coral adds warmth, friendliness, and energy, offering a dynamic contrast to the deep navy.

HEX#FF7F50

RGB255, 127, 80

HSL16, 100, 66

CMYK0, 50, 69, 0

TertiaryCharcoal

RolesHeadline

Charcoal delivers sophistication and balance, grounding the bright coral and bold navy with a neutral yet rich shade.

HEX#2F2F2F

RGB47, 47, 47

HSL0, 0, 18

CMYK0, 0, 0, 82

Support Colors

The support colors extend the main palette with softer and muted tones that complement and balance the main hues without competing visually, enhancing usability and layered design.

Muted Clay

RolesIcon, Border, Divider, Outline

Muted Clay is a gentle earthy tone that complements coral with softness, adding warmth to details.

HEX#BFA6A0

RGB191, 166, 160

HSL12, 19, 69

CMYK0, 13, 16, 25

Soft Slate

Soft Slate is a cool, subdued blue-grey that supports navy by adding subtle depth and contrast.

HEX#7A8C99

RGB122, 140, 153

HSL205, 13, 54

CMYK20, 8, 0, 40

Neutral Colors

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

White

RolesBg Light, Btn Primary Text

HEX#FFFFFF

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

Light Gray

RolesBg Dark

HEX#F4F4F4

RGB244, 244, 244

HSL0, 0, 96

CMYK0, 0, 0, 4

Dark Near-Black

RolesText, Btn Secondary Text

HEX#1A1A1A

RGB26, 26, 26

HSL0, 0, 10

CMYK0, 0, 0, 90

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Navy", "hex": "#001F3F", "role": "main", "cmyk": { "c": 100, "m": 51, "y": 0, "k": 75, "source": "colorfly" } }, { "name": "Coral", "hex": "#FF7F50", "role": "main", "cmyk": { "c": 0, "m": 50, "y": 69, "k": 0, "source": "colorfly" } }, { "name": "Charcoal", "hex": "#2F2F2F", "role": "main", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 82, "source": "colorfly" } }, { "name": "Muted Clay", "hex": "#BFA6A0", "role": "support", "cmyk": { "c": 0, "m": 13, "y": 16, "k": 25, "source": "colorfly" } }, { "name": "Soft Slate", "hex": "#7A8C99", "role": "support", "cmyk": { "c": 20, "m": 8, "y": 0, "k": 40, "source": "colorfly" } }, { "name": "White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Light Gray", "hex": "#F4F4F4", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 4, "source": "colorfly" } }, { "name": "Dark Near-Black", "hex": "#1A1A1A", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 90, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-navy: #001F3F; --color-coral: #FF7F50; --color-charcoal: #2F2F2F; --color-muted-clay: #BFA6A0; --color-soft-slate: #7A8C99; --color-white: #FFFFFF; --color-light-gray: #F4F4F4; --color-dark-near-black: #1A1A1A; }

:root { --role-logo: #001F3F; --role-link: #001F3F; --role-btn-primary-bg: #001F3F; --role-btn-secondary-bg: #FF7F50; --role-btn-outlined-border: #FF7F50; --role-btn-outlined-text: #FF7F50; --role-headline: #2F2F2F; --role-icon: #BFA6A0; --role-border: #BFA6A0; --role-divider: #BFA6A0; --role-outline: #BFA6A0; --role-bg-light: #FFFFFF; --role-btn-primary-text: #FFFFFF; --role-bg-dark: #F4F4F4; --role-text: #1A1A1A; --role-btn-secondary-text: #1A1A1A; }

{ "navy": "#001F3F", "coral": "#FF7F50", "charcoal": "#2F2F2F", "muted-clay": "#BFA6A0", "soft-slate": "#7A8C99", "white": "#FFFFFF", "light-gray": "#F4F4F4", "dark-near-black": "#1A1A1A" }

<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: #001F3F; --gradient-partner: #738495; --gradient-accent: #BFA6A0; --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: #001F3F; --gradient-text-b: #738495; --gradient-text-c: #BFA6A0; 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>