Blush Lavender Grey Color Palette for Beauty and Wellness Brands

Blush Lavender Grey Color Palette

This palette draws inspiration from the soft blush, gentle lavender, and warm grey tones of the image, creating a sophisticated and feminine visual identity. The combination balances delicate pastels with grounded neutrals, perfect for a beauty or wellness brand seeking elegance and approachability.

AnalogousHealth Wellnessblushlavendergreypastel

Main (Brand) Colors

The main colors create a harmonious and gentle look by combining closely related pink and purple tones with a warm grey for balance.

PrimaryBlush Pink

RolesLogo, Link, Btn Primary Bg

Blush Pink conveys femininity, softness, and a welcoming warmth that appeals to beauty and wellness audiences.

HEX#D8B4C7

RGB216, 180, 199

HSL328, 32, 78

CMYK0, 17, 8, 15

SecondaryMuted Lavender

RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text

Muted Lavender adds a subtle sophistication and calmness while complementing the blush tones to enrich the palette.

HEX#C9A1C7

RGB201, 161, 199

HSL303, 27, 71

CMYK0, 20, 1, 21

TertiaryWarm Slate

RolesHeadline

Warm Slate grounds the palette with an earthy, approachable tone that balances the lightness of the pastels.

HEX#9B8C87

RGB155, 140, 135

HSL15, 9, 57

CMYK0, 10, 13, 39

Support Colors

Support colors extend the main palette with soft complementary hues, enhancing usability without overpowering the gentle main tones.

Soft Rose Quartz

RolesIcon, Border, Divider, Outline

Soft Rose Quartz provides subtle accents that reinforce the blush and lavender tones for delicate visual details.

HEX#EFE6E9

RGB239, 230, 233

HSL340, 22, 92

CMYK0, 4, 3, 6

Dusty Taupe

Dusty Taupe offers a neutral anchor that harmonizes with Warm Slate for refined borders and icons.

HEX#B9A6A2

RGB185, 166, 162

HSL10, 14, 68

CMYK0, 10, 12, 27

Neutral Colors

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

Pure White

RolesBg Light

HEX#FFFFFF

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

Off White

HEX#F9F6F7

RGB249, 246, 247

HSL340, 20, 97

CMYK0, 1, 1, 2

Charcoal Brown

RolesBg Dark, Text, Btn Primary Text, Btn Secondary Text

HEX#342E2C

RGB52, 46, 44

HSL15, 8, 19

CMYK0, 12, 15, 80

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Blush Pink", "hex": "#D8B4C7", "role": "main", "cmyk": { "c": 0, "m": 17, "y": 8, "k": 15, "source": "colorfly" } }, { "name": "Muted Lavender", "hex": "#C9A1C7", "role": "main", "cmyk": { "c": 0, "m": 20, "y": 1, "k": 21, "source": "colorfly" } }, { "name": "Warm Slate", "hex": "#9B8C87", "role": "main", "cmyk": { "c": 0, "m": 10, "y": 13, "k": 39, "source": "colorfly" } }, { "name": "Soft Rose Quartz", "hex": "#EFE6E9", "role": "support", "cmyk": { "c": 0, "m": 4, "y": 3, "k": 6, "source": "colorfly" } }, { "name": "Dusty Taupe", "hex": "#B9A6A2", "role": "support", "cmyk": { "c": 0, "m": 10, "y": 12, "k": 27, "source": "colorfly" } }, { "name": "Pure White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Off White", "hex": "#F9F6F7", "role": "neutral", "cmyk": { "c": 0, "m": 1, "y": 1, "k": 2, "source": "colorfly" } }, { "name": "Charcoal Brown", "hex": "#342E2C", "role": "neutral", "cmyk": { "c": 0, "m": 12, "y": 15, "k": 80, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-blush-pink: #D8B4C7; --color-muted-lavender: #C9A1C7; --color-warm-slate: #9B8C87; --color-soft-rose-quartz: #EFE6E9; --color-dusty-taupe: #B9A6A2; --color-pure-white: #FFFFFF; --color-off-white: #F9F6F7; --color-charcoal-brown: #342E2C; }

:root { --role-logo: #D8B4C7; --role-link: #D8B4C7; --role-btn-primary-bg: #D8B4C7; --role-btn-secondary-bg: #C9A1C7; --role-btn-outlined-border: #C9A1C7; --role-btn-outlined-text: #C9A1C7; --role-headline: #9B8C87; --role-icon: #EFE6E9; --role-border: #EFE6E9; --role-divider: #EFE6E9; --role-outline: #EFE6E9; --role-bg-light: #FFFFFF; --role-bg-dark: #342E2C; --role-text: #342E2C; --role-btn-primary-text: #342E2C; --role-btn-secondary-text: #342E2C; }

{ "blush-pink": "#D8B4C7", "muted-lavender": "#C9A1C7", "warm-slate": "#9B8C87", "soft-rose-quartz": "#EFE6E9", "dusty-taupe": "#B9A6A2", "pure-white": "#FFFFFF", "off-white": "#F9F6F7", "charcoal-brown": "#342E2C" }

<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: #D8B4C7; --gradient-partner: #A48997; --gradient-accent: #EFE6E9; --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: #75616B; --gradient-text-b: #A48997; --gradient-text-c: #8F8A8C; 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>