Falcon Red#D81F26
Date Palm Green#0D6B4A
Marina Blue#1E4E8C
Desert Teal#4E7B74
Terracotta Bronze#8A5A44
Palette direction

Dubai Flag Inspired Color Palette

This palette translates the Dubai flag into a sharper, brand-ready system with vivid red as the primary signal, deep green and regal blue as supporting anchors, and clean neutrals for clarity and scale. The result feels civic, energetic, and polished without becoming a literal flag replica.

Split ComplementaryNonedubaiflag inspiredcivic identitymiddle east
palette-preview.example
None color direction

Dubai Flag Inspired Color Palette

This palette translates the Dubai flag into a sharper, brand-ready system with vivid red as the primary signal, deep green and regal blue as supporting anchors, and clean neutrals for clarity and scale. The result feels civic, energetic, and polished without becoming a literal flag replica.

Explore the color system
Logo contrast guide

Logo color pairings

ColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.

Logo Pure White #FFFFFFon Marina Blue #1E4E8C8.3:1 Excellent
Logo Pure White #FFFFFFon Falcon Red #D81F265.1:1 Strong
Logo Ink Black #111111on Pure White #FFFFFF18.9:1 Excellent
Logo Pure White #FFFFFFon Terracotta Bronze #8A5A445.8:1 Strong
Icon color
BackgroundFalcon Red#D81F26TextPure White#FFFFFF
Primary Button5.07:1
AA

Best for the main action users should notice first.

BackgroundDate Palm Green#0D6B4ATextPure White#FFFFFF
Secondary Button6.52:1
AA

Useful for softer choices and secondary paths.

BackgroundPure White#FFFFFFTextMarina Blue#1E4E8C
Outlined Button8.32:1
AAA

Good for lower-emphasis actions on light surfaces.

BackgroundPure White#FFFFFFTextMarina Blue#1E4E8C
Text Button8.32:1
AAA

A quiet action for links, navigation, and inline decisions.

Palette composition8 colorsSplit Complementary color relationship
9:41Dubai Flag Inspired Color Palette Color role balance
Split Complementary system
60% DominantNeutrals

Backgrounds, large surfaces, whitespace, and reading comfort.

30% SecondarySupport colors

Sections, secondary UI, illustrations, and repeated brand moments.

10% AccentMain colors

High-attention moments like primary actions and memorable highlights.

CDubai Flag Inspired Color PaletteNone brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors echo the Dubai flag’s red, green, and blue while shifting the blue deeper and the green richer so the palette reads as a contemporary identity system rather than a literal reproduction. Together they create a memorable civic mix that feels ceremonial, confident, and digitally usable.

Clear roles create a consistent brand experience.

Color Roles and Usage Map

Assign existing palette colors to brand, typography, and interface roles.

Brand identity

LogoUsed for logo marks and core brand symbols.Falcon Red #D81F26
HeadlineUsed for main titles and key messages.Date Palm Green #0D6B4A
LinkUsed for links and interactive text.Marina Blue #1E4E8C

Buttons

Primary Button
BackgroundFalcon Red #D81F26
TextPure White #FFFFFF
Secondary Button
BackgroundDate Palm Green #0D6B4A
TextPure White #FFFFFF
Outlined Button
BackgroundMarina Blue #1E4E8C
TextMarina Blue #1E4E8C

Interface

TextDefault readable body text.Ink Black #111111
Bg LightLight page or section background.Pure White #FFFFFF
Bg DarkDark page or section background.Ink Black #111111
IconSmall interface icons and marks.Desert Teal #4E7B74
BorderCards, inputs, and component borders.Terracotta Bronze #8A5A44
DividerSubtle separators between content.Ink Black #111111
OutlineFocus rings and emphasis outlines.Desert Teal #4E7B74

Palette Colors

A compact view of the brand, support, and neutral colors that make up this system.

Main (Brand) Colors

