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.
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 systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
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.Assign existing palette colors to brand, typography, and interface roles.
A compact view of the brand, support, and neutral colors that make up this 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.
RolesLogo, Btn Primary Bg
This red carries the flag’s strongest visual cue and gives the brand immediate recognition and energy.
#D81F26216, 31, 38358, 75, 480, 86, 82, 15RolesBtn Secondary Bg, Headline
This green adds heritage depth and a grounded, trustworthy tone that balances the palette’s intensity.
#0D6B4A13, 107, 74159, 78, 2488, 0, 31, 58RolesLink, 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.
#1E4E8C30, 78, 140214, 65, 3379, 44, 0, 45The 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.
RolesIcon, Outline
This muted teal bridges the green and blue notes, making UI accents feel cohesive and measured.
#4E7B7478, 123, 116171, 22, 3937, 0, 6, 52RolesBorder
This warm support tone adds a subtle regional richness and helps frame content with a grounded accent.
#8A5A44138, 90, 6819, 34, 400, 35, 51, 46Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F3F0EA243, 240, 23440, 27, 940, 1, 4, 5RolesBg Dark, Divider, Text
#11111117, 17, 170, 0, 70, 0, 0, 93Copy palette values for design systems, websites, and client handoff.
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;
}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;
}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"
}