Olive and Pink Color Palette for Organic Vintage Fashion Brands

Olive Pink Organic Color Palette

This color palette combines earthy olive greens with soft, warm pinks to create a balanced, approachable brand identity that feels natural yet inviting. The main colors work together to offer a harmonious contrast reflecting the organic and vintage vibes from the inspiration image, while the support colors add subtle depth and usability for interface elements. Neutrals provide clarity and readability across backgrounds and text.

AnalogousFashion Beautyolive greenpinknaturalearthy

Main (Brand) Colors

The main palette features an olive green and a dusty pink that form a soft complementary color harmony, evoking natural earth tones paired with warm, nostalgic accents.

PrimaryOlive Green

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

Olive Green provides an earthy, grounded tone evoking nature and sustainability, ideal for core branding and buttons.

HEX#7B8862

RGB123, 136, 98

HSL81, 16, 46

CMYK10, 0, 28, 47

SecondaryDusky Rose

RolesBtn Secondary Bg

Dusky Rose offers a warm, muted pink complement that enhances approachability and contrast for button texts.

HEX#D4A29C

RGB212, 162, 156

HSL6, 39, 72

CMYK0, 24, 26, 17

TertiarySage Green

Sage Green extends the green family with a softer hue that supports but does not overpower the primary olive.

HEX#A7B38B

RGB167, 179, 139

HSL78, 21, 62

CMYK7, 0, 22, 30

Support Colors

These muted, desaturated support colors reinforce the natural and vintage vibes without competing with the main palette, providing versatile accents.

Moss

RolesIcon, Border, Divider, Outline

Moss anchors the palette with a deeper green shade to maintain subtle depth in UI elements and borders.

HEX#726C4A

RGB114, 108, 74

HSL51, 21, 37

CMYK0, 5, 35, 55

Muted Clay

Muted Clay adds a neutral warm tone balancing pink and green hues as a subtle highlight or secondary headline color.

HEX#C3B0A3

RGB195, 176, 163

HSL24, 21, 70

CMYK0, 10, 16, 24

Neutral Colors

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

Pure White

RolesBg Light, Btn Primary Text

HEX#FFFFFF

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

Soft Cream

HEX#F1E6E2

RGB241, 230, 226

HSL16, 35, 92

CMYK0, 5, 6, 5

Charcoal

RolesBg Dark, Text, Btn Secondary Text

HEX#2B2B2B

RGB43, 43, 43

HSL0, 0, 17

CMYK0, 0, 0, 83

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Olive Green", "hex": "#7B8862", "role": "main", "cmyk": { "c": 10, "m": 0, "y": 28, "k": 47, "source": "colorfly" } }, { "name": "Dusky Rose", "hex": "#D4A29C", "role": "main", "cmyk": { "c": 0, "m": 24, "y": 26, "k": 17, "source": "colorfly" } }, { "name": "Sage Green", "hex": "#A7B38B", "role": "main", "cmyk": { "c": 7, "m": 0, "y": 22, "k": 30, "source": "colorfly" } }, { "name": "Moss", "hex": "#726C4A", "role": "support", "cmyk": { "c": 0, "m": 5, "y": 35, "k": 55, "source": "colorfly" } }, { "name": "Muted Clay", "hex": "#C3B0A3", "role": "support", "cmyk": { "c": 0, "m": 10, "y": 16, "k": 24, "source": "colorfly" } }, { "name": "Pure White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Soft Cream", "hex": "#F1E6E2", "role": "neutral", "cmyk": { "c": 0, "m": 5, "y": 6, "k": 5, "source": "colorfly" } }, { "name": "Charcoal", "hex": "#2B2B2B", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 83, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-olive-green: #7B8862; --color-dusky-rose: #D4A29C; --color-sage-green: #A7B38B; --color-moss: #726C4A; --color-muted-clay: #C3B0A3; --color-pure-white: #FFFFFF; --color-soft-cream: #F1E6E2; --color-charcoal: #2B2B2B; }

:root { --role-logo: #7B8862; --role-link: #7B8862; --role-btn-primary-bg: #7B8862; --role-btn-outlined-border: #7B8862; --role-btn-outlined-text: #7B8862; --role-headline: #7B8862; --role-btn-secondary-bg: #D4A29C; --role-icon: #726C4A; --role-border: #726C4A; --role-divider: #726C4A; --role-outline: #726C4A; --role-bg-light: #FFFFFF; --role-btn-primary-text: #FFFFFF; --role-bg-dark: #2B2B2B; --role-text: #2B2B2B; --role-btn-secondary-text: #2B2B2B; }

{ "olive-green": "#7B8862", "dusky-rose": "#D4A29C", "sage-green": "#A7B38B", "moss": "#726C4A", "muted-clay": "#C3B0A3", "pure-white": "#FFFFFF", "soft-cream": "#F1E6E2", "charcoal": "#2B2B2B" }

<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: #7B8862; --gradient-partner: #B6BEA9; --gradient-accent: #726C4A; --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: #7B8862; --gradient-text-b: #62675B; --gradient-text-c: #726C4A; 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>

Olive Pink Organic Color Palette

Olive Pink Organic 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

Olive Pink Organic 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