50 Cent Inspired Color Palette for Artist Branding

50 Cent Inspired Color Palette

This palette channels 50 Cent’s bold, street-level confidence with a hard-edged black-and-red core, then adds a gold accent for presence and a steel blue note for balance. The system feels aggressive, premium, and unmistakably performance-driven without losing digital usability.

CustomCreative50 Centhip hopurbanbold

Main (Brand) Colors

Black and red create the core identity, while gold adds a high-value accent that reinforces a powerful, performance-first look. The mix feels iconic and immediate, with enough contrast to work across both branding and interface applications.

PrimaryCrimson

RolesLogo, Btn Primary Bg

Crimson delivers the aggressive energy and recognizability that anchors the brand.

HEX#A5001D

RGB165, 0, 29

HSL349, 100, 32

CMYK0, 100, 82, 35

SecondaryCharcoal

RolesBtn Secondary Bg, Headline

Charcoal adds toughness and visual weight, giving the palette a serious street-luxury edge.

HEX#0B0B0D

RGB11, 11, 13

HSL240, 8, 5

CMYK15, 15, 0, 95

Support Colors

The accents extend the core by adding restrained richness and cooler structure without competing with the main red-and-black identity. They support hierarchy, usability, and a more polished finish.

Gold

RolesBtn Outlined Border, Btn Outlined Text, Icon

Gold adds premium contrast and makes key accents feel elevated without overpowering the core palette.

HEX#C8A24A

RGB200, 162, 74

HSL42, 53, 54

CMYK0, 19, 63, 22

Slate Blue

RolesLink, Border, Divider, Outline

Slate Blue cools the palette slightly and gives interface elements a controlled, readable support tone.

HEX#5C6F7E

RGB92, 111, 126

HSL206, 16, 43

CMYK27, 12, 0, 51

Neutral Colors

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

White

RolesBtn Primary Text, Btn Secondary Text

HEX#FFFFFF

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

Ivory

RolesBg Light

HEX#F3F1EC

RGB243, 241, 236

HSL43, 23, 94

CMYK0, 1, 3, 5

Black

RolesBg Dark, Text

HEX#111111

RGB17, 17, 17

HSL0, 0, 7

CMYK0, 0, 0, 93

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Crimson", "hex": "#A5001D", "role": "main", "cmyk": { "c": 0, "m": 100, "y": 82, "k": 35, "source": "colorfly" } }, { "name": "Charcoal", "hex": "#0B0B0D", "role": "main", "cmyk": { "c": 15, "m": 15, "y": 0, "k": 95, "source": "colorfly" } }, { "name": "Gold", "hex": "#C8A24A", "role": "support", "cmyk": { "c": 0, "m": 19, "y": 63, "k": 22, "source": "colorfly" } }, { "name": "Slate Blue", "hex": "#5C6F7E", "role": "support", "cmyk": { "c": 27, "m": 12, "y": 0, "k": 51, "source": "colorfly" } }, { "name": "White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Ivory", "hex": "#F3F1EC", "role": "neutral", "cmyk": { "c": 0, "m": 1, "y": 3, "k": 5, "source": "colorfly" } }, { "name": "Black", "hex": "#111111", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 93, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-crimson: #A5001D; --color-charcoal: #0B0B0D; --color-gold: #C8A24A; --color-slate-blue: #5C6F7E; --color-white: #FFFFFF; --color-ivory: #F3F1EC; --color-black: #111111; }

:root { --role-logo: #A5001D; --role-btn-primary-bg: #A5001D; --role-btn-secondary-bg: #0B0B0D; --role-headline: #0B0B0D; --role-btn-outlined-border: #C8A24A; --role-btn-outlined-text: #C8A24A; --role-icon: #C8A24A; --role-link: #5C6F7E; --role-border: #5C6F7E; --role-divider: #5C6F7E; --role-outline: #5C6F7E; --role-btn-primary-text: #FFFFFF; --role-btn-secondary-text: #FFFFFF; --role-bg-light: #F3F1EC; --role-bg-dark: #111111; --role-text: #111111; }

<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: #A5001D; --gradient-partner: #CE7383; --gradient-accent: #C8A24A; --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: #A5001D; --gradient-text-b: #CE7383; --gradient-text-c: #C8A24A; 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>