Purple Gold Justice Color Palette for Legal and Finance Brands

Purple Gold Justice Color Palette

This palette is inspired by the strong contrasts and meaningful symbolism of the image, capturing a balanced combination of deep purple, vibrant gold, and warm terracotta alongside softer blues and muted gold accents. It creates a harmonious yet dynamic system suitable for brands that want to convey wisdom, justice, and authority with a subtle warmth and modernity.

CustomFinancepurplegoldterracottajustice

Main (Brand) Colors

The triadic combination of deep purple, warm terracotta, and rich gold offers bold color contrast and symbolizes wisdom, strength, and prestige, making the palette distinctive and balanced.

PrimaryDeep Purple

RolesLogo, Link, Btn Primary Bg

Deep Purple evokes wisdom, authority, and sophistication, grounding the brand with a strong sense of stability.

HEX#4B286D

RGB75, 40, 109

HSL270, 46, 29

CMYK31, 63, 0, 57

SecondaryWarm Terracotta

RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text

Warm Terracotta adds an inviting and dynamic warmth, balancing seriousness with approachability.

HEX#D65D29

RGB214, 93, 41

HSL18, 68, 50

CMYK0, 57, 81, 16

TertiaryRich Gold

RolesHeadline

Rich Gold symbolizes prestige and excellence, highlighting important elements with vibrancy and optimism.

HEX#D8AD36

RGB216, 173, 54

HSL44, 68, 53

CMYK0, 20, 75, 15

Support Colors

Supporting colors in muted blue and soft gold add depth and subtlety to the palette while reinforcing trust and richness without overpowering the main colors.

Muted Blue

RolesIcon, Border, Divider, Outline

Muted Blue complements the primary purple by introducing calmness and professionalism, enhancing visual hierarchy.

HEX#7A98B2

RGB122, 152, 178

HSL208, 27, 59

CMYK31, 15, 0, 30

Soft Gold

Soft Gold serves lightly to accent and bring continuity with the main Rich Gold, delivering warmth with subtlety.

HEX#C5B260

RGB197, 178, 96

HSL49, 47, 57

CMYK0, 10, 51, 23

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

RolesBg Dark

HEX#F1EEE9

RGB241, 238, 233

HSL38, 22, 93

CMYK0, 1, 3, 5

Charcoal

RolesText

HEX#2D2B29

RGB45, 43, 41

HSL30, 5, 17

CMYK0, 4, 9, 82

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Deep Purple", "hex": "#4B286D", "role": "main", "cmyk": { "c": 31, "m": 63, "y": 0, "k": 57, "source": "colorfly" } }, { "name": "Warm Terracotta", "hex": "#D65D29", "role": "main", "cmyk": { "c": 0, "m": 57, "y": 81, "k": 16, "source": "colorfly" } }, { "name": "Rich Gold", "hex": "#D8AD36", "role": "main", "cmyk": { "c": 0, "m": 20, "y": 75, "k": 15, "source": "colorfly" } }, { "name": "Muted Blue", "hex": "#7A98B2", "role": "support", "cmyk": { "c": 31, "m": 15, "y": 0, "k": 30, "source": "colorfly" } }, { "name": "Soft Gold", "hex": "#C5B260", "role": "support", "cmyk": { "c": 0, "m": 10, "y": 51, "k": 23, "source": "colorfly" } }, { "name": "White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Ivory", "hex": "#F1EEE9", "role": "neutral", "cmyk": { "c": 0, "m": 1, "y": 3, "k": 5, "source": "colorfly" } }, { "name": "Charcoal", "hex": "#2D2B29", "role": "neutral", "cmyk": { "c": 0, "m": 4, "y": 9, "k": 82, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-deep-purple: #4B286D; --color-warm-terracotta: #D65D29; --color-rich-gold: #D8AD36; --color-muted-blue: #7A98B2; --color-soft-gold: #C5B260; --color-white: #FFFFFF; --color-ivory: #F1EEE9; --color-charcoal: #2D2B29; }

:root { --role-logo: #4B286D; --role-link: #4B286D; --role-btn-primary-bg: #4B286D; --role-btn-secondary-bg: #D65D29; --role-btn-outlined-border: #D65D29; --role-btn-outlined-text: #D65D29; --role-headline: #D8AD36; --role-icon: #7A98B2; --role-border: #7A98B2; --role-divider: #7A98B2; --role-outline: #7A98B2; --role-bg-light: #FFFFFF; --role-btn-primary-text: #FFFFFF; --role-btn-secondary-text: #FFFFFF; --role-bg-dark: #F1EEE9; --role-text: #2D2B29; }

{ "deep-purple": "#4B286D", "warm-terracotta": "#D65D29", "rich-gold": "#D8AD36", "muted-blue": "#7A98B2", "soft-gold": "#C5B260", "white": "#FFFFFF", "ivory": "#F1EEE9", "charcoal": "#2D2B29" }

<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: #4B286D; --gradient-partner: #9C89AF; --gradient-accent: #7A98B2; --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: #4B286D; --gradient-text-b: #9C89AF; --gradient-text-c: #7A98B2; 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>