Vibrant Red Stripe Color Palette for Fashion and Beauty Branding

Vibrant Red Stripe Color Palette

This palette is inspired by the bold and vibrant red and white stripes from the image, combining strong reds with crisp neutrals and subtle pink accents to create a dynamic and visually engaging identity. The main reds provide energetic recognition, while the support pinks and whites balance intensity with softness and clarity.

MonochromaticFashion Beautyredstripeboldvibrant

Main (Brand) Colors

The main colors are bright and dynamic reds and pinks that work harmoniously to convey energy and approachability while maintaining a cohesive red-based theme.

PrimaryCrimson Red

RolesLogo, Btn Primary Bg, Link

Crimson Red is a vibrant and intense red that captures attention and conveys passion and confidence.

HEX#D01E1E

RGB208, 30, 30

HSL0, 75, 47

CMYK0, 86, 86, 18

SecondaryCoral Red

RolesBtn Secondary Bg, Headline

Coral Red provides a warmer, slightly softer red that complements the primary crimson with approachability and warmth.

HEX#F15050

RGB241, 80, 80

HSL0, 85, 63

CMYK0, 67, 67, 5

TertiaryRose Pink

RolesBtn Outlined Border, Btn Outlined Text

Rose Pink is a muted pink accent that offers contrast without overpowering, adding softness and balance to the red hues.

HEX#E76C7C

RGB231, 108, 124

HSL352, 72, 66

CMYK0, 53, 46, 9

Support Colors

The support colors extend the palette with soft and muted pinks and gentle white hues that accentuate and balance the strong reds, ensuring visual harmony and usability.

Blush Pink

RolesBorder, Divider, Outline, Icon

Blush Pink complements the main reds by adding subtle softness and highlights that support without distracting.

HEX#FBDDE0

RGB251, 221, 224

HSL354, 79, 93

CMYK0, 12, 11, 2

Pure White

RolesBg Light

Pure White provides clean contrast and a bright background, enhancing clarity and readability.

HEX#FFFFFF

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

Neutral Colors

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

Charcoal

RolesText, Btn Secondary Text

HEX#222222

RGB34, 34, 34

HSL0, 0, 13

CMYK0, 0, 0, 87

Ivory White

RolesBg Dark

HEX#F7F7F7

RGB247, 247, 247

HSL0, 0, 97

CMYK0, 0, 0, 3

Snow White

RolesBtn Primary Text

HEX#FAFAFA

RGB250, 250, 250

HSL0, 0, 98

CMYK0, 0, 0, 2

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Crimson Red", "hex": "#D01E1E", "role": "main", "cmyk": { "c": 0, "m": 86, "y": 86, "k": 18, "source": "colorfly" } }, { "name": "Coral Red", "hex": "#F15050", "role": "main", "cmyk": { "c": 0, "m": 67, "y": 67, "k": 5, "source": "colorfly" } }, { "name": "Rose Pink", "hex": "#E76C7C", "role": "main", "cmyk": { "c": 0, "m": 53, "y": 46, "k": 9, "source": "colorfly" } }, { "name": "Blush Pink", "hex": "#FBDDE0", "role": "support", "cmyk": { "c": 0, "m": 12, "y": 11, "k": 2, "source": "colorfly" } }, { "name": "Pure White", "hex": "#FFFFFF", "role": "support", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Charcoal", "hex": "#222222", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 87, "source": "colorfly" } }, { "name": "Ivory White", "hex": "#F7F7F7", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 3, "source": "colorfly" } }, { "name": "Snow White", "hex": "#FAFAFA", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 2, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-crimson-red: #D01E1E; --color-coral-red: #F15050; --color-rose-pink: #E76C7C; --color-blush-pink: #FBDDE0; --color-pure-white: #FFFFFF; --color-charcoal: #222222; --color-ivory-white: #F7F7F7; --color-snow-white: #FAFAFA; }

:root { --role-logo: #D01E1E; --role-btn-primary-bg: #D01E1E; --role-link: #D01E1E; --role-btn-secondary-bg: #F15050; --role-headline: #F15050; --role-btn-outlined-border: #E76C7C; --role-btn-outlined-text: #E76C7C; --role-border: #FBDDE0; --role-divider: #FBDDE0; --role-outline: #FBDDE0; --role-icon: #FBDDE0; --role-bg-light: #FFFFFF; --role-text: #222222; --role-btn-secondary-text: #222222; --role-bg-dark: #F7F7F7; --role-btn-primary-text: #FAFAFA; }

{ "crimson-red": "#D01E1E", "coral-red": "#F15050", "rose-pink": "#E76C7C", "blush-pink": "#FBDDE0", "pure-white": "#FFFFFF", "charcoal": "#222222", "ivory-white": "#F7F7F7", "snow-white": "#FAFAFA" }

<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: #D01E1E; --gradient-partner: #E58383; --gradient-accent: #FBDDE0; --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: #D01E1E; --gradient-text-b: #E58383; --gradient-text-c: #978586; 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>