This palette translates the Canada flag into a clean identity system built around vivid maple red, a deeper civic red, and a restrained red-brown accent. The neutral whites keep the palette crisp and unmistakably Canadian while preserving strong readability across digital touchpoints.
This palette translates the Canada flag into a clean identity system built around vivid maple red, a deeper civic red, and a restrained red-brown accent. The neutral whites keep the palette crisp and unmistakably Canadian while preserving strong readability across digital touchpoints.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors stay within a red family, which keeps the palette immediately recognizable as Canada-inspired while allowing enough variation for hierarchy and interface use. The result feels unified, patriotic, and flexible without drifting away from the flag reference.
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 stay within a red family, which keeps the palette immediately recognizable as Canada-inspired while allowing enough variation for hierarchy and interface use. The result feels unified, patriotic, and flexible without drifting away from the flag reference.
RolesLogo, Btn Primary Bg
This bright maple red delivers the strongest flag reference and gives the brand immediate visibility.
#D80621216, 6, 33352, 95, 440, 97, 85, 15RolesLink, Btn Secondary Bg, Headline
This deeper red adds structure and seriousness, helping the system support links, headings, and secondary actions.
#B21F35178, 31, 53351, 70, 410, 83, 70, 30RolesBtn Outlined Border, Btn Outlined Text
This restrained red-brown provides a quieter accent that keeps outlined elements distinct without competing with the stronger reds.
#8A2F2F138, 47, 470, 49, 360, 66, 66, 46The support colors extend the red system with subtle, quieter tones that improve usability and visual balance. They reinforce the Canadian theme without introducing a new competing color story.
RolesIcon, Border
This cool blue-gray softens the red-heavy palette and gives interface elements a calm, practical counterbalance.
#D9E1E8217, 225, 232208, 25, 886, 3, 0, 9RolesDivider, Outline
This muted stone tone creates understated separation and keeps UI lines visible without drawing attention away from the reds.
#B7C2CC183, 194, 204209, 17, 7610, 5, 0, 20Utility colors for backgrounds, text, borders, and balance.
RolesBg Light
#F6F7F8246, 247, 248210, 13, 971, 0, 0, 3RolesBtn Primary Text, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Dark, 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-maple-red: #D80621;
--color-heritage-red: #B21F35;
--color-parliament-rust: #8A2F2F;
--color-glacier-blue-gray: #D9E1E8;
--color-winter-stone: #B7C2CC;
--color-snow-white: #F6F7F8;
--color-pure-white: #FFFFFF;
--color-maple-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: #D80621;
--role-btn-primary-bg: #D80621;
--role-link: #B21F35;
--role-btn-secondary-bg: #B21F35;
--role-headline: #B21F35;
--role-btn-outlined-border: #8A2F2F;
--role-btn-outlined-text: #8A2F2F;
--role-icon: #D9E1E8;
--role-border: #D9E1E8;
--role-divider: #B7C2CC;
--role-outline: #B7C2CC;
--role-bg-light: #F6F7F8;
--role-btn-primary-text: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-bg-dark: #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.{
"maple-red": "#D80621",
"heritage-red": "#B21F35",
"parliament-rust": "#8A2F2F",
"glacier-blue-gray": "#D9E1E8",
"winter-stone": "#B7C2CC",
"snow-white": "#F6F7F8",
"pure-white": "#FFFFFF",
"maple-black": "#111111"
}