Crimson Charcoal Navy Complementary Color Palette for Algo Belico

Crimson Charcoal Navy Color Palette

This palette combines a bold Crimson, a commanding Charcoal, and a deep Navy to evoke strength and aggression fitting for a competitive, battle-inspired brand identity. The supporting Dark Slate and Steel Blue soften and balance the palette by adding depth without undermining the assertive main colors. The elegant neutrals Ivory, Sand, and Charcoal Ground the visuals with high contrast, ensuring readability and usability across digital interfaces.

CustomNonecrimsoncharcoalnavybold

Main (Brand) Colors

The main colors form a complementary scheme combining a vivid Crimson and a deep Navy with a grounded Charcoal, creating a visually powerful and balanced system that embodies strength and determination.

PrimaryCrimson

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

Crimson embodies passion and aggression, serving as a strong and energetic anchor for the brand's identity.

HEX#DC143C

RGB220, 20, 60

HSL348, 83, 47

CMYK0, 91, 73, 14

SecondaryCharcoal

RolesHeadline, Btn Secondary Bg

Charcoal represents seriousness and stability, grounding the palette with depth and professionalism.

HEX#36454F

RGB54, 69, 79

HSL204, 19, 26

CMYK32, 13, 0, 69

TertiaryNavy

Navy adds authority and trustworthiness, balancing Crimson with a cool, steadfast presence.

HEX#0B2545

RGB11, 37, 69

HSL213, 73, 16

CMYK84, 46, 0, 73

Support Colors

Support colors extend the main palette with muted, cool shades that complement the assertive main colors without dominating, ensuring visual coherence and usability.

Dark Slate

RolesIcon, Border, Divider, Outline

Dark Slate subtly supports the main colors by echoing the depth of Navy and Charcoal, enhancing interface elements with quiet strength.

HEX#273746

RGB39, 55, 70

HSL209, 28, 21

CMYK44, 21, 0, 73

Steel Blue

Steel Blue provides a cooler accent that eases visual tension and harmonizes the intensity of Crimson and Navy.

HEX#4682B4

RGB70, 130, 180

HSL207, 44, 49

CMYK61, 28, 0, 29

Neutral Colors

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

Ivory

RolesBg Light, Btn Primary Text, Btn Secondary Text

HEX#FFFFF0

RGB255, 255, 240

HSL60, 100, 97

CMYK0, 0, 6, 0

Sand

RolesBg Dark

HEX#F5DEB3

RGB245, 222, 179

HSL39, 77, 83

CMYK0, 9, 27, 4

Charcoal

RolesText

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": "Charcoal", "hex": "#36454F", "role": "main", "cmyk": { "c": 32, "m": 13, "y": 0, "k": 69, "source": "colorfly" } }, { "name": "Navy", "hex": "#0B2545", "role": "main", "cmyk": { "c": 84, "m": 46, "y": 0, "k": 73, "source": "colorfly" } }, { "name": "Dark Slate", "hex": "#273746", "role": "support", "cmyk": { "c": 44, "m": 21, "y": 0, "k": 73, "source": "colorfly" } }, { "name": "Steel Blue", "hex": "#4682B4", "role": "support", "cmyk": { "c": 61, "m": 28, "y": 0, "k": 29, "source": "colorfly" } }, { "name": "Ivory", "hex": "#FFFFF0", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 6, "k": 0, "source": "colorfly" } }, { "name": "Sand", "hex": "#F5DEB3", "role": "neutral", "cmyk": { "c": 0, "m": 9, "y": 27, "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-charcoal: #2F2F2F; --color-navy: #0B2545; --color-dark-slate: #273746; --color-steel-blue: #4682B4; --color-ivory: #FFFFF0; --color-sand: #F5DEB3; }

:root { --role-logo: #DC143C; --role-link: #DC143C; --role-btn-primary-bg: #DC143C; --role-btn-outlined-border: #DC143C; --role-btn-outlined-text: #DC143C; --role-headline: #36454F; --role-btn-secondary-bg: #36454F; --role-icon: #273746; --role-border: #273746; --role-divider: #273746; --role-outline: #273746; --role-bg-light: #FFFFF0; --role-btn-primary-text: #FFFFF0; --role-btn-secondary-text: #FFFFF0; --role-bg-dark: #F5DEB3; --role-text: #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: #273746; --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: #273746; 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 Navy Color Palette

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