Eclectic Vibrant Earthy Color Palette for Creative Brands

Eclectic Vibrant Earthy Color Palette

This color palette reflects the vibrant and eclectic energy of the image, combining rich earthy browns and warm reds with cool metallics and soft pastels. The main colors provide a dynamic and recognizable foundation that balances warmth and coolness, while the support colors add depth and subtle contrast. Neutrals ground the palette for practical usability in text, backgrounds, and interface elements, making it versatile yet distinctive.

AnalogousCreativevibranteclecticearthymetallic

Main (Brand) Colors

The main colors combine warm earthy browns and reds with a cool metallic silver, creating a harmonious and visually engaging foundation that is both vibrant and grounded.

PrimarySaddle Brown

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

A rich, warm brown that anchors the palette with grounded, natural energy and sophistication.

HEX#6B4423

RGB107, 68, 35

HSL28, 51, 28

CMYK0, 36, 67, 58

SecondaryCrimson

RolesBtn Secondary Bg

A bold crimson red that introduces vibrancy and passion, creating distinct contrast for secondary actions.

HEX#B3413F

RGB179, 65, 63

HSL1, 48, 47

CMYK0, 64, 65, 30

TertiaryCadet Gray

RolesHeadline

A cool, muted metallic shade that adds a modern, sleek touch complementing the warmer main colors.

HEX#9FA6A9

RGB159, 166, 169

HSL198, 5, 64

CMYK6, 2, 0, 34

Support Colors

Support colors provide subtle accents with balanced tones that extend the main colors and enhance interface clarity without overpowering the palette.

Khaki Brown

RolesIcon, Border, Divider, Outline

A soft khaki brown that complements the warm tones while supporting textural depth.

HEX#A57C5B

RGB165, 124, 91

HSL27, 29, 50

CMYK0, 25, 45, 35

Muted Aubergine

A muted purplish tone that balances the palette by adding a touch of cool sophistication.

HEX#8A5D7B

RGB138, 93, 123

HSL320, 19, 45

CMYK0, 33, 11, 46

Neutral Colors

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

Ivory

RolesBg Light, Btn Primary Text, Btn Secondary Text

HEX#F3F2F1

RGB243, 242, 241

HSL30, 8, 95

CMYK0, 0, 1, 5

Charcoal

RolesText

HEX#1B1B1B

RGB27, 27, 27

HSL0, 0, 11

CMYK0, 0, 0, 89

Slate Gray

RolesBg Dark

HEX#373737

RGB55, 55, 55

HSL0, 0, 22

CMYK0, 0, 0, 78

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Saddle Brown", "hex": "#6B4423", "role": "main", "cmyk": { "c": 0, "m": 36, "y": 67, "k": 58, "source": "colorfly" } }, { "name": "Crimson", "hex": "#B3413F", "role": "main", "cmyk": { "c": 0, "m": 64, "y": 65, "k": 30, "source": "colorfly" } }, { "name": "Cadet Gray", "hex": "#9FA6A9", "role": "main", "cmyk": { "c": 6, "m": 2, "y": 0, "k": 34, "source": "colorfly" } }, { "name": "Khaki Brown", "hex": "#A57C5B", "role": "support", "cmyk": { "c": 0, "m": 25, "y": 45, "k": 35, "source": "colorfly" } }, { "name": "Muted Aubergine", "hex": "#8A5D7B", "role": "support", "cmyk": { "c": 0, "m": 33, "y": 11, "k": 46, "source": "colorfly" } }, { "name": "Ivory", "hex": "#F3F2F1", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 1, "k": 5, "source": "colorfly" } }, { "name": "Charcoal", "hex": "#1B1B1B", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 89, "source": "colorfly" } }, { "name": "Slate Gray", "hex": "#373737", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 78, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-saddle-brown: #6B4423; --color-crimson: #B3413F; --color-cadet-gray: #9FA6A9; --color-khaki-brown: #A57C5B; --color-muted-aubergine: #8A5D7B; --color-ivory: #F3F2F1; --color-charcoal: #1B1B1B; --color-slate-gray: #373737; }

:root { --role-logo: #6B4423; --role-link: #6B4423; --role-btn-primary-bg: #6B4423; --role-btn-outlined-border: #6B4423; --role-btn-outlined-text: #6B4423; --role-btn-secondary-bg: #B3413F; --role-headline: #9FA6A9; --role-icon: #A57C5B; --role-border: #A57C5B; --role-divider: #A57C5B; --role-outline: #A57C5B; --role-bg-light: #F3F2F1; --role-btn-primary-text: #F3F2F1; --role-btn-secondary-text: #F3F2F1; --role-text: #1B1B1B; --role-bg-dark: #373737; }

{ "saddle-brown": "#6B4423", "crimson": "#B3413F", "cadet-gray": "#9FA6A9", "khaki-brown": "#A57C5B", "muted-aubergine": "#8A5D7B", "ivory": "#F3F2F1", "charcoal": "#1B1B1B", "slate-gray": "#373737" }

<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: #6B4423; --gradient-partner: #AE9886; --gradient-accent: #A57C5B; --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: #6B4423; --gradient-text-b: #AE9886; --gradient-text-c: #A57C5B; 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>