The main colors echo the Dubai flag’s red, green, and blue while shifting the blue deeper and the green richer so the palette reads as a contemporary identity system rather than a literal reproduction. Together they create a memorable civic mix that feels ceremonial, confident, and digitally usable.

PrimaryFalcon Red

RolesLogo, Btn Primary Bg

This red carries the flag’s strongest visual cue and gives the brand immediate recognition and energy.

HEX#D81F26
RGB216, 31, 38
HSL358, 75, 48
CMYK0, 86, 82, 15
SecondaryDate Palm Green

RolesBtn Secondary Bg, Headline

This green adds heritage depth and a grounded, trustworthy tone that balances the palette’s intensity.

HEX#0D6B4A
RGB13, 107, 74
HSL159, 78, 24
CMYK88, 0, 31, 58
TertiaryMarina Blue

RolesLink, Btn Outlined Border, Btn Outlined Text

This blue introduces a calm, contemporary edge that supports navigation and adds structure without overpowering the flag-inspired core.

HEX#1E4E8C
RGB30, 78, 140
HSL214, 65, 33
CMYK79, 44, 0, 45

Support Colors

The support colors extend the civic mood with restrained utility tones that keep the main colors versatile across interfaces and print. They add contrast, hierarchy, and sophistication without competing with the flag-inspired trio.

Desert Teal

RolesIcon, Outline

This muted teal bridges the green and blue notes, making UI accents feel cohesive and measured.

HEX#4E7B74
RGB78, 123, 116
HSL171, 22, 39
CMYK37, 0, 6, 52
Terracotta Bronze

RolesBorder

This warm support tone adds a subtle regional richness and helps frame content with a grounded accent.

HEX#8A5A44
RGB138, 90, 68
HSL19, 34, 40
CMYK0, 35, 51, 46

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
Pearl Sand
HEX#F3F0EA
RGB243, 240, 234
HSL40, 27, 94
CMYK0, 1, 4, 5
Ink Black

RolesBg Dark, Divider, Text

HEX#111111
RGB17, 17, 17
HSL0, 0, 7
CMYK0, 0, 0, 93

Export and Handoff

Copy palette values for design systems, websites, and client handoff.

Color tokens

Use these in CSS when you want every raw palette color available by name. Best for websites, landing pages, and design system variables.

Use when: you need the actual colors.
:root {
  --color-falcon-red: #D81F26;
  --color-date-palm-green: #0D6B4A;
  --color-marina-blue: #1E4E8C;
  --color-desert-teal: #4E7B74;
  --color-terracotta-bronze: #8A5A44;
  --color-pure-white: #FFFFFF;
  --color-pearl-sand: #F3F0EA;
  --color-ink-black: #111111;
}

Role tokens

Use these in CSS when colors are assigned to practical jobs like text, buttons, borders, links, and backgrounds.

Use when: you need UI roles, not just swatches.
:root {
  --role-logo: #D81F26;
  --role-btn-primary-bg: #D81F26;
  --role-btn-secondary-bg: #0D6B4A;
  --role-headline: #0D6B4A;
  --role-link: #1E4E8C;
  --role-btn-outlined-border: #1E4E8C;
  --role-btn-outlined-text: #1E4E8C;
  --role-icon: #4E7B74;
  --role-outline: #4E7B74;
  --role-border: #8A5A44;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-btn-secondary-text: #FFFFFF;
  --role-bg-dark: #111111;
  --role-divider: #111111;
  --role-text: #111111;
}

JSON

Use this structured palette data in apps, generators, plugins, or tools that need to read the palette programmatically.

Use when: a developer or app needs data.
{
    "falcon-red": "#D81F26",
    "date-palm-green": "#0D6B4A",
    "marina-blue": "#1E4E8C",
    "desert-teal": "#4E7B74",
    "terracotta-bronze": "#8A5A44",
    "pure-white": "#FFFFFF",
    "pearl-sand": "#F3F0EA",
    "ink-black": "#111111"
}
Press Space to load new palette