Crimson and Charcoal Color Palette for Creative Advertising Teams

Crimson Charcoal Crimson Color Palette

This palette uses bold, dynamic reds paired with a deep charcoal and cooler complementary accents to embody creativity, passion, and clear communication vital for a senior freelance creative advertising team. The main reds provide strong visual identity and energy, while the support muted cool tones and neutrals balance vibrancy with readability and sophistication across media.

MonochromaticCreativecreativebrandingadvertisingbold

Main (Brand) Colors

Three harmonious reds and deep charcoal work together to express passion, focus, and clarity, creating a bold and recognizable system that commands attention and conveys creative leadership.

PrimaryCrimson

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

Crimson symbolizes passion and energy, driving brand visibility and emotional impact.

HEX#DC143C

RGB220, 20, 60

HSL348, 83, 47

CMYK0, 91, 73, 14

SecondaryBrown

RolesHeadline, Btn Secondary Bg

Brown adds a grounded, trustworthy weight that balances the intensity of crimson with stability.

HEX#A52A2A

RGB165, 42, 42

HSL0, 59, 41

CMYK0, 75, 75, 35

TertiaryCharcoal

Charcoal delivers strong legibility and professionalism as a contrast color supporting and defining the main reds.

HEX#333333

RGB51, 51, 51

HSL0, 0, 20

CMYK0, 0, 0, 80

Support Colors

Muted blues and steel grays enrich the palette with cooler undertones, reinforcing contrast and adding dimension without detracting from the dominant reds and charcoal. These accents enhance interface elements like icons and borders subtly and elegantly.

Steel Blue

RolesIcon, Border

Steel Blue complements red by introducing calming undertones that stabilize the composition without overwriting main colors.

HEX#46627F

RGB70, 98, 127

HSL211, 29, 39

CMYK45, 23, 0, 50

Slate Gray

RolesDivider, Outline

Slate Gray provides low-contrast delineation to structure content gently between bold elements.

HEX#708090

RGB112, 128, 144

HSL210, 13, 50

CMYK22, 11, 0, 44

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#F5F5F5

RGB245, 245, 245

HSL0, 0, 96

CMYK0, 0, 0, 4

Eerie Black

RolesText

HEX#1A1A1A

RGB26, 26, 26

HSL0, 0, 10

CMYK0, 0, 0, 90

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": "Brown", "hex": "#A52A2A", "role": "main", "cmyk": { "c": 0, "m": 75, "y": 75, "k": 35, "source": "colorfly" } }, { "name": "Charcoal", "hex": "#333333", "role": "main", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 80, "source": "colorfly" } }, { "name": "Steel Blue", "hex": "#46627F", "role": "support", "cmyk": { "c": 45, "m": 23, "y": 0, "k": 50, "source": "colorfly" } }, { "name": "Slate Gray", "hex": "#708090", "role": "support", "cmyk": { "c": 22, "m": 11, "y": 0, "k": 44, "source": "colorfly" } }, { "name": "White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Ivory", "hex": "#F5F5F5", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 4, "source": "colorfly" } }, { "name": "Eerie Black", "hex": "#1A1A1A", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 90, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-crimson: #DC143C; --color-brown: #A52A2A; --color-charcoal: #333333; --color-steel-blue: #46627F; --color-slate-gray: #708090; --color-white: #FFFFFF; --color-ivory: #F5F5F5; --color-eerie-black: #1A1A1A; }

:root { --role-logo: #DC143C; --role-link: #DC143C; --role-btn-primary-bg: #DC143C; --role-btn-outlined-border: #DC143C; --role-btn-outlined-text: #DC143C; --role-headline: #A52A2A; --role-btn-secondary-bg: #A52A2A; --role-icon: #46627F; --role-border: #46627F; --role-divider: #708090; --role-outline: #708090; --role-bg-light: #FFFFFF; --role-btn-primary-text: #FFFFFF; --role-btn-secondary-text: #FFFFFF; --role-bg-dark: #F5F5F5; --role-text: #1A1A1A; }

{ "crimson": "#DC143C", "brown": "#A52A2A", "charcoal": "#333333", "steel-blue": "#46627F", "slate-gray": "#708090", "white": "#FFFFFF", "ivory": "#F5F5F5", "eerie-black": "#1A1A1A" }

<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: #46627F; --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: #46627F; 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>

Crimson Charcoal Crimson Color Palette

Crimson Charcoal Crimson 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

Crimson Charcoal Crimson 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