You’ve seen it a thousand times. Maybe you’re designing a website for a local non-profit or trying to print a massive banner for a Fourth of July bash. You grab a color picker, click on an image of Old Glory you found on Google, and call it a day. But here’s the thing—you’re probably using the wrong shades. The usa flag colors hex codes aren't just "red" and "blue." If you use standard web-safe red (#FF0000) or a basic royal blue, the flag looks neon, almost vibrating against the screen. It looks cheap.
The United States government is actually incredibly picky about this. They don't use Hex codes internally; they use a system called the Standard Color Reference of America. Specifically, the colors are Old Glory Red and Old Glory Blue. When you try to translate those physical fabric dyes into the digital world of pixels and light, things get messy.
The precise usa flag colors hex codes you actually need
Let’s get the numbers out of the way first. If you want the flag to look "official" and not like a grocery store circular, these are the Hex codes most designers and government agencies agree on for digital displays.
For Old Glory Red, use #B22234.
It’s deeper than you think. It has a weight to it.
Then there’s Old Glory Blue, which is #3C3B6E.
This isn't a bright sky blue or even a standard navy. It’s dark, almost somber.
And White? That one is easy: #FFFFFF.
Why does this matter? Well, if you use a brighter blue, the stars don’t "pop" the right way. The contrast between the #3C3B6E blue and the #FFFFFF white is a specific visual ratio that our brains have been trained to recognize as "authentic" after decades of seeing the physical flag in person.
The technical headache of Pantone and CMYK
If you’re moving from a screen to a physical product, hex codes won't save you. Honestly, Hex is just a digital approximation. The Department of State and the General Services Administration (GSA) usually refer to the CAUS (Color Association of the United States) standard.
If you are a printer, you’re looking at Pantone 193 C for the red and Pantone 282 C for the blue. Check those out. Notice how the blue is nearly black? In the printing world, ink behaves differently than light. If you try to print #B22234 directly without a CMYK conversion, you might end up with a muddy maroon or a weirdly pinkish tint. It’s a nightmare for brand consistency.
Why the colors aren't just "Red, White, and Blue"
History isn't as tidy as we’d like. Back in 1777, when the Continental Congress passed the Flag Resolution, they didn't include a style guide. There were no hex codes in the 18th century. People used whatever dyes they had on hand—indigo for the blue, madder root or cochineal for the red. This led to a wild variety of flags. Some were pale; some were nearly purple.
It wasn't until the 20th century that the U.S. government decided to stop the chaos. President Taft signed an executive order in 1912 that finally standardized the proportions and the colors. They wanted a flag that looked the same whether it was flying over a post office in Maine or an embassy in Tokyo.
The symbolism behind the shades
We often hear that red stands for valor and blue for justice. That’s partially true, but those meanings weren't actually assigned to the flag itself in 1777. They were actually attributed to the colors in the Great Seal of the United States in 1782.
Charles Thomson, the Secretary of the Continental Congress, explained it like this:
- White signifies purity and innocence.
- Red represents hardiness and valor.
- Blue stands for vigilance, perseverance, and justice.
When you use the correct usa flag colors hex values, you are technically maintaining that specific "hardiness." A bright, neon red doesn't feel very "hardy." It feels like a sale at a car dealership. The deeper #B22234 red carries the gravity of the history it represents.
Common mistakes when using USA flag colors in web design
I see this all the time on local government sites or veteran-owned business pages. They use #FF0000. It hurts the eyes. Accessibility is a huge deal now, and the contrast ratio between your text and your background is non-negotiable under WCAG 2.1 guidelines.
If you put white text over the official Old Glory Blue (#3C3B6E), you get a contrast ratio of about 8.8:1. That’s an easy "AAA" rating for accessibility. But if you use a lighter, more "electric" blue, you might drop into the "AA" range or worse, making it hard for people with visual impairments to read your site.
Don't over-saturate
Digital screens (RGB) have a much wider gamut than physical dyes. It is very tempting to "punch up" the colors to make the flag look more vibrant on an iPhone’s OLED screen. Resist that urge. If you crank up the saturation, you lose the "official" feel. The flag starts to look like clip art. Stick to the muted, historic tones of the official usa flag colors hex pallet.
Digital Rendering vs. Fabric Reality
There is a weird phenomenon where the flag looks different depending on the material. A nylon flag flying in the sun will look brighter than a cotton flag in the shade. When you are choosing hex codes, you have to decide: are you representing the flag as it appears in a photo, or are you representing the "ideal" version of the flag?
For most UI/UX work, you want the ideal version.
- Red: #B22234 (RGB: 178, 34, 52)
- Blue: #3C3B6E (RGB: 60, 59, 110)
- White: #FFFFFF (RGB: 255, 255, 255)
If you are building a dark mode version of a site, you might even need to slightly adjust these so they don't "glow" weirdly against a pure black background. Some designers drop the opacity of the red just a tiny bit to keep it from bleeding into the surrounding dark pixels.
A note on the 13 stripes
Remember, it’s seven red and six white. The red stripes are on the top and bottom. If you get the hex codes right but mess up the stripe order, someone in the comments will definitely let you know about it. The blue canton (the "union") should extend from the top of the flag down to the bottom of the fourth red stripe.
Actionable steps for your next project
Stop guessing. If you’re a developer or a creator, bake these values into your CSS variables immediately.
- Define your variables: Create a
:rootselector in your CSS. Name them--usa-red: #b22234;and--usa-blue: #3c3b6e;. This ensures that every time you reference the "official" colors, you aren't accidentally grabbing a random shade from a color picker. - Check your export settings: If you’re working in Illustrator or Photoshop, ensure your color space is set to sRGB if the final output is a website. If you work in ProPhoto RGB and then export for web, your usa flag colors hex values will shift and look dull or overly green.
- Test for accessibility: Use a tool like Adobe Color or Contrast Checker. Ensure your blue background and white text meet at least a 4.5:1 ratio for standard text and 3:1 for large text. The official blue is dark enough that you’ll almost always pass.
- Verify for Print: If your digital design is ever going to be printed on a business card or a flyer, talk to your printer about Pantone matching. Give them the 193 C (Red) and 282 C (Blue) codes. Don't just send a PNG and hope for the best.
Using the right hex codes is a small detail that makes a massive difference in the perceived professionalism of a design. It shows you respect the standards and the history behind the symbol. Plus, it just looks better.