Warm Orange Creative Color Palette for Vibrant Branding

Warm Orange Creative Color Palette

This palette captures the vibrant and warm energy of the orange hues combined with neutral, grounded tones to create a balanced yet dynamic visual identity. The main colors emphasize warmth, creativity, and approachability, supported by subtle earthy and muted neutrals for versatility and readability.

MonochromaticCreativeorangewarmcreativevibrant

Main (Brand) Colors

The main colors are warm and energetic shades of orange and complementary deep brownish tones, creating a recognizable, inviting, and cohesive system.

PrimaryCoral Orange

RolesLogo, Link, Btn Primary Bg, Headline

Coral Orange energizes the palette with its bold vibrancy and warmth, evoking creativity and youthful enthusiasm.

HEX#FF7F32

RGB255, 127, 50

HSL23, 100, 60

CMYK0, 50, 80, 0

SecondaryLight Apricot

RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text

Light Apricot provides a soft, approachable contrast, balancing the bold orange and enhancing readability and friendliness.

HEX#FFD480

RGB255, 212, 128

HSL40, 100, 75

CMYK0, 17, 50, 0

TertiaryRich Cocoa

Rich Cocoa offers deep contrast and grounding, improving legibility on lighter button backgrounds while adding warmth and sophistication.

HEX#5A3E2B

RGB90, 62, 43

HSL24, 35, 26

CMYK0, 31, 52, 65

Support Colors

The support colors extend the main palette with softer, muted earthy tones that complement orange without overpowering it, providing subtle accents and versatility for interactive elements and icons.

Muted Sand

RolesIcon, Border, Divider, Outline

Muted Sand gently supports the palette with an understated earthy tone, blending harmoniously with the warm main colors to create depth without distraction.

HEX#B38B6D

RGB179, 139, 109

HSL26, 32, 56

CMYK0, 22, 39, 30

Neutral Colors

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

Pure White

RolesBg Light

HEX#FFFFFF

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

Soft Ivory

RolesBg Dark

HEX#F4E6D7

RGB244, 230, 215

HSL31, 57, 90

CMYK0, 6, 12, 4

Dark Charcoal

RolesText, Btn Primary Text, Btn Secondary Text

HEX#3B2F2F

RGB59, 47, 47

HSL0, 11, 21

CMYK0, 20, 20, 77

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Coral Orange", "hex": "#FF7F32", "role": "main", "cmyk": { "c": 0, "m": 50, "y": 80, "k": 0, "source": "colorfly" } }, { "name": "Light Apricot", "hex": "#FFD480", "role": "main", "cmyk": { "c": 0, "m": 17, "y": 50, "k": 0, "source": "colorfly" } }, { "name": "Rich Cocoa", "hex": "#5A3E2B", "role": "main", "cmyk": { "c": 0, "m": 31, "y": 52, "k": 65, "source": "colorfly" } }, { "name": "Muted Sand", "hex": "#B38B6D", "role": "support", "cmyk": { "c": 0, "m": 22, "y": 39, "k": 30, "source": "colorfly" } }, { "name": "Pure White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Soft Ivory", "hex": "#F4E6D7", "role": "neutral", "cmyk": { "c": 0, "m": 6, "y": 12, "k": 4, "source": "colorfly" } }, { "name": "Dark Charcoal", "hex": "#3B2F2F", "role": "neutral", "cmyk": { "c": 0, "m": 20, "y": 20, "k": 77, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-coral-orange: #FF7F32; --color-light-apricot: #FFD480; --color-rich-cocoa: #5A3E2B; --color-muted-sand: #B38B6D; --color-pure-white: #FFFFFF; --color-soft-ivory: #F4E6D7; --color-dark-charcoal: #3B2F2F; }

:root { --role-logo: #FF7F32; --role-link: #FF7F32; --role-btn-primary-bg: #FF7F32; --role-headline: #FF7F32; --role-btn-secondary-bg: #FFD480; --role-btn-outlined-border: #FFD480; --role-btn-outlined-text: #FFD480; --role-icon: #B38B6D; --role-border: #B38B6D; --role-divider: #B38B6D; --role-outline: #B38B6D; --role-bg-light: #FFFFFF; --role-bg-dark: #F4E6D7; --role-text: #3B2F2F; --role-btn-primary-text: #3B2F2F; --role-btn-secondary-text: #3B2F2F; }

{ "coral-orange": "#FF7F32", "light-apricot": "#FFD480", "rich-cocoa": "#5A3E2B", "muted-sand": "#B38B6D", "pure-white": "#FFFFFF", "soft-ivory": "#F4E6D7", "dark-charcoal": "#3B2F2F" }

<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: #FF7F32; --gradient-partner: #FFA570; --gradient-accent: #B38B6D; --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: #FF7F32; --gradient-text-b: #8A593C; --gradient-text-c: #B38B6D; 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>