Riotous Red Contrast Color Palette for Creative Brands

Riotous Red Contrast Color Palette

This bold palette captures the intensity of black and white contrast with vibrant reds and a touch of metallic gray, echoing the dramatic and striking style of the inspiration image. The main colors create a high-impact visual identity, while the support colors provide balance and subtle accents. The neutrals anchor the palette with classic and versatile tones.

MonochromaticCreativeredblackwhitecontrast

Main (Brand) Colors

The main colors combine stark black and white with vivid red shades to form a powerful, recognizable system that commands attention and conveys energy and contrast.

PrimaryBlack

RolesLogo, Btn Primary Bg, Btn Outlined Border, Headline

Black provides a strong, authoritative base that grounds the palette with deep contrast and sophistication.

HEX#000000

RGB0, 0, 0

HSL0, 0, 0

CMYK0, 0, 0, 100

PrimaryWhite

RolesBg Light

White offers clarity and crispness, enhancing readability and balancing the intensity of darker hues.

HEX#FFFFFF

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

SecondaryCrimson Red

RolesLink, Btn Secondary Bg, Btn Outlined Text

Crimson Red injects passion and urgency, delivering high visibility and emotional impact.

HEX#D32F2F

RGB211, 47, 47

HSL0, 65, 51

CMYK0, 78, 78, 17

Support Colors

The support colors extend the palette subtly with muted gray and a soft silver tone that complements the bold main colors without overshadowing them.

Medium Gray

RolesIcon, Border, Divider, Outline

Medium Gray acts as a neutral support that softens transitions and supports hierarchy beneath the stronger colors.

HEX#9E9E9E

RGB158, 158, 158

HSL0, 0, 62

CMYK0, 0, 0, 38

Silver

Silver adds a metallic nuance, offering sophistication and modern flair to the visual system.

HEX#B0B0B0

RGB176, 176, 176

HSL0, 0, 69

CMYK0, 0, 0, 31

Neutral Colors

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

Ivory

RolesBg Dark

HEX#F5F5F5

RGB245, 245, 245

HSL0, 0, 96

CMYK0, 0, 0, 4

Charcoal

RolesText

HEX#212121

RGB33, 33, 33

HSL0, 0, 13

CMYK0, 0, 0, 87

White

RolesBtn Primary Text, Btn Secondary Text

HEX#FFFFFF

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Black", "hex": "#000000", "role": "main", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 100, "source": "colorfly" } }, { "name": "White", "hex": "#FFFFFF", "role": "main", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Crimson Red", "hex": "#D32F2F", "role": "main", "cmyk": { "c": 0, "m": 78, "y": 78, "k": 17, "source": "colorfly" } }, { "name": "Medium Gray", "hex": "#9E9E9E", "role": "support", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 38, "source": "colorfly" } }, { "name": "Silver", "hex": "#B0B0B0", "role": "support", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 31, "source": "colorfly" } }, { "name": "Ivory", "hex": "#F5F5F5", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 4, "source": "colorfly" } }, { "name": "Charcoal", "hex": "#212121", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 87, "source": "colorfly" } }, { "name": "White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-black: #000000; --color-white: #FFFFFF; --color-crimson-red: #D32F2F; --color-medium-gray: #9E9E9E; --color-silver: #B0B0B0; --color-ivory: #F5F5F5; --color-charcoal: #212121; }

:root { --role-logo: #000000; --role-btn-primary-bg: #000000; --role-btn-outlined-border: #000000; --role-headline: #000000; --role-bg-light: #FFFFFF; --role-link: #D32F2F; --role-btn-secondary-bg: #D32F2F; --role-btn-outlined-text: #D32F2F; --role-icon: #9E9E9E; --role-border: #9E9E9E; --role-divider: #9E9E9E; --role-outline: #9E9E9E; --role-bg-dark: #F5F5F5; --role-text: #212121; --role-btn-primary-text: #FFFFFF; --role-btn-secondary-text: #FFFFFF; }

<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: #000000; --gradient-partner: #737373; --gradient-accent: #9E9E9E; --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: #000000; --gradient-text-b: #737373; --gradient-text-c: #9E9E9E; 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>