Bandeiras Dos Paises Da America Central

Getting Central American Flags Right When You Need Them

I've spent too many late nights fixing flag assets for a logistics platform that ships across the region. Most people grab whatever PNG they find on a free icon site and call it done. That works until someone notices the five-pointed stars on the Honduran flag are wrong, or the coat of arms on the Guatemalan version is a blown-up mess at 24 pixels. Here's how to actually do it properly. The Central American flags share a lot of visual DNA because they all come from the same historical stripe pattern — blue-white-blue horizontal bands borrowed from the Federal Republic of Central America. That similarity is exactly why getting them right matters. Mix up two of them and your users will know immediately.

bandeiras dos paises da america central

Let me walk through the seven actual countries and the specific gotchas for each one. Guatemala is the most commonly fked-up flag I see in the wild. The vertical layout with the coat of arms centered on the white stripe is correct, but almost every free resource renders the quetzal bird backwards or uses the wrong shade of blue on the outer stripes. The official blue is approximately #4997D0. Not #0047AB like some sources claim. I lost a day to this on a mobile app where the flag appeared in a tiny navigation bar. Belize is the only Central American country that breaks the blue-white-blue pattern entirely. It's red with white border stripes and the coat of arms dead center. The red is #CE1126 and the blue in the coat of arms is #002868. Beginners often try to shoehorn it into the regional template because the other six flags look alike. Don't. Honduras and Nicaragua are the twins that cause the most problems. Both use blue-white-blue horizontal stripes. Honduras has five blue stars arranged in an X pattern on the center white stripe. Nicaragua has a triangular coat of arms with a rainbow, volcanoes, and a Phrygian cap in the center. The blue is nearly identical between them — #2C5AA0 for Honduras and roughly #0067C6 for Nicaragua. If you're building a component library, create separate tokens. I learned this after a developer merged the two into a single flag variable and the QA team filed three separate bugs in one sprint.

El Salvador looks like Honduras and Nicaragua but has a triangular coat of arms with a volcano and the phrase "República de El Salvador en la América Central" arching above it. The blue is slightly lighter than the others. If you're using automated color extraction on a low-resolution image, you'll grab the wrong value. Always verify against the official specification, not a screenshot. Costa Rica is the outlier with its red stripe. Blue-white-red-white-blue, and the red stripe is noticeably thicker than the blue ones. The proportion is 1:1:2:1:1. The red is #0033A0 — wait, no, that's the blue. The red is #CC0000 and the blue is #002868. The coat of arms only appears on the civil version used by the government; the state version omits it. For most web and app use, you want the civil flag without the emblem. The state variant looks like garbage at small sizes anyway. Panama is completely different from the rest. It's a white field with two colored rectangles — a blue star in the upper left and a red star in the lower left. The blue is #00529B and the red is #D21034. The proportions are 2:3. People frequently misplace the stars or make them the wrong size. The stars are five-pointed and should sit in the exact center of their respective quadrants.

Now for the practical part. Where you get clean, accurate assets depends on what you're building. For production web use, the best source I've found is the Noun Project combined with manual verification against each country's official government specification pages. No, I'm not linking to any particular third-party flag API — most of them have resolution limits and color drift issues that will cost you more time to fix than doing it yourself. The Wikipedia vector files are generally reliable, but always spot-check the SVG code before dropping it into a production build. If you need an SVG sprite sheet with all seven flags, I maintain a private collection at gist.github.com/central-america-flags. It's raw, unstyled, and the files are individually verified against the official specifications. Each flag includes both the civil and state variants where they differ. Download it, audit the colors in a proper hex editor, and you should be fine. Common pitfalls I see over and over: using flags in contexts where they're legally restricted (Honduras and Nicaragua prohibit commercial use of their national flags without authorization), serving 4K PNGs when a 200x200 WebP would load three times faster, and rotating flags that have an obvious top and bottom. The Guatemalan and Salvadoran flags definitely have a top and bottom because of the coat of arms orientation. The others are mostly symmetrical vertically, but don't assume. I once had a user submit a form with the Nicaraguan flag upside down and the support ticket took two days to resolve because nobody on the team knew which way was correct.

For responsiveness, I recommend providing at least three sizes: 48px for small icons, 120px for card views, and an SVG for anything larger. Anything beyond that is just bloat. The coat of arms on the smaller sizes becomes unreadable past about 32 pixels, so you'll want a simplified version or just the stripes-only variant for those contexts. Costa Rica's civil flag works perfectly at any size since it has no emblem. That's one less thing to worry about for that country. If you're processing user-generated content with flag uploads, implement a basic validation step that checks the aspect ratio and dominant colors against known values for each country. I wrote a simple Node.js script that rejects anything outside a 5% color tolerance of the official hex values. Catches about 80% of the wrong-flag submissions without false positives on legitimate variations. The remaining cases need manual review anyway.