This palette reinterprets the French tricolor with a contemporary balance of disciplined blue, refined red, and soft warm accents. It feels civic and timeless while staying flexible enough for modern digital interfaces and brand systems.
This palette reinterprets the French tricolor with a contemporary balance of disciplined blue, refined red, and soft warm accents. It feels civic and timeless while staying flexible enough for modern digital interfaces and brand systems.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors create a clear tricolor structure that immediately reads as French-inspired without feeling like a literal flag replica. The deep blue and vivid red provide strong identity contrast, while the white neutral keeps the system crisp and recognizable.
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 create a clear tricolor structure that immediately reads as French-inspired without feeling like a literal flag replica. The deep blue and vivid red provide strong identity contrast, while the white neutral keeps the system crisp and recognizable.
RolesLogo, Btn Primary Bg
This blue gives the palette its most iconic French reference and anchors the brand with trust and structure.
#244A9A36, 74, 154221, 62, 3777, 52, 0, 40RolesBtn Secondary Bg, Headline
This red adds energy and cultural distinctiveness, bringing warmth and urgency to key moments.
#C63D4D198, 61, 77353, 55, 510, 69, 61, 22RolesBtn Outlined Text
This white keeps the system open and lightweight, preserving the clean contrast associated with the tricolor.
#F7F7F3247, 247, 24360, 20, 960, 0, 2, 3The support colors extend the tricolor with quieter tonal bridges that help the palette work in interfaces, patterns, and states. They stay subordinate to the main colors while adding structure and depth.
RolesLink, Icon, Border
This softened blue supports navigation and UI structure without competing with the primary emblematic blue.
#6E86B8110, 134, 184221, 34, 5840, 27, 0, 28RolesBtn Outlined Border, Divider, Outline
This muted red-pink softens the stronger red and provides a gentle accent for separators and outlines.
#D9A2A8217, 162, 168353, 42, 740, 25, 23, 15Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#EDF0F4237, 240, 244214, 24, 943, 2, 0, 4RolesBg Dark, Text
#11182717, 24, 39221, 39, 1156, 38, 0, 85Copy 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-republic-blue: #244A9A;
--color-civic-red: #C63D4D;
--color-flag-white: #F7F7F3;
--color-pale-banner-blue: #6E86B8;
--color-muted-rose-accent: #D9A2A8;
--color-pure-white: #FFFFFF;
--color-soft-mist: #EDF0F4;
--color-ink-black: #111827;
}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: #244A9A;
--role-btn-primary-bg: #244A9A;
--role-btn-secondary-bg: #C63D4D;
--role-headline: #C63D4D;
--role-btn-outlined-text: #F7F7F3;
--role-link: #6E86B8;
--role-icon: #6E86B8;
--role-border: #6E86B8;
--role-btn-outlined-border: #D9A2A8;
--role-divider: #D9A2A8;
--role-outline: #D9A2A8;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-bg-dark: #111827;
--role-text: #111827;
}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.{
"republic-blue": "#244A9A",
"civic-red": "#C63D4D",
"flag-white": "#F7F7F3",
"pale-banner-blue": "#6E86B8",
"muted-rose-accent": "#D9A2A8",
"pure-white": "#FFFFFF",
"soft-mist": "#EDF0F4",
"ink-black": "#111827"
}