Crimson Olive Charcoal Color Palette for Experimental Underground DJ...

Crimson Olive Charcoal Color Palette

This sophisticated palette blends a vivid signal red with deep grounding and organic earth tones to embody the human, rhythmic essence of experimental global underground radio. It balances boldness and refinement through muted digital accents and strong neutrals, expressing culture and rebellion with a contemporary, raw edge.

AnalogousCreativeexperimentalglobalundergroundradio

Main (Brand) Colors

The main colors combine a vivid Crimson signal tone, an organic Olive green, and a grounding Charcoal to create a brand palette that is simultaneously bold, human, and rhythmically vibrant for digital and cultural expression.

PrimaryCrimson

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

Crimson serves as the vivid signal color embodying energy, passion, and digital transmission, capturing attention with boldness and human heat.

HEX#C41E3A

RGB196, 30, 58

HSL350, 73, 44

CMYK0, 85, 70, 23

SecondaryOlive

RolesBtn Secondary Bg, Headline

Olive expresses organic living tones that ground the palette with cultural intelligence and natural rhythm, balancing the vibrant Crimson.

HEX#708238

RGB112, 130, 56

HSL75, 40, 36

CMYK14, 0, 57, 49

TertiaryCharcoal

Charcoal is a dark grounding color that provides depth and sophistication, anchoring the palette with raw contemporary strength.

HEX#2B2B2B

RGB43, 43, 43

HSL0, 0, 17

CMYK0, 0, 0, 83

Support Colors

Supporting colors extend warmth and subtle digital nuance through muted burnt orange accents that underscore the organic and rebellious spirit without overpowering the core colors.

Burnt Sienna

RolesIcon, Border, Divider, Outline

Burnt Sienna softly complements Crimson and Olive by adding a warm accent that enhances cultural complexity and rhythmic warmth.

HEX#A85C33

RGB168, 92, 51

HSL21, 53, 43

CMYK0, 45, 70, 34

Neutral Colors

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

Ivory

RolesBg Light, Btn Primary Text

HEX#F4F1ED

RGB244, 241, 237

HSL34, 24, 94

CMYK0, 1, 3, 4

Sand

RolesBg Dark

HEX#E0D6CD

RGB224, 214, 205

HSL28, 23, 84

CMYK0, 4, 8, 12

Charcoal Black

RolesText, Btn Secondary Text

HEX#121212

RGB18, 18, 18

HSL0, 0, 7

CMYK0, 0, 0, 93

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Crimson", "hex": "#C41E3A", "role": "main", "cmyk": { "c": 0, "m": 85, "y": 70, "k": 23, "source": "colorfly" } }, { "name": "Olive", "hex": "#708238", "role": "main", "cmyk": { "c": 14, "m": 0, "y": 57, "k": 49, "source": "colorfly" } }, { "name": "Charcoal", "hex": "#2B2B2B", "role": "main", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 83, "source": "colorfly" } }, { "name": "Burnt Sienna", "hex": "#A85C33", "role": "support", "cmyk": { "c": 0, "m": 45, "y": 70, "k": 34, "source": "colorfly" } }, { "name": "Ivory", "hex": "#F4F1ED", "role": "neutral", "cmyk": { "c": 0, "m": 1, "y": 3, "k": 4, "source": "colorfly" } }, { "name": "Sand", "hex": "#E0D6CD", "role": "neutral", "cmyk": { "c": 0, "m": 4, "y": 8, "k": 12, "source": "colorfly" } }, { "name": "Charcoal Black", "hex": "#121212", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 93, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-crimson: #C41E3A; --color-olive: #708238; --color-charcoal: #2B2B2B; --color-burnt-sienna: #A85C33; --color-ivory: #F4F1ED; --color-sand: #E0D6CD; --color-charcoal-black: #121212; }

:root { --role-logo: #C41E3A; --role-link: #C41E3A; --role-btn-primary-bg: #C41E3A; --role-btn-outlined-border: #C41E3A; --role-btn-outlined-text: #C41E3A; --role-btn-secondary-bg: #708238; --role-headline: #708238; --role-icon: #A85C33; --role-border: #A85C33; --role-divider: #A85C33; --role-outline: #A85C33; --role-bg-light: #F4F1ED; --role-btn-primary-text: #F4F1ED; --role-bg-dark: #E0D6CD; --role-text: #121212; --role-btn-secondary-text: #121212; }

<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: #C41E3A; --gradient-partner: #DF8393; --gradient-accent: #A85C33; --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: #C41E3A; --gradient-text-b: #DF8393; --gradient-text-c: #A85C33; 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>