Red White Black Color Palette for Bold Brand Identity

Red White Black Color Palette

This distinctive palette combines a vivid Red, pure White, and deep Black to establish a bold and memorable brand identity. The selected main colors offer strong contrast and clarity, reinforcing a confident and dynamic brand personality. Support colors extend this theme with softer and balanced hues that complement the core reds while maintaining focus on the main palette. The neutrals provide clear functional backgrounds and text colors ensuring readability and usability across digital interfaces.

MonochromaticNoneredwhiteblackbold

Main (Brand) Colors

The primary red, pure white, and deep black form a vivid and recognizable trio that achieves strong contrast and brand recognition without relying on typical color harmonies.

PrimaryCrimson

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

Crimson delivers a passionate, energetic feeling to the brand, commanding attention and symbolizing strength and action.

HEX#D50000

RGB213, 0, 0

HSL0, 100, 42

CMYK0, 100, 100, 16

SecondaryWhite

RolesBg Light, Btn Secondary Bg

White offers clarity, cleanliness, and pure contrast, serving as an essential neutral that enhances readability and space.

HEX#FFFFFF

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

TertiaryCharcoal Black

RolesBg Dark

Charcoal Black grounds the palette with depth and sophistication, providing the darkest tone for text and backgrounds for maximum legibility.

HEX#0B0B0B

RGB11, 11, 11

HSL0, 0, 4

CMYK0, 0, 0, 96

Support Colors

The support colors provide subtle complementary accents in softer, desaturated tones that balance the intensity of the main colors while remaining visually subordinate.

Brick Red

RolesIcon, Border, Divider, Outline

Brick Red complements Crimson with a muted tone that adds warmth and depth to functional UI elements without overpowering the main reds.

HEX#9E1B1B

RGB158, 27, 27

HSL0, 71, 36

CMYK0, 83, 83, 38

Neutral Colors

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

White

RolesBtn Primary Text

HEX#FFFFFF

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

Ivory

HEX#F5F5F5

RGB245, 245, 245

HSL0, 0, 96

CMYK0, 0, 0, 4

Charcoal Black

RolesText, Btn Secondary Text

HEX#0B0B0B

RGB11, 11, 11

HSL0, 0, 4

CMYK0, 0, 0, 96

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Crimson", "hex": "#D50000", "role": "main", "cmyk": { "c": 0, "m": 100, "y": 100, "k": 16, "source": "colorfly" } }, { "name": "White", "hex": "#FFFFFF", "role": "main", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Charcoal Black", "hex": "#0B0B0B", "role": "main", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 96, "source": "colorfly" } }, { "name": "Brick Red", "hex": "#9E1B1B", "role": "support", "cmyk": { "c": 0, "m": 83, "y": 83, "k": 38, "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": "Charcoal Black", "hex": "#0B0B0B", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 96, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --role-logo: #D50000; --role-link: #D50000; --role-btn-primary-bg: #D50000; --role-btn-outlined-border: #D50000; --role-btn-outlined-text: #D50000; --role-headline: #D50000; --role-bg-light: #FFFFFF; --role-btn-secondary-bg: #FFFFFF; --role-bg-dark: #0B0B0B; --role-icon: #9E1B1B; --role-border: #9E1B1B; --role-divider: #9E1B1B; --role-outline: #9E1B1B; --role-btn-primary-text: #FFFFFF; --role-text: #0B0B0B; --role-btn-secondary-text: #0B0B0B; }

<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: #D50000; --gradient-partner: #E87373; --gradient-accent: #9E1B1B; --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: #D50000; --gradient-text-b: #E87373; --gradient-text-c: #9E1B1B; 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>