Muted Green and Taupe Book-Inspired Color Palette for Creative Brands...

Muted Green Taupe Color Palette

This palette blends muted greens with warm taupe and neutral tones to evoke a serene yet refined atmosphere inspired by the natural hues and textures visible in the image of stacked books with a pale green backdrop. The balanced color system includes distinctive deep green for a trustworthy logo, grounded taupe and supportive olive accents, and a strong range of neutrals for accessibility and versatile usage.

CustomCreativemuted greentaupeoliveneutral palette

Main (Brand) Colors

The three main colors balance soft, deep green with warm taupe and olive to create a calming yet distinctive triad that visually anchors the brand identity and interface elements.

PrimaryDeep Fern Green

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

Deep Fern Green brings trust and calm with its natural, grounded tone, perfect for primary brand elements.

HEX#325945

RGB50, 89, 69

HSL149, 28, 27

CMYK44, 0, 22, 65

SecondaryWarm Taupe

RolesBtn Secondary Bg

Warm Taupe adds refined warmth and softness providing contrast and approachability for secondary actions.

HEX#8B7E74

RGB139, 126, 116

HSL26, 9, 50

CMYK0, 9, 17, 45

TertiaryOlive Moss

RolesIcon, Border, Divider, Outline

Olive Moss supports by giving subtle depth and natural balance without overpowering the main colors.

HEX#6A7A58

RGB106, 122, 88

HSL88, 16, 41

CMYK13, 0, 28, 52

Support Colors

Muted sage and soft gray-brown accents extend the palette by enhancing visual hierarchy and reinforcing the natural, tranquil brand feeling without distraction.

Muted Sage

Muted Sage adds a gentle, low-saturation green that complements the main greens and can be used for backgrounds or subtle accents.

HEX#B1B8AA

RGB177, 184, 170

HSL90, 9, 69

CMYK4, 0, 8, 28

Soft Gray-Brown

Soft Gray-Brown balances the warm taupe with a cooler neutral tone, enhancing usability for secondary accents.

HEX#A89C93

RGB168, 156, 147

HSL26, 11, 62

CMYK0, 7, 13, 34

Neutral Colors

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

Pure White

RolesBg Light, Btn Primary Text, Btn Secondary Text

HEX#FFFFFF

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

Light Ivory

HEX#E7E5E2

RGB231, 229, 226

HSL36, 9, 90

CMYK0, 1, 2, 9

Charcoal Black

RolesBg Dark, Text

HEX#2E2C28

RGB46, 44, 40

HSL40, 7, 17

CMYK0, 4, 13, 82

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Deep Fern Green", "hex": "#325945", "role": "main", "cmyk": { "c": 44, "m": 0, "y": 22, "k": 65, "source": "colorfly" } }, { "name": "Warm Taupe", "hex": "#8B7E74", "role": "main", "cmyk": { "c": 0, "m": 9, "y": 17, "k": 45, "source": "colorfly" } }, { "name": "Olive Moss", "hex": "#6A7A58", "role": "main", "cmyk": { "c": 13, "m": 0, "y": 28, "k": 52, "source": "colorfly" } }, { "name": "Muted Sage", "hex": "#B1B8AA", "role": "support", "cmyk": { "c": 4, "m": 0, "y": 8, "k": 28, "source": "colorfly" } }, { "name": "Soft Gray-Brown", "hex": "#A89C93", "role": "support", "cmyk": { "c": 0, "m": 7, "y": 13, "k": 34, "source": "colorfly" } }, { "name": "Pure White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Light Ivory", "hex": "#E7E5E2", "role": "neutral", "cmyk": { "c": 0, "m": 1, "y": 2, "k": 9, "source": "colorfly" } }, { "name": "Charcoal Black", "hex": "#2E2C28", "role": "neutral", "cmyk": { "c": 0, "m": 4, "y": 13, "k": 82, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-deep-fern-green: #325945; --color-warm-taupe: #8B7E74; --color-olive-moss: #6A7A58; --color-muted-sage: #B1B8AA; --color-soft-gray-brown: #A89C93; --color-pure-white: #FFFFFF; --color-light-ivory: #E7E5E2; --color-charcoal-black: #2E2C28; }

:root { --role-logo: #325945; --role-link: #325945; --role-btn-primary-bg: #325945; --role-btn-outlined-border: #325945; --role-btn-outlined-text: #325945; --role-headline: #325945; --role-btn-secondary-bg: #8B7E74; --role-icon: #6A7A58; --role-border: #6A7A58; --role-divider: #6A7A58; --role-outline: #6A7A58; --role-bg-light: #FFFFFF; --role-btn-primary-text: #FFFFFF; --role-btn-secondary-text: #FFFFFF; --role-bg-dark: #2E2C28; --role-text: #2E2C28; }

{ "deep-fern-green": "#325945", "warm-taupe": "#8B7E74", "olive-moss": "#6A7A58", "muted-sage": "#B1B8AA", "soft-gray-brown": "#A89C93", "pure-white": "#FFFFFF", "light-ivory": "#E7E5E2", "charcoal-black": "#2E2C28" }

<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: #325945; --gradient-partner: #8EA499; --gradient-accent: #B1B8AA; --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: #325945; --gradient-text-b: #8EA499; --gradient-text-c: #60635C; 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>

Muted Green Taupe Color Palette

Muted Green Taupe 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

Muted Green Taupe 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