Flag White And Blue Stripes

Building a Clean Flag With White and Blue Horizontal Stripes

Flags with alternating white and blue stripes are one of the most common flag layouts you will encounter in web projects, embroidery work, and print shops. The pattern looks simple until you actually need to produce it at scale. I have run into this exact setup many times across different clients and different workflows, and there are enough small details that trip people up that I thought it worth covering properly. The basic layout uses a ratio of stripes that follows a whole-number sequence, typically an odd number like five or seven, with the top stripe being blue. The blue stripe sits at the canton area most of the time, or it spans the full width as alternating bands. The white stripes separate the blue, and the proportions matter more than you might expect once you start exporting for different media.

Flag White And Blue Stripes: Exact Specifications

Here are the specifications that actually work in practice, not the vague "blue and white" descriptions you see in casual references. The standard proportion for a five-stripe version is a flag ratio of 1:2. That means if the flag is 100 pixels tall, each stripe should be 20 pixels tall. Five stripes total: blue, white, blue, white, blue. The outer blue stripes are the same width as the inner ones. For a seven-stripe version, each stripe is roughly 14.3 percent of the height. The seventh stripe brings it back to blue on the bottom edge. Color values matter. A common mistake is using a generic CSS blue like #0000FF, which looks electric and artificial next to white. The correct approach uses a deep royal blue or navy tone. Try #0D5EAF or #0057B8 for the blue stripe, and pure white #FFFFFF for the alternating bands. If you are printing this on fabric, the blue will shift slightly darker due to thread absorption. That is normal and expected. Factor it in before you lock in your color.

There is also a subtlety with stroke and anti-aliasing when rendering this flag in vector or pixel-based formats. When you export at low resolution, the blue-to-white transition develops a faint gray halo along the stripe borders. This is most visible at 72 DPI or when the image is scaled down for mobile views. The fix is straightforward: set the export resolution to at least 150 DPI, enable anti-aliasing on the vector paths, and add a 1-pixel feather tolerance if your output format supports it. Doing this takes about two extra minutes and prevents the flag from looking soft or blurry in any downstream application. I ran into a real problem with this last year on a project where a client needed the flag pattern for screen-printed uniforms. They sent me a PNG exported at 96 DPI from a design tool, and when we enlarged it for the print mesh, every stripe edge came out jagged and the blue bled into adjacent areas during the silk-screen pass. I reconstructed the flag as a vector SVG with exact path boundaries, re-exported at 300 DPI as both a vector file and a high-resolution PNG, and the print shop had no issues on the second run. The difference between a usable asset and a problematic one was almost entirely in the export settings, not the design itself.

How to Create the Pattern in Common Tools

I use three main tools depending on the output requirement: Figma for web assets, Illustrator for print, and Python with Pillow for batch generation. Each has a slightly different workflow, and knowing which one to reach for saves time. In Figma, create a frame at your chosen ratio, then draw five rectangles stacked vertically. Fill the first, third, and fifth with your blue value. Fill the second and fourth with white. Group them, convert to a component, and you can resize the entire flag without breaking proportions. The constraint system handles the scaling automatically, which is faster than adjusting each rectangle individually. In Illustrator, use the Rectangle Tool to draw a single stripe, then copy it and flip it vertically. Use the Align panel to distribute them evenly across the artboard height. Convert the group to a symbol so you can reuse it across multiple layouts without rebuilding it. This method is slower than Figma for quick iterations but produces cleaner vector output for print.

In Python, you can generate the flag programmatically, which is useful when you need dozens of variations at once. Here is a minimal script that produces a five-stripe flag at any resolution: from PIL import Image, ImageDraw width = 600

height = 300 img = Image.new("RGB", (width, height), "#FFFFFF") draw = ImageDraw.Draw(img)

stripe_height = height // 5 blue = "#0D5EAF" for i in range(0, 5, 2):

    draw.rectangle([(0, i * stripe_height), (width, (i + 1) * stripe_height)], fill=blue) img.save("flag_white_blue_stripes.png") This script runs in under two seconds on a standard machine and produces a clean PNG with no anti-aliasing artifacts because PIL handles the rasterization at the pixel level. If you need transparency or an alpha channel, change the image mode to "RGBA" and set the background accordingly.

Common Pitfalls and What to Watch For

The most frequent issue is incorrect stripe ratio. People often set the stripes to equal height but forget that the overall flag ratio still needs to match the intended aspect. A flag that should be 1:2 becomes 3:5 if you accidentally stretch the canvas width after setting the stripe heights. Always set the canvas dimensions first, then divide the height by the number of stripes. Another issue is color consistency across media. A blue that looks correct on screen will appear significantly darker when printed on fabric or paper. I recommend testing your final color on the actual material before committing to a full production run. Even a small variation in ink formulation or fabric weave can shift the perceived color by enough to make the flag look wrong to someone familiar with the original. When working with web assets, avoid using the flag as a background image without setting the correct background-size property. If you set it to "cover" on a non-standard viewport, the stripes will stretch unevenly and the proportions will break. Use "contain" with explicit width and height values, or set the background-size to the exact pixel dimensions of your source file. This prevents distortion on any device.

There is also a cultural sensitivity note worth mentioning. Flags with white and blue stripes appear in multiple national and regional identities, including Greece and several other countries. If your project involves any public-facing content, verify which specific flag you are reproducing and ensure it matches your intent. Using a generic version without context is fine for decorative purposes, but using an inaccurate national flag in official or promotional material can cause problems.

Download and Asset Guidance

For most users, a ready-made SVG is the most practical option. SVG files preserve the exact proportions and colors at any size, and they render sharply on both screen and print. You can generate your own using the Python script above or create one manually in any vector editor. If you need a PNG version, export at 300 DPI for print and 150 DPI for web use. Do not use lower resolutions for anything that will be displayed at full size. If you are building a design system or component library, store the flag as a reusable symbol or component with named layers for each stripe. This makes it easy to adjust colors or spacing later without reconstructing the entire layout. I keep all flag assets in a dedicated folder with subfolders for SVG, PNG, and PDF variants, and each file is named with its dimensions and color values so I know exactly what I am looking at without opening it. The whole process from concept to final asset usually takes about 10 to 15 minutes for a single version, or roughly 45 minutes if you are generating multiple size variants and color checks. Budget accordingly if you are working on a tight timeline.