Mexican Pink Rustic Color Palette for Quinta Branding

Mexican Pink Rustic Color Palette

This palette centers on the vibrant Mexican Pink as the primary brand color, complemented by rustic earth tones and balanced by warm supporting hues to evoke an authentic and inviting rural atmosphere, ideal for a quinta's identity. The support colors extend the vibrancy with soft terracotta and muted olive that harmonize with Mexican Pink without competing, while the neutrals provide clear contrast and grounding for text and backgrounds to ensure legibility and visual comfort.

CustomNonemexican pinkrusticearth tonesterracotta

Main (Brand) Colors

Mexican Pink anchors the palette as the recognizable brand color, balanced by earthy burnt sienna and deep forest green to create a distinctive and warm rural identity that resonates authentically with the quinta's character.

PrimaryMexican Pink

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

Mexican Pink is the unmistakable signature color of the brand, lending vibrancy, warmth, and strong recognition.

HEX#E4007C

RGB228, 0, 124

HSL327, 100, 45

CMYK0, 100, 46, 11

SecondaryBurnt Sienna

RolesBtn Secondary Bg

Burnt Sienna adds a deep rustic warmth that complements Mexican Pink with an earthy, grounded feeling.

HEX#9C4A2A

RGB156, 74, 42

HSL17, 58, 39

CMYK0, 53, 73, 39

TertiaryForest Green

RolesHeadline

Forest Green provides a natural and calming accent, balancing the warmth of pink and sienna with quiet depth.

HEX#3D5730

RGB61, 87, 48

HSL100, 29, 26

CMYK30, 0, 45, 66

Support Colors

The support colors softly extend the main palette with warm terracotta and muted olive tones that reinforce the rustic aesthetic without overpowering the signature Mexican Pink.

Terracotta

RolesIcon, Border, Divider, Outline

Terracotta offers a softened warm accent that bridges Burnt Sienna and Mexican Pink, enhancing visual depth while maintaining subtlety.

HEX#C67B5A

RGB198, 123, 90

HSL18, 49, 56

CMYK0, 38, 55, 22

Olive

Olive adds an understated organic tone that harmonizes with Forest Green and supports the rustic theme with gentle earthiness.

HEX#7A8450

RGB122, 132, 80

HSL72, 25, 42

CMYK8, 0, 39, 48

Neutral Colors

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

White

RolesBg Light, Btn Primary Text, Btn Secondary Text

HEX#FFFFFF

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

Ivory

RolesBg Dark

HEX#F7F5F3

RGB247, 245, 243

HSL30, 20, 96

CMYK0, 1, 2, 3

Charcoal

RolesText

HEX#2B2B2B

RGB43, 43, 43

HSL0, 0, 17

CMYK0, 0, 0, 83

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Mexican Pink", "hex": "#E4007C", "role": "main", "cmyk": { "c": 0, "m": 100, "y": 46, "k": 11, "source": "colorfly" } }, { "name": "Burnt Sienna", "hex": "#9C4A2A", "role": "main", "cmyk": { "c": 0, "m": 53, "y": 73, "k": 39, "source": "colorfly" } }, { "name": "Forest Green", "hex": "#3D5730", "role": "main", "cmyk": { "c": 30, "m": 0, "y": 45, "k": 66, "source": "colorfly" } }, { "name": "Terracotta", "hex": "#C67B5A", "role": "support", "cmyk": { "c": 0, "m": 38, "y": 55, "k": 22, "source": "colorfly" } }, { "name": "Olive", "hex": "#7A8450", "role": "support", "cmyk": { "c": 8, "m": 0, "y": 39, "k": 48, "source": "colorfly" } }, { "name": "White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Ivory", "hex": "#F7F5F3", "role": "neutral", "cmyk": { "c": 0, "m": 1, "y": 2, "k": 3, "source": "colorfly" } }, { "name": "Charcoal", "hex": "#2B2B2B", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 83, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-mexican-pink: #E4007C; --color-burnt-sienna: #9C4A2A; --color-forest-green: #3D5730; --color-terracotta: #C67B5A; --color-olive: #7A8450; --color-white: #FFFFFF; --color-ivory: #F7F5F3; --color-charcoal: #2B2B2B; }

:root { --role-logo: #E4007C; --role-link: #E4007C; --role-btn-primary-bg: #E4007C; --role-btn-outlined-border: #E4007C; --role-btn-outlined-text: #E4007C; --role-btn-secondary-bg: #9C4A2A; --role-headline: #3D5730; --role-icon: #C67B5A; --role-border: #C67B5A; --role-divider: #C67B5A; --role-outline: #C67B5A; --role-bg-light: #FFFFFF; --role-btn-primary-text: #FFFFFF; --role-btn-secondary-text: #FFFFFF; --role-bg-dark: #F7F5F3; --role-text: #2B2B2B; }

{ "mexican-pink": "#E4007C", "burnt-sienna": "#9C4A2A", "forest-green": "#3D5730", "terracotta": "#C67B5A", "olive": "#7A8450", "white": "#FFFFFF", "ivory": "#F7F5F3", "charcoal": "#2B2B2B" }

<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: #E4007C; --gradient-partner: #F073B7; --gradient-accent: #C67B5A; --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: #E4007C; --gradient-text-b: #F073B7; --gradient-text-c: #C67B5A; 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>