Terra Culture Diversity Color Palette for Museums

Terra Culture Diversity Color Palette

This palette honors the rich cultural diversity of a nation by combining warm, inviting reds and earthy ochres with a vibrant teal, supported by subtle and grounded secondary hues, and balanced neutrals to ensure clear readability and sophisticated harmony across digital and print interfaces.

Split ComplementaryNonediversitycultureheritagemuseum

Main (Brand) Colors

The three main colors reflect warmth, earthiness, and vibrancy drawn from diverse cultural artifacts, combining a rich red, warm ochre, and dynamic teal to create a visually engaging and recognizable system.

PrimaryCrimson

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

Crimson symbolizes passion, history, and the deep roots of cultural traditions, providing a strong foundation for the brand identity.

HEX#9B2F2F

RGB155, 47, 47

HSL0, 53, 40

CMYK0, 70, 70, 39

SecondaryOchre

RolesBtn Secondary Bg, Headline

Ochre brings warmth and earthiness, evoking the natural landscapes and artisanal crafts that enrich the nation's heritage.

HEX#CC7A00

RGB204, 122, 0

HSL36, 100, 40

CMYK0, 40, 100, 20

TertiaryTeal

Teal adds a vibrant, refreshing contrast that represents dynamic cultural exchange and the modern reinterpretation of tradition.

HEX#217A7E

RGB33, 122, 126

HSL183, 58, 31

CMYK74, 3, 0, 51

Support Colors

Support colors extend the main palette with softer, muted tones that complement and balance the vibrancy of the primary hues while maintaining a subordinate visual role.

Sand

RolesIcon, Border, Divider, Outline

Sand acts as a soft, neutral accent that balances richness with subtlety, grounding the palette in natural, earthy shades.

HEX#D6C19B

RGB214, 193, 155

HSL39, 42, 72

CMYK0, 10, 28, 16

Neutral Colors

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

Ivory

RolesBg Light, Btn Primary Text

HEX#FFFFFF

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

Almond

RolesBg Dark

HEX#E8E2D6

RGB232, 226, 214

HSL40, 28, 87

CMYK0, 3, 8, 9

Charcoal

RolesText, Btn Secondary Text

HEX#3F3A36

RGB63, 58, 54

HSL27, 8, 23

CMYK0, 8, 14, 75

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Crimson", "hex": "#9B2F2F", "role": "main", "cmyk": { "c": 0, "m": 70, "y": 70, "k": 39, "source": "colorfly" } }, { "name": "Ochre", "hex": "#CC7A00", "role": "main", "cmyk": { "c": 0, "m": 40, "y": 100, "k": 20, "source": "colorfly" } }, { "name": "Teal", "hex": "#217A7E", "role": "main", "cmyk": { "c": 74, "m": 3, "y": 0, "k": 51, "source": "colorfly" } }, { "name": "Sand", "hex": "#D6C19B", "role": "support", "cmyk": { "c": 0, "m": 10, "y": 28, "k": 16, "source": "colorfly" } }, { "name": "Ivory", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Almond", "hex": "#E8E2D6", "role": "neutral", "cmyk": { "c": 0, "m": 3, "y": 8, "k": 9, "source": "colorfly" } }, { "name": "Charcoal", "hex": "#3F3A36", "role": "neutral", "cmyk": { "c": 0, "m": 8, "y": 14, "k": 75, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --role-logo: #9B2F2F; --role-link: #9B2F2F; --role-btn-primary-bg: #9B2F2F; --role-btn-outlined-border: #9B2F2F; --role-btn-outlined-text: #9B2F2F; --role-btn-secondary-bg: #CC7A00; --role-headline: #CC7A00; --role-icon: #D6C19B; --role-border: #D6C19B; --role-divider: #D6C19B; --role-outline: #D6C19B; --role-bg-light: #FFFFFF; --role-btn-primary-text: #FFFFFF; --role-bg-dark: #E8E2D6; --role-text: #3F3A36; --role-btn-secondary-text: #3F3A36; }

<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: #9B2F2F; --gradient-partner: #C88D8D; --gradient-accent: #D6C19B; --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: #9B2F2F; --gradient-text-b: #C88D8D; --gradient-text-c: #746854; 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>