Blush Pink Luxe Color Palette for Beauty and Wellness Brands

Blush Pink Luxe Color Palette

This refined palette is inspired by the soft, luxurious pinks and gentle neutrals of the image, creating a harmonious and elegant visual identity perfect for a beauty or wellness brand. The main colors balance warm blush tones with a fresh coral accent, while the support colors offer subtle contrast and additional warmth without overpowering.

MonochromaticFashion Beautyblushpinkluxurybeauty

Main (Brand) Colors

The main colors are gentle variations of warm pinks and corals that create a cohesive and elegant visual impact, suitable for highlighting femininity and luxury in the brand identity.

PrimaryBlush Pink

RolesLogo, Link, Btn Primary Bg

Blush Pink conveys warmth and sophistication, making a strong yet gentle visual brand foundation.

HEX#D8A39D

RGB216, 163, 157

HSL6, 43, 73

CMYK0, 25, 27, 15

SecondarySoft Coral

RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text

Soft Coral adds friendly, inviting energy that complements the primary warm pink without overwhelming.

HEX#F1C6B2

RGB241, 198, 178

HSL19, 69, 82

CMYK0, 18, 26, 5

TertiaryMuted Rose

RolesHeadline

Muted Rose provides a richer accent to add visual interest while maintaining harmony with the main pink hues.

HEX#EB8781

RGB235, 135, 129

HSL3, 73, 71

CMYK0, 43, 45, 8

Support Colors

Support colors extend warmth with softer tans and rose-infused browns that maintain the palette’s understated luxury and do not overpower the main pink tones.

Tea Rose

RolesIcon, Border, Divider, Outline

Tea Rose is a muted dusty pink-brown that complements the main colors by grounding the palette with softer neutrality.

HEX#C4A69F

RGB196, 166, 159

HSL11, 24, 70

CMYK0, 15, 19, 23

Light Mocha

Light Mocha adds a subtle earthiness that enhances warmth and balance for support roles in the interface.

HEX#D9B9AB

RGB217, 185, 171

HSL18, 38, 76

CMYK0, 15, 21, 15

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

Cream

RolesBg Dark

HEX#F9F7F6

RGB249, 247, 246

HSL20, 20, 97

CMYK0, 1, 1, 2

Dark Chocolate

RolesText, Btn Primary Text, Btn Secondary Text

HEX#3F2E2E

RGB63, 46, 46

HSL0, 16, 21

CMYK0, 27, 27, 75

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Blush Pink", "hex": "#D8A39D", "role": "main", "cmyk": { "c": 0, "m": 25, "y": 27, "k": 15, "source": "colorfly" } }, { "name": "Soft Coral", "hex": "#F1C6B2", "role": "main", "cmyk": { "c": 0, "m": 18, "y": 26, "k": 5, "source": "colorfly" } }, { "name": "Muted Rose", "hex": "#EB8781", "role": "main", "cmyk": { "c": 0, "m": 43, "y": 45, "k": 8, "source": "colorfly" } }, { "name": "Tea Rose", "hex": "#C4A69F", "role": "support", "cmyk": { "c": 0, "m": 15, "y": 19, "k": 23, "source": "colorfly" } }, { "name": "Light Mocha", "hex": "#D9B9AB", "role": "support", "cmyk": { "c": 0, "m": 15, "y": 21, "k": 15, "source": "colorfly" } }, { "name": "Pure White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Cream", "hex": "#F9F7F6", "role": "neutral", "cmyk": { "c": 0, "m": 1, "y": 1, "k": 2, "source": "colorfly" } }, { "name": "Dark Chocolate", "hex": "#3F2E2E", "role": "neutral", "cmyk": { "c": 0, "m": 27, "y": 27, "k": 75, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-blush-pink: #D8A39D; --color-soft-coral: #F1C6B2; --color-muted-rose: #EB8781; --color-tea-rose: #C4A69F; --color-light-mocha: #D9B9AB; --color-pure-white: #FFFFFF; --color-cream: #F9F7F6; --color-dark-chocolate: #3F2E2E; }

:root { --role-logo: #D8A39D; --role-link: #D8A39D; --role-btn-primary-bg: #D8A39D; --role-btn-secondary-bg: #F1C6B2; --role-btn-outlined-border: #F1C6B2; --role-btn-outlined-text: #F1C6B2; --role-headline: #EB8781; --role-icon: #C4A69F; --role-border: #C4A69F; --role-divider: #C4A69F; --role-outline: #C4A69F; --role-bg-light: #FFFFFF; --role-bg-dark: #F9F7F6; --role-text: #3F2E2E; --role-btn-primary-text: #3F2E2E; --role-btn-secondary-text: #3F2E2E; }

{ "blush-pink": "#D8A39D", "soft-coral": "#F1C6B2", "muted-rose": "#EB8781", "tea-rose": "#C4A69F", "light-mocha": "#D9B9AB", "pure-white": "#FFFFFF", "cream": "#F9F7F6", "dark-chocolate": "#3F2E2E" }

<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: #D8A39D; --gradient-partner: #E4BFBA; --gradient-accent: #A98D8A; --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: #755855; --gradient-text-b: #7B6764; --gradient-text-c: #A98D8A; 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>