Ruby Red, Charcoal, and Ivory Fashion Ecommerce Color Palette for Zop...

Ruby Red Charcoal Color Palette

This palette combines striking ruby red, elegant charcoal, and warm ivory as main colors, conveying fashion-forward confidence, quality, and inclusivity for a trend-led ecommerce brand. Soft dusty mauve and muted olive accents extend the range with subtle sophistication supporting the bold identity. Neutrals provide pure white, a warm off-white, and deep near-black for strong contrast and refined usability across digital interfaces.

MonochromaticFashion Beautyfashionecommercestyleconfidence

Main (Brand) Colors

The ruby red, charcoal, and ivory main colors create a triadic system delivering vibrant style, timeless quality, and inclusive sophistication that make the brand distinctive and memorable.

PrimaryRuby Red

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

Ruby Red energizes the brand with passion, style, and confidence essential for a fashion-forward identity.

HEX#9B111E

RGB155, 17, 30

HSL354, 80, 34

CMYK0, 89, 81, 39

SecondaryCharcoal

RolesBtn Secondary Bg, Headline

Charcoal anchors the palette with versatile elegance and quality while offering grounding contrast for headlines and buttons.

HEX#333333

RGB51, 51, 51

HSL0, 0, 20

CMYK0, 0, 0, 80

TertiaryIvory

RolesBg Light

Ivory provides a refined, warm background and text contrast that supports accessibility and a premium feel.

HEX#F7F4EF

RGB247, 244, 239

HSL38, 33, 95

CMYK0, 1, 3, 3

Support Colors

Dusty mauve and muted olive subtly extend the main palette with softened tones that complement the strong reds and greys, adding depth and elegance while remaining visually subordinate.

Dusty Mauve

RolesIcon, Border, Divider, Outline

Dusty Mauve offers an understated feminine balance to the ruby red, enriching the palette with depth without overpowering.

HEX#A98D9E

RGB169, 141, 158

HSL324, 14, 61

CMYK0, 17, 7, 34

Muted Olive

Muted Olive provides earthy counterpoint to ruby red and charcoal, enhancing the palette’s inclusivity and natural sophistication.

HEX#756F58

RGB117, 111, 88

HSL48, 14, 40

CMYK0, 5, 25, 54

Neutral Colors

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

White

RolesBg Dark, Btn Primary Text, Btn Secondary Text

HEX#FFFFFF

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

Ivory

HEX#F7F4EF

RGB247, 244, 239

HSL38, 33, 95

CMYK0, 1, 3, 3

Charcoal Black

RolesText

HEX#222222

RGB34, 34, 34

HSL0, 0, 13

CMYK0, 0, 0, 87

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Ruby Red", "hex": "#9B111E", "role": "main", "cmyk": { "c": 0, "m": 89, "y": 81, "k": 39, "source": "colorfly" } }, { "name": "Charcoal", "hex": "#333333", "role": "main", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 80, "source": "colorfly" } }, { "name": "Ivory", "hex": "#F7F4EF", "role": "main", "cmyk": { "c": 0, "m": 1, "y": 3, "k": 3, "source": "colorfly" } }, { "name": "Dusty Mauve", "hex": "#A98D9E", "role": "support", "cmyk": { "c": 0, "m": 17, "y": 7, "k": 34, "source": "colorfly" } }, { "name": "Muted Olive", "hex": "#756F58", "role": "support", "cmyk": { "c": 0, "m": 5, "y": 25, "k": 54, "source": "colorfly" } }, { "name": "White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Ivory", "hex": "#F7F4EF", "role": "neutral", "cmyk": { "c": 0, "m": 1, "y": 3, "k": 3, "source": "colorfly" } }, { "name": "Charcoal Black", "hex": "#222222", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 87, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-ruby-red: #9B111E; --color-charcoal: #333333; --color-ivory: #F7F4EF; --color-dusty-mauve: #A98D9E; --color-muted-olive: #756F58; --color-white: #FFFFFF; --color-charcoal-black: #222222; }

:root { --role-logo: #9B111E; --role-link: #9B111E; --role-btn-primary-bg: #9B111E; --role-btn-outlined-border: #9B111E; --role-btn-outlined-text: #9B111E; --role-btn-secondary-bg: #333333; --role-headline: #333333; --role-bg-light: #F7F4EF; --role-icon: #A98D9E; --role-border: #A98D9E; --role-divider: #A98D9E; --role-outline: #A98D9E; --role-bg-dark: #FFFFFF; --role-btn-primary-text: #FFFFFF; --role-btn-secondary-text: #FFFFFF; --role-text: #222222; }

<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: #9B111E; --gradient-partner: #C87C83; --gradient-accent: #A98D9E; --gradient-text: #FFFFFF; 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: #9B111E; --gradient-text-b: #C87C83; --gradient-text-c: #A98D9E; 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>

Ruby Red Charcoal Color Palette

Ruby Red Charcoal Color Palette

Gradients

Color Roles and Usage Map

Brand identity

Buttons

Interface

Print Color Values

Palette Colors

Main (Brand) Colors

Support Colors

Neutral Colors

Export and Handoff

Export logo in seconds

Color tokens

Role tokens

JSON

Moving gradient background

Moving gradient text

Build your first color system

Palette workspace

Ruby Red Charcoal Color Palette

Gradients

Color Roles and Usage Map

Brand identity

Buttons

Interface

Print Color Values

Palette Colors

Main (Brand) Colors

Support Colors

Neutral Colors

Export and Handoff

Export logo in seconds

Color tokens

Role tokens

JSON

Moving gradient background

Moving gradient text

Build your first color system