Nopal Green#1F7A3A
Chile Red#D62F2F
Pure White#FFFFFF
Agave Teal#3C5E57
Stone Olive#6E7769
Palette direction

Mexico Flag Inspired Color Palette

This palette translates the Mexican flag into a sharper brand system with verdant green, vivid red, and a cleaner white accent that adds clarity without competing with the core identity. The result feels patriotic, energetic, and modern while staying balanced for both logo use and digital UI.

CustomNonemexicoflag inspiredpatrioticgreen
palette-preview.example
None color direction

Mexico Flag Inspired Color Palette

This palette translates the Mexican flag into a sharper brand system with verdant green, vivid red, and a cleaner white accent that adds clarity without competing with the core identity. The result feels patriotic, energetic, and modern while staying balanced for both logo use and digital UI.

Explore the color system
Logo contrast guide

Logo color pairings

ColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.

Logo Charcoal Black #161616on Pure White #FFFFFF18.1:1 Excellent
Logo Pure White #FFFFFFon Nopal Green #1F7A3A5.4:1 Strong
Logo Pure White #FFFFFFon Chile Red #D62F2F4.9:1 Strong
Logo Pure White #FFFFFFon Charcoal Black #16161618.1:1 Excellent
Icon color
BackgroundNopal Green#1F7A3ATextPure White#FFFFFF
Primary Button5.38:1
AA

Best for the main action users should notice first.

BackgroundChile Red#D62F2FTextPure White#FFFFFF
Secondary Button4.88:1
AA

Useful for softer choices and secondary paths.

BackgroundPure White#FFFFFFTextPure White#FFFFFF
Outlined Button1.00:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundPure White#FFFFFFTextChile Red#D62F2F
Text Button4.88:1
AA

A quiet action for links, navigation, and inline decisions.

Palette composition8 colorsCustom color relationship
9:41Mexico Flag Inspired Color Palette Color role balance
Custom system
60% DominantNeutrals

Backgrounds, large surfaces, whitespace, and reading comfort.

30% SecondarySupport colors

Sections, secondary UI, illustrations, and repeated brand moments.

10% AccentMain colors

High-attention moments like primary actions and memorable highlights.

CMexico Flag Inspired Color PaletteNone brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors echo the Mexican flag in a more usable brand-ready form, pairing a deep green and a confident red with a crisp white note that keeps the system distinctive and cohesive. Together they create a recognizable national reference with enough contrast and nuance for both identity and interface work.

Clear roles create a consistent brand experience.

Color Roles and Usage Map

Assign existing palette colors to brand, typography, and interface roles.

Brand identity

LogoUsed for logo marks and core brand symbols.Nopal Green #1F7A3A
HeadlineUsed for main titles and key messages.Charcoal Black #161616
LinkUsed for links and interactive text.Chile Red #D62F2F

Buttons

Primary Button
BackgroundNopal Green #1F7A3A
TextPure White #FFFFFF
Secondary Button
BackgroundChile Red #D62F2F
TextPure White #FFFFFF
Outlined Button
BackgroundPure White #FFFFFF
TextPure White #FFFFFF

Interface

TextDefault readable body text.Charcoal Black #161616
Bg LightLight page or section background.Pure White #FFFFFF
Bg DarkDark page or section background.Charcoal Black #161616
IconSmall interface icons and marks.Agave Teal #3C5E57
BorderCards, inputs, and component borders.Agave Teal #3C5E57
DividerSubtle separators between content.Stone Olive #6E7769
OutlineFocus rings and emphasis outlines.Stone Olive #6E7769

Palette Colors

A compact view of the brand, support, and neutral colors that make up this system.

Main (Brand) Colors

The main colors echo the Mexican flag in a more usable brand-ready form, pairing a deep green and a confident red with a crisp white note that keeps the system distinctive and cohesive. Together they create a recognizable national reference with enough contrast and nuance for both identity and interface work.

PrimaryNopal Green

RolesLogo, Btn Primary Bg

This grounded green anchors the palette in the Mexican flag and gives the brand a stable, emblematic core.

HEX#1F7A3A
RGB31, 122, 58
HSL138, 59, 30
CMYK75, 0, 52, 52
SecondaryChile Red

RolesLink, Btn Secondary Bg

This vivid red adds urgency and visibility, keeping the palette spirited and unmistakably energetic.

HEX#D62F2F
RGB214, 47, 47
HSL0, 67, 51
CMYK0, 78, 78, 16
TertiaryPure White

RolesBtn Outlined Border, Btn Outlined Text

This crisp white turns the outline treatment into a bright, high-contrast accent that feels clean and unmistakably flag-inspired.

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0

Support Colors

The support colors soften the flag palette for interface clarity and visual balance, extending the system with restrained, practical tones. They stay subordinate to the main green and red while helping icons, borders, and dark surfaces feel polished rather than decorative.

Agave Teal

RolesIcon, Border

This subdued teal balances the warmth of the flag colors and gives functional UI elements a calm, grounded edge.

HEX#3C5E57
RGB60, 94, 87
HSL168, 22, 30
CMYK36, 0, 7, 63
Stone Olive

RolesDivider, Outline

This muted olive-gray supports structure without drawing attention away from the stronger national colors.

HEX#6E7769
RGB110, 119, 105
HSL99, 6, 44
CMYK8, 0, 12, 53

Neutral Colors

Utility colors for backgrounds, text, borders, and balance.

Pure White

RolesBg Light, Btn Primary Text, Btn Secondary Text

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Masa Cream
HEX#F4F1EA
RGB244, 241, 234
HSL42, 31, 94
CMYK0, 1, 4, 4
Charcoal Black

RolesHeadline, Bg Dark, Text

HEX#161616
RGB22, 22, 22
HSL0, 0, 9
CMYK0, 0, 0, 91

Export and Handoff

Copy palette values for design systems, websites, and client handoff.

Color tokens

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-nopal-green: #1F7A3A;
  --color-chile-red: #D62F2F;
  --color-pure-white: #FFFFFF;
  --color-agave-teal: #3C5E57;
  --color-stone-olive: #6E7769;
  --color-masa-cream: #F4F1EA;
  --color-charcoal-black: #161616;
}

Role tokens

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: #1F7A3A;
  --role-btn-primary-bg: #1F7A3A;
  --role-link: #D62F2F;
  --role-btn-secondary-bg: #D62F2F;
  --role-btn-outlined-border: #FFFFFF;
  --role-btn-outlined-text: #FFFFFF;
  --role-icon: #3C5E57;
  --role-border: #3C5E57;
  --role-divider: #6E7769;
  --role-outline: #6E7769;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-btn-secondary-text: #FFFFFF;
  --role-headline: #161616;
  --role-bg-dark: #161616;
  --role-text: #161616;
}

JSON

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.
{
    "nopal-green": "#1F7A3A",
    "chile-red": "#D62F2F",
    "pure-white": "#FFFFFF",
    "agave-teal": "#3C5E57",
    "stone-olive": "#6E7769",
    "masa-cream": "#F4F1EA",
    "charcoal-black": "#161616"
}
Press Space to load new palette