Charcoal Parchment Olive Color Palette for Editorial Lifestyle Brands...

Charcoal Parchment Olive Color Palette

A moody neutral-led palette with charcoal, olive-slate, and parchment warmth, tuned for a refined interface that feels editorial and grounded. The colors work together as a restrained system that keeps the image-inspired contrast and softness while staying practical for UI and brand use.

MonochromaticLuxury And Lifestyleeditorialneutralearthyminimal

Main (Brand) Colors

Deep charcoal and muted olive-slate create a quiet, high-contrast relationship, while a warm parchment tone softens the system for a more approachable, tactile feel. The palette reads as a cohesive, image-inspired set rather than a strict a

PrimaryInk Charcoal

RolesLogo, Btn Primary Bg

Anchors the brand with a dark, polished base that feels confident and tailored.

HEX#171615

RGB23, 22, 21

HSL30, 5, 9

CMYK0, 4, 9, 91

SecondaryOlive Slate

RolesLink, Btn Secondary Bg

Adds a muted botanical undertone that keeps the system from feeling too stark.

HEX#5A5A4A

RGB90, 90, 74

HSL60, 10, 32

CMYK0, 0, 18, 65

TertiaryParchment Clay

RolesHeadline, Btn Outlined Border, Btn Outlined Text

Brings a soft, luminous warmth that echoes the lighter surfaces in the source image.

HEX#D8CDB6

RGB216, 205, 182

HSL41, 30, 78

CMYK0, 5, 16, 15

Support Colors

These accents extend the main palette with subdued, functional detail rather than competing color energy. They add depth, interface clarity, and subtle variation while staying in a

Moss Taupe

RolesIcon, Border

Supports navigation and structure with a muted earthy mid-tone that blends comfortably with charcoal and olive.

HEX#7D7767

RGB125, 119, 103

HSL44, 10, 45

CMYK0, 5, 18, 51

Stone Linen

RolesDivider, Outline

Provides a soft separating tone for UI lines and containers without drawing attention away from content.

HEX#B7AF9E

RGB183, 175, 158

HSL41, 15, 67

CMYK0, 4, 14, 28

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

Soft Ivory

HEX#F6F2E8

RGB246, 242, 232

HSL43, 44, 94

CMYK0, 2, 6, 4

Near Black

RolesBg Dark, Text

HEX#0F0F0E

RGB15, 15, 14

HSL60, 3, 6

CMYK0, 0, 7, 94

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Ink Charcoal", "hex": "#171615", "role": "main", "cmyk": { "c": 0, "m": 4, "y": 9, "k": 91, "source": "colorfly" } }, { "name": "Olive Slate", "hex": "#5A5A4A", "role": "main", "cmyk": { "c": 0, "m": 0, "y": 18, "k": 65, "source": "colorfly" } }, { "name": "Parchment Clay", "hex": "#D8CDB6", "role": "main", "cmyk": { "c": 0, "m": 5, "y": 16, "k": 15, "source": "colorfly" } }, { "name": "Moss Taupe", "hex": "#7D7767", "role": "support", "cmyk": { "c": 0, "m": 5, "y": 18, "k": 51, "source": "colorfly" } }, { "name": "Stone Linen", "hex": "#B7AF9E", "role": "support", "cmyk": { "c": 0, "m": 4, "y": 14, "k": 28, "source": "colorfly" } }, { "name": "Pure White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Soft Ivory", "hex": "#F6F2E8", "role": "neutral", "cmyk": { "c": 0, "m": 2, "y": 6, "k": 4, "source": "colorfly" } }, { "name": "Near Black", "hex": "#0F0F0E", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 7, "k": 94, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-ink-charcoal: #171615; --color-olive-slate: #5A5A4A; --color-parchment-clay: #D8CDB6; --color-moss-taupe: #7D7767; --color-stone-linen: #B7AF9E; --color-pure-white: #FFFFFF; --color-soft-ivory: #F6F2E8; --color-near-black: #0F0F0E; }

:root { --role-logo: #171615; --role-btn-primary-bg: #171615; --role-link: #5A5A4A; --role-btn-secondary-bg: #5A5A4A; --role-headline: #D8CDB6; --role-btn-outlined-border: #D8CDB6; --role-btn-outlined-text: #D8CDB6; --role-icon: #7D7767; --role-border: #7D7767; --role-divider: #B7AF9E; --role-outline: #B7AF9E; --role-bg-light: #FFFFFF; --role-btn-primary-text: #FFFFFF; --role-btn-secondary-text: #FFFFFF; --role-bg-dark: #0F0F0E; --role-text: #0F0F0E; }

{ "ink-charcoal": "#171615", "olive-slate": "#5A5A4A", "parchment-clay": "#D8CDB6", "moss-taupe": "#7D7767", "stone-linen": "#B7AF9E", "pure-white": "#FFFFFF", "soft-ivory": "#F6F2E8", "near-black": "#0F0F0E" }

<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: #171615; --gradient-partner: #7F7F7E; --gradient-accent: #7D7767; --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: #171615; --gradient-text-b: #7F7F7E; --gradient-text-c: #7D7767; 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>