Soft Organic Mushroom Color Palette for Wellness Brands

Soft Organic Mushroom Color Palette

This palette embraces soft, natural hues inspired by delicate mushroom tones and light parchment shades, creating an organic, comforting, and approachable brand identity. It balances warm neutrals and gentle greens to convey calmness and growth, suitable for wellness or artisanal brands.

AnalogousHealth Wellnessmushroomorganicsoft greenwarm beige

Main (Brand) Colors

The main colors combine gentle mushroom beige, soft warm taupe, and a muted green, reflecting natural organic elements in harmony that create a soothing and recognizable brand foundation.

PrimaryMushroom Beige

RolesLogo, Btn Primary Bg, Btn Outlined Border

Mushroom Beige conveys warmth and comfort, anchoring the palette with an organic and approachable tone.

HEX#C9B99A

RGB201, 185, 154

HSL40, 30, 70

CMYK0, 8, 23, 21

SecondaryWarm Taupe

RolesLink, Btn Secondary Bg, Headline

Warm Taupe adds depth and softness, complementing the primary beige while enhancing legibility.

HEX#CABDA3

RGB202, 189, 163

HSL40, 27, 72

CMYK0, 6, 19, 21

TertiaryMoss Green

RolesBtn Outlined Text

Moss Green introduces a serene natural accent, symbolizing growth and balance in the palette.

HEX#7C8B71

RGB124, 139, 113

HSL95, 10, 49

CMYK11, 0, 19, 45

Support Colors

Support colors extend the main palette via calm, understated hues that reinforce natural comfort without overpowering the main colors.

Parchment Sand

RolesIcon, Border, Divider, Outline

Parchment Sand subtly highlights details and structure, marrying softly with the mushroom and taupe base.

HEX#B8A77A

RGB184, 167, 122

HSL44, 30, 60

CMYK0, 9, 34, 28

Neutral Colors

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

Soft Ivory

RolesBg Light

HEX#FDFBE8

RGB253, 251, 232

HSL54, 84, 95

CMYK0, 1, 8, 1

Dark Charcoal

RolesText, Btn Primary Text, Btn Secondary Text

HEX#3E3A31

RGB62, 58, 49

HSL42, 12, 22

CMYK0, 6, 21, 76

Light Stone

RolesBg Dark

HEX#DDD7C8

RGB221, 215, 200

HSL43, 24, 83

CMYK0, 3, 10, 13

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Mushroom Beige", "hex": "#C9B99A", "role": "main", "cmyk": { "c": 0, "m": 8, "y": 23, "k": 21, "source": "colorfly" } }, { "name": "Warm Taupe", "hex": "#CABDA3", "role": "main", "cmyk": { "c": 0, "m": 6, "y": 19, "k": 21, "source": "colorfly" } }, { "name": "Moss Green", "hex": "#7C8B71", "role": "main", "cmyk": { "c": 11, "m": 0, "y": 19, "k": 45, "source": "colorfly" } }, { "name": "Parchment Sand", "hex": "#B8A77A", "role": "support", "cmyk": { "c": 0, "m": 9, "y": 34, "k": 28, "source": "colorfly" } }, { "name": "Soft Ivory", "hex": "#FDFBE8", "role": "neutral", "cmyk": { "c": 0, "m": 1, "y": 8, "k": 1, "source": "colorfly" } }, { "name": "Dark Charcoal", "hex": "#3E3A31", "role": "neutral", "cmyk": { "c": 0, "m": 6, "y": 21, "k": 76, "source": "colorfly" } }, { "name": "Light Stone", "hex": "#DDD7C8", "role": "neutral", "cmyk": { "c": 0, "m": 3, "y": 10, "k": 13, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-mushroom-beige: #C9B99A; --color-warm-taupe: #CABDA3; --color-moss-green: #7C8B71; --color-parchment-sand: #B8A77A; --color-soft-ivory: #FDFBE8; --color-dark-charcoal: #3E3A31; --color-light-stone: #DDD7C8; }

:root { --role-logo: #C9B99A; --role-btn-primary-bg: #C9B99A; --role-btn-outlined-border: #C9B99A; --role-link: #CABDA3; --role-btn-secondary-bg: #CABDA3; --role-headline: #CABDA3; --role-btn-outlined-text: #7C8B71; --role-icon: #B8A77A; --role-border: #B8A77A; --role-divider: #B8A77A; --role-outline: #B8A77A; --role-bg-light: #FDFBE8; --role-text: #3E3A31; --role-btn-primary-text: #3E3A31; --role-btn-secondary-text: #3E3A31; --role-bg-dark: #DDD7C8; }

{ "mushroom-beige": "#C9B99A", "warm-taupe": "#CABDA3", "moss-green": "#7C8B71", "parchment-sand": "#B8A77A", "soft-ivory": "#FDFBE8", "dark-charcoal": "#3E3A31", "light-stone": "#DDD7C8" }

<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: #C9B99A; --gradient-partner: #998D75; --gradient-accent: #B8A77A; --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: #6D6453; --gradient-text-b: #998D75; --gradient-text-c: #B8A77A; 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>