Earthy Adventure Color Palette for Fashion and Lifestyle Brands

Earthy Adventure Fashion Color Palette

This color palette is inspired by the image's earthy and natural tones, evoking a sense of adventurous spirit and grounded sophistication. The main colors capture the rugged textures of leather and stone, while the support colors provide subtle contrasts reflecting natural shadows and sky tones. The neutrals anchor the palette, offering versatile options for text and backgrounds that maintain readability and visual balance.

MonochromaticFashion Beautyearthyadventureruggednatural

Main (Brand) Colors

The main colors blend warm browns and muted oranges to create a cohesive and recognizable system that reflects the organic and rugged feel of the source image.

PrimaryWalnut Brown

RolesLogo, Btn Primary Bg, Link

This deep warm brown conveys strength and natural durability, embodying the leather texture in the image.

HEX#7A5C40

RGB122, 92, 64

HSL29, 31, 36

CMYK0, 25, 48, 52

SecondaryClay Brown

RolesBtn Secondary Bg, Headline

A softer, muted brown that balances intensity with an approachable warmth, supporting the primary color elegantly.

HEX#A9745B

RGB169, 116, 91

HSL19, 31, 51

CMYK0, 31, 46, 34

TertiarySandstone

RolesBtn Outlined Border, Btn Outlined Text

A subdued orange-brown that complements the richer browns by bringing a gentle earthiness and subtle highlight.

HEX#C59571

RGB197, 149, 113

HSL26, 42, 61

CMYK0, 24, 43, 23

Support Colors

Support colors add muted greys and blues reminiscent of stone and sky, providing contrast and subtle accents that enhance the rugged, natural aesthetic without overpowering the main earth tones.

Slate Grey

RolesIcon, Border, Divider, Outline

A cool, muted grey with blue undertones that provides visual balance and supports the warm main colors with understated contrast.

HEX#5A6A6E

RGB90, 106, 110

HSL192, 10, 39

CMYK18, 4, 0, 57

Sky Blue

RolesBg Dark, Bg Light

This soft, desaturated blue reflects the sky, offering a calming backdrop and enhancing the palette's natural feel without competing with warmer tones.

HEX#91A5B4

RGB145, 165, 180

HSL206, 19, 64

CMYK19, 8, 0, 29

Neutral Colors

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

Pure White

RolesBtn Primary Text, Btn Secondary Text

HEX#FFFFFF

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

Ivory

HEX#F4F1EB

RGB244, 241, 235

HSL40, 29, 94

CMYK0, 1, 4, 4

Charcoal

RolesText

HEX#2E2B28

RGB46, 43, 40

HSL30, 7, 17

CMYK0, 7, 13, 82

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Walnut Brown", "hex": "#7A5C40", "role": "main", "cmyk": { "c": 0, "m": 25, "y": 48, "k": 52, "source": "colorfly" } }, { "name": "Clay Brown", "hex": "#A9745B", "role": "main", "cmyk": { "c": 0, "m": 31, "y": 46, "k": 34, "source": "colorfly" } }, { "name": "Sandstone", "hex": "#C59571", "role": "main", "cmyk": { "c": 0, "m": 24, "y": 43, "k": 23, "source": "colorfly" } }, { "name": "Slate Grey", "hex": "#5A6A6E", "role": "support", "cmyk": { "c": 18, "m": 4, "y": 0, "k": 57, "source": "colorfly" } }, { "name": "Sky Blue", "hex": "#91A5B4", "role": "support", "cmyk": { "c": 19, "m": 8, "y": 0, "k": 29, "source": "colorfly" } }, { "name": "Pure White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Ivory", "hex": "#F4F1EB", "role": "neutral", "cmyk": { "c": 0, "m": 1, "y": 4, "k": 4, "source": "colorfly" } }, { "name": "Charcoal", "hex": "#2E2B28", "role": "neutral", "cmyk": { "c": 0, "m": 7, "y": 13, "k": 82, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-walnut-brown: #7A5C40; --color-clay-brown: #A9745B; --color-sandstone: #C59571; --color-slate-grey: #5A6A6E; --color-sky-blue: #91A5B4; --color-pure-white: #FFFFFF; --color-ivory: #F4F1EB; --color-charcoal: #2E2B28; }

:root { --role-logo: #7A5C40; --role-btn-primary-bg: #7A5C40; --role-link: #7A5C40; --role-btn-secondary-bg: #A9745B; --role-headline: #A9745B; --role-btn-outlined-border: #C59571; --role-btn-outlined-text: #C59571; --role-icon: #5A6A6E; --role-border: #5A6A6E; --role-divider: #5A6A6E; --role-outline: #5A6A6E; --role-bg-dark: #91A5B4; --role-bg-light: #91A5B4; --role-btn-primary-text: #FFFFFF; --role-btn-secondary-text: #FFFFFF; --role-text: #2E2B28; }

{ "walnut-brown": "#7A5C40", "clay-brown": "#A9745B", "sandstone": "#C59571", "slate-grey": "#5A6A6E", "sky-blue": "#91A5B4", "pure-white": "#FFFFFF", "ivory": "#F4F1EB", "charcoal": "#2E2B28" }

<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: #7A5C40; --gradient-partner: #B6A596; --gradient-accent: #CFC4BA; --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: #7A5C40; --gradient-text-b: #B6A596; --gradient-text-c: #706A64; 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>

Earthy Adventure Fashion Color Palette

Earthy Adventure Fashion 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

Earthy Adventure Fashion 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