This palette translates the United States flag into a refined brand system with patriotic red, deep navy, and a restrained brass accent. The whites stay crisp and functional, so the palette feels civic and recognizable without becoming overly literal or праздничный.
This palette translates the United States flag into a refined brand system with patriotic red, deep navy, and a restrained brass accent. The whites stay crisp and functional, so the palette feels civic and recognizable without becoming overly literal or праздничный.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The deep navy and flag red create an immediately recognizable American signal, while the brass accent adds structure without weakening the core flag reference. Together they feel formal, durable, and suitable for identity systems that need heritage and clarity.
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 deep navy and flag red create an immediately recognizable American signal, while the brass accent adds structure without weakening the core flag reference. Together they feel formal, durable, and suitable for identity systems that need heritage and clarity.
RolesBtn Primary Bg
This red carries the emotional energy of the flag and gives primary actions a confident, unmistakable presence.
#B22234178, 34, 52353, 68, 420, 81, 71, 30RolesLogo, Link, Headline
This navy anchors the system with institutional weight and keeps the palette stable across branding and interface use.
#3C3B6E60, 59, 110241, 30, 3345, 46, 0, 57RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text
This muted brass adds a ceremonial accent that supports hierarchy and contrast without competing with the flag colors.
#B08D57176, 141, 8736, 36, 520, 20, 51, 31These accents extend the main palette by adding quiet structural support and gentle balance, rather than introducing a new visual direction. The blue-leaning neutral notes keep the flag reference coherent across UI states and surface treatments.
RolesIcon, Border, Outline
This subdued blue-gray softens the stronger flag tones and works well for interface structure and secondary information.
#56739A86, 115, 154214, 28, 4744, 25, 0, 40RolesBg Light
This pale cool neutral lightens the system and preserves a crisp, airy background that still feels connected to the navy.
#D9E2EF217, 226, 239215, 41, 899, 5, 0, 6Utility colors for backgrounds, text, borders, and balance.
RolesBtn Primary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesDivider
#F5F7FA245, 247, 250216, 33, 972, 1, 0, 2RolesBg Dark, Text, Btn Secondary 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-capitol-red: #B22234;
--color-heritage-navy: #3C3B6E;
--color-regal-brass: #B08D57;
--color-signal-slate: #56739A;
--color-porcelain-mist: #D9E2EF;
--color-pure-white: #FFFFFF;
--color-flag-white: #F5F7FA;
--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-btn-primary-bg: #B22234;
--role-logo: #3C3B6E;
--role-link: #3C3B6E;
--role-headline: #3C3B6E;
--role-btn-secondary-bg: #B08D57;
--role-btn-outlined-border: #B08D57;
--role-btn-outlined-text: #B08D57;
--role-icon: #56739A;
--role-border: #56739A;
--role-outline: #56739A;
--role-bg-light: #D9E2EF;
--role-btn-primary-text: #FFFFFF;
--role-divider: #F5F7FA;
--role-bg-dark: #111827;
--role-text: #111827;
--role-btn-secondary-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.{
"capitol-red": "#B22234",
"heritage-navy": "#3C3B6E",
"regal-brass": "#B08D57",
"signal-slate": "#56739A",
"porcelain-mist": "#D9E2EF",
"pure-white": "#FFFFFF",
"flag-white": "#F5F7FA",
"ink-black": "#111827"
}