Coral Pink Lavender Color Palette for Beauty and Wellness Brands

Coral Pink Lavender Color Palette

This palette blends warm coral tones with soft pinks and tranquil lavender, creating a soothing yet uplifting system perfect for beauty and wellness brands. The warm coral provides energetic recognition, while the lavender and blush pink offer complementary calmness, supported by subtle taupe accents and balanced neutrals.

AnalogousFashion Beautycoralpinklavenderbeauty

Main (Brand) Colors

The palette centers on warm coral, soft blush pink, and gentle lavender, forming an analogous harmony that feels cohesive and fresh while maintaining distinct identity marks.

PrimaryCoral

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

This vibrant Coral energizes the brand, evoking warmth, friendliness, and approachability.

HEX#FF6F61

RGB255, 111, 97

HSL5, 100, 69

CMYK0, 56, 62, 0

SecondaryBlush Pink

RolesBtn Secondary Bg, Headline

Blush Pink softens the palette with nurturing tenderness and a gentle feminine touch.

HEX#F6CDD6

RGB246, 205, 214

HSL347, 69, 88

CMYK0, 17, 13, 4

TertiaryLavender Gray

RolesIcon, Border, Divider, Outline

Lavender Gray provides calmness and balance, grounding the warmer tones with serene sophistication.

HEX#BFA4C5

RGB191, 164, 197

HSL289, 22, 71

CMYK3, 17, 0, 23

Support Colors

Support colors introduce muted peach and taupe shades to extend warmth and subtlety without overpowering the main colors.

Muted Peach

RolesBg Light

Muted Peach adds a soft neutral warmth that complements Coral and enhances legibility on lighter backgrounds.

HEX#E4B7A0

RGB228, 183, 160

HSL20, 56, 76

CMYK0, 20, 30, 11

Taupe

RolesBg Dark

Taupe offers a grounded, earthy depth that balances the lighter warm hues and supports overall palette harmony.

HEX#A8998E

RGB168, 153, 142

HSL25, 13, 61

CMYK0, 9, 15, 34

Neutral Colors

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

White

HEX#FFFFFF

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

Ivory

HEX#F9F5F2

RGB249, 245, 242

HSL26, 37, 96

CMYK0, 2, 3, 2

Charcoal

RolesText, Btn Primary Text, Btn Secondary Text

HEX#362E2A

RGB54, 46, 42

HSL20, 13, 19

CMYK0, 15, 22, 79

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Coral", "hex": "#FF6F61", "role": "main", "cmyk": { "c": 0, "m": 56, "y": 62, "k": 0, "source": "colorfly" } }, { "name": "Blush Pink", "hex": "#F6CDD6", "role": "main", "cmyk": { "c": 0, "m": 17, "y": 13, "k": 4, "source": "colorfly" } }, { "name": "Lavender Gray", "hex": "#BFA4C5", "role": "main", "cmyk": { "c": 3, "m": 17, "y": 0, "k": 23, "source": "colorfly" } }, { "name": "Muted Peach", "hex": "#E4B7A0", "role": "support", "cmyk": { "c": 0, "m": 20, "y": 30, "k": 11, "source": "colorfly" } }, { "name": "Taupe", "hex": "#A8998E", "role": "support", "cmyk": { "c": 0, "m": 9, "y": 15, "k": 34, "source": "colorfly" } }, { "name": "White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Ivory", "hex": "#F9F5F2", "role": "neutral", "cmyk": { "c": 0, "m": 2, "y": 3, "k": 2, "source": "colorfly" } }, { "name": "Charcoal", "hex": "#362E2A", "role": "neutral", "cmyk": { "c": 0, "m": 15, "y": 22, "k": 79, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-coral: #FF6F61; --color-blush-pink: #F6CDD6; --color-lavender-gray: #BFA4C5; --color-muted-peach: #E4B7A0; --color-taupe: #A8998E; --color-white: #FFFFFF; --color-ivory: #F9F5F2; --color-charcoal: #362E2A; }

:root { --role-logo: #FF6F61; --role-link: #FF6F61; --role-btn-primary-bg: #FF6F61; --role-btn-outlined-border: #FF6F61; --role-btn-outlined-text: #FF6F61; --role-btn-secondary-bg: #F6CDD6; --role-headline: #F6CDD6; --role-icon: #BFA4C5; --role-border: #BFA4C5; --role-divider: #BFA4C5; --role-outline: #BFA4C5; --role-bg-light: #E4B7A0; --role-bg-dark: #A8998E; --role-text: #362E2A; --role-btn-primary-text: #362E2A; --role-btn-secondary-text: #362E2A; }

{ "coral": "#FF6F61", "blush-pink": "#F6CDD6", "lavender-gray": "#BFA4C5", "muted-peach": "#E4B7A0", "taupe": "#A8998E", "white": "#FFFFFF", "ivory": "#F9F5F2", "charcoal": "#362E2A" }

<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: #FF6F61; --gradient-partner: #FF9A90; --gradient-accent: #E4B7A0; --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: #FF6F61; --gradient-text-b: #8A534E; --gradient-text-c: #7B6356; 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>