Crimson Gold Maroon Color Palette for Authentic Bengali Handloom Sare...

Crimson Gold Maroon Color Palette

This palette harmonizes warm and rich hues inspired by traditional Bengali handloom sarees, creating a vibrant yet elegant identity for AASHA by Deepshikha. The main colors blend classic reds and golds with a unique deeper maroon, balanced subtly by dulcet support tones and grounded neutrals to evoke authenticity and cultural richness.

AnalogousEcommercebengalihandloomsareetraditional

Main (Brand) Colors

The main colors showcase a triadic-like relationship with a deep Crimson, warm Gold, and a rich Maroon that jointly invoke heritage, vividness, and luxury synonymous with Bengali handlooms.

PrimaryCrimson

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

Crimson imparts a passionate and vibrant tone, reflecting the energy and richness of authentic Bengali sarees.

HEX#DC143C

RGB220, 20, 60

HSL348, 83, 47

CMYK0, 91, 73, 14

SecondaryGold

RolesBtn Secondary Bg

Gold conveys warmth and a luxurious glow, echoing the golden zari tradition found in handloom sarees.

HEX#FFD700

RGB255, 215, 0

HSL51, 100, 50

CMYK0, 16, 100, 0

TertiaryMaroon

RolesIcon, Border, Divider

Maroon adds depth and balance as a sophisticated counterpoint, grounding the palette with a dignified elegance.

HEX#800000

RGB128, 0, 0

HSL0, 100, 25

CMYK0, 100, 100, 50

Support Colors

Support colors introduce delicate, muted tones inspired by natural fibers and floral accents adding subtle balance and refinement without overpowering the main hues.

Ivory

RolesOutline

Ivory softens the palette, reflecting the natural cotton and silk textures prevalent in handloom fabric.

HEX#F4E1D2

RGB244, 225, 210

HSL26, 61, 89

CMYK0, 8, 14, 4

Light Brown

Light Brown offers an earthy complement, subtly emphasizing the artisanal quality of the products.

HEX#C19A6B

RGB193, 154, 107

HSL33, 41, 59

CMYK0, 20, 45, 24

Neutral Colors

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

White

RolesBg Light, Btn Primary Text

HEX#FFFFFF

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

Ivory White

RolesBg Dark

HEX#F5F5F5

RGB245, 245, 245

HSL0, 0, 96

CMYK0, 0, 0, 4

Charcoal

RolesText, Btn Secondary Text

HEX#2F2F2F

RGB47, 47, 47

HSL0, 0, 18

CMYK0, 0, 0, 82

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Crimson", "hex": "#DC143C", "role": "main", "cmyk": { "c": 0, "m": 91, "y": 73, "k": 14, "source": "colorfly" } }, { "name": "Gold", "hex": "#FFD700", "role": "main", "cmyk": { "c": 0, "m": 16, "y": 100, "k": 0, "source": "colorfly" } }, { "name": "Maroon", "hex": "#800000", "role": "main", "cmyk": { "c": 0, "m": 100, "y": 100, "k": 50, "source": "colorfly" } }, { "name": "Ivory", "hex": "#F4E1D2", "role": "support", "cmyk": { "c": 0, "m": 8, "y": 14, "k": 4, "source": "colorfly" } }, { "name": "Light Brown", "hex": "#C19A6B", "role": "support", "cmyk": { "c": 0, "m": 20, "y": 45, "k": 24, "source": "colorfly" } }, { "name": "White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Ivory White", "hex": "#F5F5F5", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 4, "source": "colorfly" } }, { "name": "Charcoal", "hex": "#2F2F2F", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 82, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-crimson: #DC143C; --color-gold: #FFD700; --color-maroon: #800000; --color-ivory: #F4E1D2; --color-light-brown: #C19A6B; --color-white: #FFFFFF; --color-ivory-white: #F5F5F5; --color-charcoal: #2F2F2F; }

:root { --role-logo: #DC143C; --role-link: #DC143C; --role-btn-primary-bg: #DC143C; --role-btn-outlined-border: #DC143C; --role-btn-outlined-text: #DC143C; --role-headline: #DC143C; --role-btn-secondary-bg: #FFD700; --role-icon: #800000; --role-border: #800000; --role-divider: #800000; --role-outline: #F4E1D2; --role-bg-light: #FFFFFF; --role-btn-primary-text: #FFFFFF; --role-bg-dark: #F5F5F5; --role-text: #2F2F2F; --role-btn-secondary-text: #2F2F2F; }

{ "crimson": "#DC143C", "gold": "#FFD700", "maroon": "#800000", "ivory": "#F4E1D2", "light-brown": "#C19A6B", "white": "#FFFFFF", "ivory-white": "#F5F5F5", "charcoal": "#2F2F2F" }

<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: #DC143C; --gradient-partner: #EC7E94; --gradient-accent: #F4E1D2; --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: #DC143C; --gradient-text-b: #EC7E94; --gradient-text-c: #92877E; 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>