Burnt Orange Navy Warm Olive Color Palette for Tech Brands

Burnt Orange Navy Color Palette

This brand palette uses a vibrant Burnt Orange as its energetic core, paired with a deep Navy Blue and a rich Warm Olive, creating a distinctive and balanced triadic color system. The accents in soft Clay, muted Sage, and gentle Sand tactfully support the strong main colors while keeping the overall look grounded and approachable. The neutrals of pure white, ivory cream, and charcoal black provide essential clarity and contrast for readability and interface elements.

Split ComplementaryTechburnt orangenavyolivetriadic palette

Main (Brand) Colors

The vibrant Burnt Orange energizes the palette while the deep Navy Blue and Warm Olive offer grounded contrast and balance, forming a memorable triadic harmony for strong brand recognition.

PrimaryBurnt Orange

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

Burnt Orange delivers energetic warmth and attention-grabbing vibrancy, perfect for brand identity focal points.

HEX#EE7721

RGB238, 119, 33

HSL25, 86, 53

CMYK0, 50, 86, 7

SecondaryNavy

RolesBtn Secondary Bg, Headline

Navy instills reliable confidence and professionalism, balancing Burnt Orange with depth and calm.

HEX#162A53

RGB22, 42, 83

HSL220, 58, 21

CMYK73, 49, 0, 67

TertiaryWarm Olive

Warm Olive adds an earthy, natural tone that grounds the palette and enhances legibility.

HEX#6B7B3B

RGB107, 123, 59

HSL75, 35, 36

CMYK13, 0, 52, 52

Support Colors

Support colors in softer Clay, muted Sage, and gentle Sand add subtle accents that complement and soften the energetic main colors without competing for attention.

Clay

RolesIcon, Border, Divider, Outline

Clay complements Burnt Orange with a dusty, neutral accent that supports without overpowering.

HEX#A67D5D

RGB166, 125, 93

HSL26, 29, 51

CMYK0, 25, 44, 35

Sage

Muted Sage subtly echoes Warm Olive to reinforce a natural mood and visual harmony.

HEX#8A9A78

RGB138, 154, 120

HSL88, 14, 54

CMYK10, 0, 22, 40

Sand

Gentle Sand adds warmth and softness, balancing the deeper main colors and supporting headline text.

HEX#D7C9B6

RGB215, 201, 182

HSL35, 29, 78

CMYK0, 7, 15, 16

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

Ivory Cream

RolesBg Dark

HEX#F5F0E6

RGB245, 240, 230

HSL40, 43, 93

CMYK0, 2, 6, 4

Charcoal Black

RolesText, Btn Primary Text

HEX#242424

RGB36, 36, 36

HSL0, 0, 14

CMYK0, 0, 0, 86

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Burnt Orange", "hex": "#EE7721", "role": "main", "cmyk": { "c": 0, "m": 50, "y": 86, "k": 7, "source": "colorfly" } }, { "name": "Navy", "hex": "#162A53", "role": "main", "cmyk": { "c": 73, "m": 49, "y": 0, "k": 67, "source": "colorfly" } }, { "name": "Warm Olive", "hex": "#6B7B3B", "role": "main", "cmyk": { "c": 13, "m": 0, "y": 52, "k": 52, "source": "colorfly" } }, { "name": "Clay", "hex": "#A67D5D", "role": "support", "cmyk": { "c": 0, "m": 25, "y": 44, "k": 35, "source": "colorfly" } }, { "name": "Sage", "hex": "#8A9A78", "role": "support", "cmyk": { "c": 10, "m": 0, "y": 22, "k": 40, "source": "colorfly" } }, { "name": "Sand", "hex": "#D7C9B6", "role": "support", "cmyk": { "c": 0, "m": 7, "y": 15, "k": 16, "source": "colorfly" } }, { "name": "Pure White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Ivory Cream", "hex": "#F5F0E6", "role": "neutral", "cmyk": { "c": 0, "m": 2, "y": 6, "k": 4, "source": "colorfly" } }, { "name": "Charcoal Black", "hex": "#242424", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 86, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-burnt-orange: #EE7721; --color-navy: #162A53; --color-warm-olive: #6B7B3B; --color-clay: #A67D5D; --color-sage: #8A9A78; --color-sand: #D7C9B6; --color-pure-white: #FFFFFF; --color-ivory-cream: #F5F0E6; --color-charcoal-black: #242424; }

:root { --role-logo: #EE7721; --role-link: #EE7721; --role-btn-primary-bg: #EE7721; --role-btn-outlined-border: #EE7721; --role-btn-outlined-text: #EE7721; --role-btn-secondary-bg: #162A53; --role-headline: #162A53; --role-icon: #A67D5D; --role-border: #A67D5D; --role-divider: #A67D5D; --role-outline: #A67D5D; --role-bg-light: #FFFFFF; --role-btn-secondary-text: #FFFFFF; --role-bg-dark: #F5F0E6; --role-text: #242424; --role-btn-primary-text: #242424; }

{ "burnt-orange": "#EE7721", "navy": "#162A53", "warm-olive": "#6B7B3B", "clay": "#A67D5D", "sage": "#8A9A78", "sand": "#D7C9B6", "pure-white": "#FFFFFF", "ivory-cream": "#F5F0E6", "charcoal-black": "#242424" }

<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: #EE7721; --gradient-partner: #F6B485; --gradient-accent: #A67D5D; --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: #EE7721; --gradient-text-b: #856148; --gradient-text-c: #A67D5D; 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>

Burnt Orange Navy Color Palette

Burnt Orange Navy Color Palette

Gradients

Color Roles and Usage Map

Brand identity

Buttons

Interface

Print Color Values

Palette Colors

Main (Brand) Colors

Support Colors

Neutral Colors

Export and Handoff

Export logo in seconds

Color tokens

Role tokens

JSON

Moving gradient background

Moving gradient text

Build your first color system

Palette workspace

Burnt Orange Navy Color Palette

Gradients

Color Roles and Usage Map

Brand identity

Buttons

Interface

Print Color Values

Palette Colors

Main (Brand) Colors

Support Colors

Neutral Colors

Export and Handoff

Export logo in seconds

Color tokens

Role tokens

JSON

Moving gradient background

Moving gradient text

Build your first color system