Morgan Freeman-Inspired Color Palette for Cinematic Luxury Branding |...

Morgan Freeman Inspired Color Palette

This palette channels Morgan Freeman’s calm authority, warm intelligence, and timeless presence through deep mahogany, refined teal, and a softened gold. The result feels distinguished and human, with enough contrast for confident digital use and enough warmth to avoid feeling severe.

Split ComplementaryLuxury And LifestyleMorgan Freeman inspiredcinematicauthoritativewarm

Main (Brand) Colors

The main colors pair deep mahogany, muted teal, and softened gold to reflect gravitas, intelligence, and warmth without leaning into a single predictable mood. Together they create a recognizable system that feels cinematic, grounded, and quietly premium.

PrimaryMahogany

RolesLogo, Btn Primary Bg

Mahogany brings depth and dignity, giving the palette its grounded, human core.

HEX#5A2A27

RGB90, 42, 39

HSL4, 40, 25

CMYK0, 53, 57, 65

SecondaryTeal

RolesLink, Btn Secondary Bg

Teal adds calm clarity and modern contrast while staying restrained and sophisticated.

HEX#4B7B7A

RGB75, 123, 122

HSL179, 24, 39

CMYK39, 0, 1, 52

TertiaryAntique Gold

RolesBtn Outlined Border, Btn Outlined Text, Headline

Antique Gold adds a warm spotlight effect that suggests prestige and highlights key moments without overpowering the system.

HEX#C8A24A

RGB200, 162, 74

HSL42, 53, 54

CMYK0, 19, 63, 22

Support Colors

The support colors extend the palette with subtle, low-drama accents that improve usability and soften the cinematic core. They stay muted so the main colors remain the visual signature.

Rosewood

RolesIcon, Border

Rosewood bridges the mahogany and gold with a quieter warm accent that supports structure and iconography.

HEX#7A5C54

RGB122, 92, 84

HSL13, 18, 40

CMYK0, 25, 31, 52

Sage Teal

RolesDivider, Outline

Sage Teal softens the main teal into a gentler utility tone that helps separators and outlines feel polished.

HEX#6E8F8A

RGB110, 143, 138

HSL171, 13, 50

CMYK23, 0, 3, 44

Neutral Colors

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

White

RolesBg Light, Btn Primary Text, Btn Secondary Text

HEX#FFFFFF

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

Ivory

HEX#F4EFE7

RGB244, 239, 231

HSL37, 37, 93

CMYK0, 2, 5, 4

Charcoal

RolesBg Dark, 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": "Mahogany", "hex": "#5A2A27", "role": "main", "cmyk": { "c": 0, "m": 53, "y": 57, "k": 65, "source": "colorfly" } }, { "name": "Teal", "hex": "#4B7B7A", "role": "main", "cmyk": { "c": 39, "m": 0, "y": 1, "k": 52, "source": "colorfly" } }, { "name": "Antique Gold", "hex": "#C8A24A", "role": "main", "cmyk": { "c": 0, "m": 19, "y": 63, "k": 22, "source": "colorfly" } }, { "name": "Rosewood", "hex": "#7A5C54", "role": "support", "cmyk": { "c": 0, "m": 25, "y": 31, "k": 52, "source": "colorfly" } }, { "name": "Sage Teal", "hex": "#6E8F8A", "role": "support", "cmyk": { "c": 23, "m": 0, "y": 3, "k": 44, "source": "colorfly" } }, { "name": "White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Ivory", "hex": "#F4EFE7", "role": "neutral", "cmyk": { "c": 0, "m": 2, "y": 5, "k": 4, "source": "colorfly" } }, { "name": "Charcoal", "hex": "#121212", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 93, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-mahogany: #5A2A27; --color-teal: #4B7B7A; --color-antique-gold: #C8A24A; --color-rosewood: #7A5C54; --color-sage-teal: #6E8F8A; --color-white: #FFFFFF; --color-ivory: #F4EFE7; --color-charcoal: #121212; }

:root { --role-logo: #5A2A27; --role-btn-primary-bg: #5A2A27; --role-link: #4B7B7A; --role-btn-secondary-bg: #4B7B7A; --role-btn-outlined-border: #C8A24A; --role-btn-outlined-text: #C8A24A; --role-headline: #C8A24A; --role-icon: #7A5C54; --role-border: #7A5C54; --role-divider: #6E8F8A; --role-outline: #6E8F8A; --role-bg-light: #FFFFFF; --role-btn-primary-text: #FFFFFF; --role-btn-secondary-text: #FFFFFF; --role-bg-dark: #121212; --role-text: #121212; }

{ "mahogany": "#5A2A27", "teal": "#4B7B7A", "antique-gold": "#C8A24A", "rosewood": "#7A5C54", "sage-teal": "#6E8F8A", "white": "#FFFFFF", "ivory": "#F4EFE7", "charcoal": "#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: #5A2A27; --gradient-partner: #A48A88; --gradient-accent: #7A5C54; --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: #5A2A27; --gradient-text-b: #A48A88; --gradient-text-c: #7A5C54; 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>