This palette reinterprets Spain’s flag with a confident crimson, a warm gold, and a restrained royal red that feel unmistakably Spanish without becoming literal. The supports add a sunlit copper and a deep maritime blue, while the neutrals keep interfaces clean and highly readable.
This palette reinterprets Spain’s flag with a confident crimson, a warm gold, and a restrained royal red that feel unmistakably Spanish without becoming literal. The supports add a sunlit copper and a deep maritime blue, while the neutrals keep interfaces clean and highly readable.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors pair Spain’s energetic red and golden yellow with a deeper red accent, creating a recognizable national rhythm that feels bold, ceremonial, and versatile across brand and interface applications. The relationship stays rooted in the flag while giving the system enough contrast to work for digital product design.
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 pair Spain’s energetic red and golden yellow with a deeper red accent, creating a recognizable national rhythm that feels bold, ceremonial, and versatile across brand and interface applications. The relationship stays rooted in the flag while giving the system enough contrast to work for digital product design.
RolesLogo, Btn Primary Bg
This saturated crimson gives the brand its strongest flag reference and delivers immediate visual recognition.
#C81D25200, 29, 37357, 75, 450, 86, 82, 22RolesBtn Secondary Bg, Link
This warm gold echoes the flag’s luminous band and adds a more welcoming, premium energy.
#D7A11E215, 161, 3042, 76, 480, 25, 86, 16RolesHeadline, Btn Outlined Border, Btn Outlined Text
This deeper garnet adds gravitas and helps headlines and outlined treatments feel anchored and refined.
#8F1F2A143, 31, 42354, 64, 340, 78, 71, 44The support colors extend the flag palette with quieter utility tones that improve usability without competing with the main reds and gold. Their cooler and earthier undertones balance the warmth of the core palette and help the system feel more complete.
RolesIcon, Border
This copper tone reinforces the warm heritage feel and works well for subtle UI structure.
#B96B3C185, 107, 6023, 51, 480, 42, 68, 27RolesDivider, Outline
This muted navy adds contrast and calm, supporting legibility while echoing Spain’s coastal dimension.
#2D4F7C45, 79, 124214, 47, 3364, 36, 0, 51Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F4F0E6244, 240, 23043, 39, 930, 2, 6, 4RolesBg Dark, Text, Btn Secondary 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-iberian-crimson: #C81D25;
--color-castilian-gold: #D7A11E;
--color-royal-garnet: #8F1F2A;
--color-sunbaked-copper: #B96B3C;
--color-atlantic-navy: #2D4F7C;
--color-pure-white: #FFFFFF;
--color-almond-ivory: #F4F0E6;
--color-deep-charcoal: #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: #C81D25;
--role-btn-primary-bg: #C81D25;
--role-btn-secondary-bg: #D7A11E;
--role-link: #D7A11E;
--role-headline: #8F1F2A;
--role-btn-outlined-border: #8F1F2A;
--role-btn-outlined-text: #8F1F2A;
--role-icon: #B96B3C;
--role-border: #B96B3C;
--role-divider: #2D4F7C;
--role-outline: #2D4F7C;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-bg-dark: #111111;
--role-text: #111111;
--role-btn-secondary-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.{
"iberian-crimson": "#C81D25",
"castilian-gold": "#D7A11E",
"royal-garnet": "#8F1F2A",
"sunbaked-copper": "#B96B3C",
"atlantic-navy": "#2D4F7C",
"pure-white": "#FFFFFF",
"almond-ivory": "#F4F0E6",
"deep-charcoal": "#111111"
}