Vibrant Mediterranean City Color Palette for Real Estate Branding

Vibrant Mediterranean City Color Palette

This palette features vibrant reds and oranges against a vivid teal blue background, capturing a bold, warm, and inviting Mediterranean cityscape vibe. The main colors are rich and saturated, evoking energy and modernity. Supporting colors add warmth and balance, while the neutrals provide grounding for text and backgrounds without competing with the lively hues.

ComplementaryReal Estatemediterraneanvibrantwarmmodern

Main (Brand) Colors

The three main colors blend vibrant teal blue with contrasting warm reds and oranges, creating a visually striking and harmonious relationship that drives energy and recognition.

PrimaryTeal Blue

RolesLogo, Link, Btn Primary Bg, Headline

Teal Blue conveys calm sophistication and modernity, providing a strong and appealing anchor hue for the brand.

HEX#117A8D

RGB17, 122, 141

HSL189, 78, 31

CMYK88, 13, 0, 45

SecondaryCrimson Red

RolesBtn Secondary Bg, Btn Outlined Text

Crimson Red adds passion and warmth, infusing the palette with energy and urgency that complements the teal.

HEX#D1432F

RGB209, 67, 47

HSL7, 64, 50

CMYK0, 68, 78, 18

TertiaryPersimmon Orange

RolesBtn Outlined Border

Persimmon Orange brings brightness and friendliness, balancing the intensity of the red and highlighting key interface elements.

HEX#EF7C23

RGB239, 124, 35

HSL26, 86, 54

CMYK0, 48, 85, 6

Support Colors

The support colors extend the palette with warmer, muted shades that balance and soften the bold main hues, ensuring versatility and visual hierarchy.

Marigold

RolesIcon, Border, Divider, Outline

Marigold complements the main warm tones by providing a softer, approachable accent that enriches the palette without overwhelming it.

HEX#F7B05B

RGB247, 176, 91

HSL33, 91, 66

CMYK0, 29, 63, 3

Rust

Rust grounds the vibrant colors with a deeper earthy tone, enhancing readability and contrast when used sparingly.

HEX#C45A33

RGB196, 90, 51

HSL16, 59, 48

CMYK0, 54, 74, 23

Neutral Colors

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

Pure White

RolesBg Light, Btn Primary Text, Btn Secondary Text

HEX#FFFFFF

RGB255, 255, 255

HSL0, 0, 100

CMYK0, 0, 0, 0

Alabaster

RolesBg Dark

HEX#F3F2F1

RGB243, 242, 241

HSL30, 8, 95

CMYK0, 0, 1, 5

Charcoal

RolesText

HEX#1B1C1D

RGB27, 28, 29

HSL210, 4, 11

CMYK7, 3, 0, 89

COLORFLY_PALETTE_V2 { "format": "colorfly_palette_v2", "source": "colorfly.design", "colors": [ { "name": "Teal Blue", "hex": "#117A8D", "role": "main", "cmyk": { "c": 88, "m": 13, "y": 0, "k": 45, "source": "colorfly" } }, { "name": "Crimson Red", "hex": "#D1432F", "role": "main", "cmyk": { "c": 0, "m": 68, "y": 78, "k": 18, "source": "colorfly" } }, { "name": "Persimmon Orange", "hex": "#EF7C23", "role": "main", "cmyk": { "c": 0, "m": 48, "y": 85, "k": 6, "source": "colorfly" } }, { "name": "Marigold", "hex": "#F7B05B", "role": "support", "cmyk": { "c": 0, "m": 29, "y": 63, "k": 3, "source": "colorfly" } }, { "name": "Rust", "hex": "#C45A33", "role": "support", "cmyk": { "c": 0, "m": 54, "y": 74, "k": 23, "source": "colorfly" } }, { "name": "Pure White", "hex": "#FFFFFF", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 0, "k": 0, "source": "colorfly" } }, { "name": "Alabaster", "hex": "#F3F2F1", "role": "neutral", "cmyk": { "c": 0, "m": 0, "y": 1, "k": 5, "source": "colorfly" } }, { "name": "Charcoal", "hex": "#1B1C1D", "role": "neutral", "cmyk": { "c": 7, "m": 3, "y": 0, "k": 89, "source": "colorfly" } } ] } END_COLORFLY_PALETTE

:root { --color-teal-blue: #117A8D; --color-crimson-red: #D1432F; --color-persimmon-orange: #EF7C23; --color-marigold: #F7B05B; --color-rust: #C45A33; --color-pure-white: #FFFFFF; --color-alabaster: #F3F2F1; --color-charcoal: #1B1C1D; }

:root { --role-logo: #117A8D; --role-link: #117A8D; --role-btn-primary-bg: #117A8D; --role-headline: #117A8D; --role-btn-secondary-bg: #D1432F; --role-btn-outlined-text: #D1432F; --role-btn-outlined-border: #EF7C23; --role-icon: #F7B05B; --role-border: #F7B05B; --role-divider: #F7B05B; --role-outline: #F7B05B; --role-bg-light: #FFFFFF; --role-btn-primary-text: #FFFFFF; --role-btn-secondary-text: #FFFFFF; --role-bg-dark: #F3F2F1; --role-text: #1B1C1D; }

{ "teal-blue": "#117A8D", "crimson-red": "#D1432F", "persimmon-orange": "#EF7C23", "marigold": "#F7B05B", "rust": "#C45A33", "pure-white": "#FFFFFF", "alabaster": "#F3F2F1", "charcoal": "#1B1C1D" }

<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: #117A8D; --gradient-partner: #7CB6C0; --gradient-accent: #F7B05B; --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: #117A8D; --gradient-text-b: #7CB6C0; --gradient-text-c: #855F31; 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>