Vibrant Pink Warmth Color Palette for Fashion and Beauty Brands

Vibrant Pink Warmth Color Palette

This palette is built on vibrant pinks balanced with soft neutrals to evoke an energetic yet approachable aesthetic. The main colors create a recognizable trio of rich, medium, and light pinks for distinct brand roles, while the support colors extend the warmth with complementary corals and muted rosy tones. The neutrals ground the bright colors with pure white, soft blush, and dark charcoal, ensuring readability and visual balance for UI elements.

MonochromaticFashion Beautypinkwarmfashionenergy

Main (Brand) Colors

These three pink hues form a warm, vibrant, and cohesive palette that provides clear visual hierarchy and brand recognition.

PrimaryCrimson Pink

RolesLogo, Link, Btn Primary Bg

Crimson Pink offers strong brand presence and energetic appeal for primary elements like the logo and buttons.

HEX#bc325c

RGB188, 50, 92

HSL342, 58, 47

CMYK0, 73, 51, 26

SecondaryCoral Pink

RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text

Coral Pink provides a softer, friendly contrast that supports secondary interactive elements visually distinct from the primary color.

HEX#f36781

RGB243, 103, 129

HSL349, 85, 68

CMYK0, 58, 47, 5

TertiaryBlush Pink

RolesHeadline

Blush Pink adds gentle warmth and elegance for headlines or supporting large text that complements the stronger pinks.

HEX#edc1c8

RGB237, 193, 200

HSL350, 55, 84

CMYK0, 19, 16, 7

Support Colors

The accents bring subtle warmth and calm tonal variations that harmonize with the primary pink hues without overpowering them.

Soft Coral

RolesIcon, Border, Divider, Outline

Soft Coral enriches the palette with low-saturation warmth perfect for subtle interface details and separators to balance the intense main colors.

HEX#f87592

RGB248, 117, 146

HSL347, 90, 72

CMYK0, 53, 41, 3

Neutral Colors

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

Rose Ivory

RolesBg Light

HEX#fef9f9

RGB254, 249, 249

HSL0, 71, 99

CMYK0, 2, 2, 0

Charcoal Black

RolesText, Btn Secondary Text

HEX#2c2a2a

RGB44, 42, 42

HSL0, 2, 17

CMYK0, 5, 5, 83

Pure White

RolesBg Dark, Btn Primary Text

HEX#fff9f8

RGB255, 249, 248

HSL9, 100, 99

CMYK0, 2, 3, 0

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Crimson Pink", "hex": "#BC325C", "role": "main", "cmyk": { "c": 0, "m": 73, "y": 51, "k": 26, "source": "colorfly" } }, { "name": "Coral Pink", "hex": "#F36781", "role": "main", "cmyk": { "c": 0, "m": 58, "y": 47, "k": 5, "source": "colorfly" } }, { "name": "Blush Pink", "hex": "#EDC1C8", "role": "main", "cmyk": { "c": 0, "m": 19, "y": 16, "k": 7, "source": "colorfly" } }, { "name": "Soft Coral", "hex": "#F87592", "role": "support", "cmyk": { "c": 0, "m": 53, "y": 41, "k": 3, "source": "colorfly" } }, { "name": "Rose Ivory", "hex": "#FEF9F9", "role": "neutral", "cmyk": { "c": 0, "m": 2, "y": 2, "k": 0, "source": "colorfly" } }, { "name": "Charcoal Black", "hex": "#2C2A2A", "role": "neutral", "cmyk": { "c": 0, "m": 5, "y": 5, "k": 83, "source": "colorfly" } }, { "name": "Pure White", "hex": "#FFF9F8", "role": "neutral", "cmyk": { "c": 0, "m": 2, "y": 3, "k": 0, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-crimson-pink: #bc325c; --color-coral-pink: #f36781; --color-blush-pink: #edc1c8; --color-soft-coral: #f87592; --color-rose-ivory: #fef9f9; --color-charcoal-black: #2c2a2a; --color-pure-white: #fff9f8; }

:root { --role-logo: #bc325c; --role-link: #bc325c; --role-btn-primary-bg: #bc325c; --role-btn-secondary-bg: #f36781; --role-btn-outlined-border: #f36781; --role-btn-outlined-text: #f36781; --role-headline: #edc1c8; --role-icon: #f87592; --role-border: #f87592; --role-divider: #f87592; --role-outline: #f87592; --role-bg-light: #fef9f9; --role-text: #2c2a2a; --role-btn-secondary-text: #2c2a2a; --role-bg-dark: #fff9f8; --role-btn-primary-text: #fff9f8; }

{ "crimson-pink": "#bc325c", "coral-pink": "#f36781", "blush-pink": "#edc1c8", "soft-coral": "#f87592", "rose-ivory": "#fef9f9", "charcoal-black": "#2c2a2a", "pure-white": "#fff9f8" }

<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: #BC325C; --gradient-partner: #DA8EA5; --gradient-accent: #F87592; --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: #BC325C; --gradient-text-b: #DA8EA5; --gradient-text-c: #F87592; 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>