Warm Guitar-Inspired Color Palette for Creative Brands

Warm Guitar Inspired Color Palette

This palette features warm, inviting main colors inspired by the vibrant orange body of the guitar and its classic design, paired with complementary browns and soft neutrals to create an elegant yet approachable system. The rich orange draws attention and energy, the dark brown grounds the palette with stability, and the beige accent adds warmth and softness while the neutrals deliver balance and readability.

MonochromaticCreativeguitarwarm colorsmusiccreative

Main (Brand) Colors

The main colors balance the bright, energetic orange with deep brown and soft beige to evoke a cozy, artistic vibe consistent with a guitar's classic look.

PrimaryTangerine

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

Tangerine conveys energy and creativity, making it perfect for recognizable brand elements.

HEX#F76C2F

RGB247, 108, 47

HSL18, 93, 58

CMYK0, 56, 81, 3

SecondaryChocolate Brown

RolesBtn Secondary Bg, Headline

Chocolate Brown adds depth and sophistication as a strong, stabilizing background and headline color.

HEX#5D3A1A

RGB93, 58, 26

HSL29, 56, 23

CMYK0, 38, 72, 64

TertiaryBeige Sand

Beige Sand introduces a soft, warm accent that complements the bold orange and brown while keeping the palette approachable.

HEX#D9B48F

RGB217, 180, 143

HSL30, 49, 71

CMYK0, 17, 34, 15

Support Colors

Support colors extend the palette with harmonious muted browns and gentle orange-beige tones that reinforce warmth and create visual interest without overpowering the main colors.

Caramel

RolesIcon, Border, Divider, Outline

Caramel balances and softens the richer brown and vivid orange, adding subtle texture for UI elements.

HEX#B27444

RGB178, 116, 68

HSL26, 45, 48

CMYK0, 35, 62, 30

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

Soft Ivory

RolesBg Dark

HEX#F6F0E9

RGB246, 240, 233

HSL32, 42, 94

CMYK0, 2, 5, 4

Charcoal

RolesText, Btn Primary Text

HEX#3B3B3B

RGB59, 59, 59

HSL0, 0, 23

CMYK0, 0, 0, 77

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Tangerine", "hex": "#F76C2F", "role": "main", "cmyk": { "c": 0, "m": 56, "y": 81, "k": 3, "source": "colorfly" } }, { "name": "Chocolate Brown", "hex": "#5D3A1A", "role": "main", "cmyk": { "c": 0, "m": 38, "y": 72, "k": 64, "source": "colorfly" } }, { "name": "Beige Sand", "hex": "#D9B48F", "role": "main", "cmyk": { "c": 0, "m": 17, "y": 34, "k": 15, "source": "colorfly" } }, { "name": "Caramel", "hex": "#B27444", "role": "support", "cmyk": { "c": 0, "m": 35, "y": 62, "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": "#F6F0E9", "role": "neutral", "cmyk": { "c": 0, "m": 2, "y": 5, "k": 4, "source": "colorfly" } }, { "name": "Charcoal", "hex": "#3B3B3B", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 77, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-tangerine: #F76C2F; --color-chocolate-brown: #5D3A1A; --color-beige-sand: #D9B48F; --color-caramel: #B27444; --color-pure-white: #FFFFFF; --color-soft-ivory: #F6F0E9; --color-charcoal: #3B3B3B; }

:root { --role-logo: #F76C2F; --role-link: #F76C2F; --role-btn-primary-bg: #F76C2F; --role-btn-outlined-border: #F76C2F; --role-btn-outlined-text: #F76C2F; --role-btn-secondary-bg: #5D3A1A; --role-headline: #5D3A1A; --role-icon: #B27444; --role-border: #B27444; --role-divider: #B27444; --role-outline: #B27444; --role-bg-light: #FFFFFF; --role-btn-secondary-text: #FFFFFF; --role-bg-dark: #F6F0E9; --role-text: #3B3B3B; --role-btn-primary-text: #3B3B3B; }

{ "tangerine": "#F76C2F", "chocolate-brown": "#5D3A1A", "beige-sand": "#D9B48F", "caramel": "#B27444", "pure-white": "#FFFFFF", "soft-ivory": "#F6F0E9", "charcoal": "#3B3B3B" }

<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: #F76C2F; --gradient-partner: #FBAE8D; --gradient-accent: #B27444; --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: #F76C2F; --gradient-text-b: #885E4C; --gradient-text-c: #B27444; 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>