# Draw the Ukrainian Flag

As you probably know, there is a war going on in Ukraine. I noticed that it seems nobody has posted a Ukrainian flag challenge yet, so I thought I'd do it myself in support of Ukraine.

## The Challenge

Here is the flag:

• The flag is divided horizontally across the middle into two equally sized stripes.
• Stripe colors: (0, 87, 183) or #0057B7 (blue, top) and (255, 215, 0) or #FFD700 (yellow, bottom).
• Colors must be exact if possible, otherwise use the closest available blue and yellow.
• The image can be saved to a file or piped raw to STDOUT in any common image file format, or it can be displayed in a window.
• The image must be sized at a 3:2 ratio, and at least 78 by 52 pixels.
• Alternatively, output a block of text at least 78 characters wide made of non-whitespace characters that depicts the flag, using ANSI color codes to color it. (Use standard blue and yellow.)
• Built-in flag images, flag-drawing libraries, or horrendously upscaling the Ukrainian flag emoji are prohibited.

This is , so shortest code wins!

• If the ANSI color code option is chosen, what aspect ratio should we assume each character has? Mar 19, 2022 at 16:38
• @Nitrodon You may assume each character is a square. Mar 19, 2022 at 17:43
• @des54321 It must be exact. Mar 19, 2022 at 18:53
• Unless I'm misunderstanding the QBasic answer already posted, I think that answer has inexact colors due to limitations of the language, but it is certainly likely other ancient languages could also have too-limited color-spaces to display the correct colors Mar 19, 2022 at 19:42
• – tsh
Mar 20, 2022 at 5:10

# HTML+SVG, 39 bytes

<svg viewbox=12.5,-8.9,1.5,1><text>😴


The question forbids zooming in on the Ukraine flag... but not the flag of Sweden! Apparently that's disallowed too, so I'm using an emoji.

This code is terrible practice and probably doesn't work on most browsers/OSes. It works on Firefox 98 on MacOS 12.2.1, and the emoji itself is very system dependent in its size and layout.

In particular, it doesn't seem to work in a Stack Snippet, so here's something: Try it Online!

Run this at your own risk, it will severely lag your computer.

• I like this answer... but does it pass the rule that 'Colors must be exact if possible'? Mar 22, 2022 at 3:52
• @Dingus For this approach, it's as close as I've found so far. I tried a lot of emoji before I found this one. So I'd say yes. Mar 22, 2022 at 3:54
• Right, but presumably there's a non-emoji way to get the exact colours in HTML+SVG. Whether the rule applies on a per-approach or per-language basis isn't really clear though. Mar 22, 2022 at 4:09
• 1:1 ratio lmao gg Jan 19 at 19:17

# Scratch, 155 bytes

when gf clicked
set pen color to(()+(22455
set pen size to(800
pen down
go to x:(-240)y:(-90
set pen size to(180
set pen color to(()+(16766720
set x to(240


# Explanation

So basically:

1. When the green flag is clicked, the program sets the pen color to ()+(22455), because the set pen color to block doesn't support bare numbers, so we have to do:
[nothing, evaluates to 0]+22455
22455 is the Scratch color value of RGB(0, 87, 183) (blue).
2. Then the pen size is set to 800, which is just a big number
3. After executing pen down, the pencil goes to x:-240, which is the leftmost pixel, and to y:-90 (the starting point for the bottom part). As it goes, the pencil draws a big blue blob which fills out the entire screen.
4. The pen size is set to 180, half of the window height.
5. The pen color is set to ()+(16766720, the scratch color value for RGB(255, 215, 0) (yellow).
6. Finally, with setting x to 240, the program draws the bottom "line".
• wow scratch!! I think this is the first time I've seen this language on PPCG :P Mar 19, 2022 at 18:38
• @des54321 I think there have been quite a few before
– user108721
Mar 19, 2022 at 22:46
• @des54321 there have been quite a few scratch answers before Mar 20, 2022 at 12:20
• I didn't know Scratch was supported here! Mar 26, 2022 at 8:56

# CSS, 787574 71 bytes

*>*{width:9em;border-top:3em solid #0057B7;border-bottom:3em solid gold

Edit: Saved 3 bytes by using @pxeger's observation that gold is #FFD700. Saved 1 byte thanks to @RickN. Saved 3 bytes thanks to @IsmaelMiguel.

• blue is on top not yellow. Mar 19, 2022 at 15:44
• It seems to still render fine with *>* which is one byte less than body. That will also style the (implicit) head tag and its contents, but those are not visible. Mar 21, 2022 at 15:45
• Instead of 78px, use 9em, and instead of 26px use 3em. This should give you a 9em X 6em flag. Which is a 3:2 ratio and larger in screen size AND saves 3 bytes. Mar 21, 2022 at 23:59
• You can remove the space in solid #0057B7. Sep 29, 2022 at 22:14

# HTML + SVG + CSS, 737068 66 bytes

<svg width=225 style=background:linear-gradient(#0057B7+50%,gold+0

Explanation:

• As a replaced element, the <svg> element in HTML defaults to dimensions of 300px x 150px
• Setting width="225" gives the <svg> a width/height ratio of 225px / 150px or 3 / 2

Update 1: Another 3 bytes sliced off after @pxeger's suggestions on how to abuse the HTML even further.

Update 2: A further 2 bytes shaved off thanks to @cornonthecob's ideas on how to strip from the HTML any vestige of its remaining self-respect.

Update 3: 2 more bytes removed thanks to @Sphinxxx's excellent observation that gold may be followed by the value 0 (or anything less than 50%) without visibly altering the linear-gradient background.

• With some more abuse of HTML you can save 3 bytes: <svg width=225 style="background:linear-gradient(#0057B7 50%,gold 50%" (removing the quotes around 225, and omitting the closing ) and >) Mar 20, 2022 at 15:01
• You can abuse HTML even further by replacing the spaces in the style attribute with + and then you can remove the quotes: <svg width=225 style=background:linear-gradient(#0057B7+50%,gold+50% Mar 20, 2022 at 15:54
• Another 2 bytes: Have the gold start at 0 (anything less than 50% will give you the desired sharp gradient). <svg width=225 style=background:linear-gradient(#0057B7+50%,gold+0 Mar 21, 2022 at 23:00
• Thank you, @Sphinxxx. Your observation seems obvious in hindsight, but it wasn't until you mentioned it that it was. Mar 22, 2022 at 13:29
• In Chrome, it doesn’t work without the closing )> Jul 9, 2022 at 19:36

# Excel VBA, 84 66 Bytes

Anonymous function that takes no input and outputs to the range A1:NH830. Cell sizes are not adjusted, rather the cell that are selected are adjusted to account for the $$\\approx415:124\$$ default cell aspect ratio.

[A1:NH830].Interior.Color=55265:[A1:NH415].Interior.Color=12015360


## Output

Excel limits how far you can zoom out to 10% normal zoom - so this solution doesn't quite fit on my 4K display. The output is also so large that attempting to copied and paste the output into a photo editor seems to exceed the maximum size for a single file in the Windows clipboard.

If you have a display that can fit the full output of this script, please feel free to take a snapshot of such and update this answer.

In the meantime, this is what the solution looks like when cells are scaled, instead of changing what ranges are selected.

• You can use &HB75700 instead of 12015360 for the same number of bytes. Mar 29, 2022 at 11:27

# Python 3, 535145 42¹ bytes

(+2 bytes if you want to use the Full Block Unicode Character █ instead of X)

¹ saved 3 bytes thanks to @pxeger

x="\x1b[3%dm"+("\n"+"X"*78)*13;print(x%4,x%3)


Attempt This Online!

Nicer alternative that uses background colors instead of foreground colors:

x="\x1b[4%dm"+("\n"+" "*78)*13;print(x%4+x%3)

Note that this solution is not valid since it uses spaces.

Attempt This Online!

Here, the programs are represented with 3 more bytes, since the byte \x1b does not get rendered (see ATOs).

On my terminal 13 rows seems to be the appropriate height, but it may vary.

• If each character is a pixel I think you want 26 rather than 13. Also I think the escape could go in front of every newline, so x=("\033[3%dm\n"+"X"*78)*26;print(x%4,x%3) (does that work?). Mar 19, 2022 at 16:02
• You can remove the 0 in the \033. In fact, you can include the character itself in the string verbatim: ato.pxeger.com/… Mar 19, 2022 at 16:07
• @JonathanAllan it does not work because x would contain 26 escape sequences %d. For the height, I didn't consider each character as a pixel, but I tried to respect the aspect ratio. Anyway, it does not change much for the code-golf Mar 19, 2022 at 16:09
• Ah, yep %d >.< nice answer anyway :D Mar 19, 2022 at 16:10

# Wolfram Language (Mathematica), 56 55 bytes

Image@{{{0,29,61}/85},{{1,.843,0}}}~ImageResize~{78,52}


Try it online!

• The best I've found using exponentiation, 56 byte:
Image@{{{0,.05,.4}},{{1,.62,0}}}^.36~ImageResize~{78,52}
Image@{{{0,.19,.6}},{{1,.77,0}}}^.65~ImageResize~{78,52}
Image@{{{0,.26,.66}},{{1,.81,0}}}^.8~ImageResize~{78,52}

• The only valid dimension that can be written in fewer bytes than {78,52} is 9{9,6}.
If it weren't for x~f~y precedence over xy, this would have saved one byte.
• You probably do need 43/51 to satisfy "Colors must be exact"
– att
Mar 19, 2022 at 21:05
• @att good point. First, from Image docs: Image[data,"type"] can be used to create an image of a specified data type. Values in data are coerced to the specified type by rounding or clipping. By default, "Real32" is assumed. Hence 43/51 would still be flawed. But aside from this, when Mathematica interprets the data in the output as bytes it yields the correct RGB values. The sense is that, for Mathematica, .843 (along with many other floats) is exactly the value 215 in the 0-255 range of the RGB24 scale. Mar 19, 2022 at 23:00
• Using the first two entries of ColorData[97] would be an amusing way to accomplish this. Unfortunately, though, those colors aren't quite right. Mar 22, 2022 at 17:20
• @MichaelSeifert Interesting, I was unaware of that function... Maybe there are some flag for which it would do the trick Mar 22, 2022 at 18:39
• Possibly. I mainly brought it up because the entries of ColorData[97] are the default colors for plots in Mathematica, and it happens that the first two of those default colors are blue and yellow(-ish). Mar 22, 2022 at 18:40

# Red, 5957545351 50 bytes

x: 99x33 view/tight[below h1 x#0057B7 h1 x#FFD700]


-1 byte thanks to an anonymous user!

-2 more bytes saved by an anonymous user!

-1 again

# TI-Basic 83, 25 bytes

This is a rather extreme abuse of the "closest color in your language" rule, as the TI-83 Plus' LCD screen is only capable of two colors (black and "white"; white in air-quotes, as the off color is more green than anything), but it beats all the other graphical output answers except Unicorn, and I imagine a newer TI calculator with a color display, such as the TI-84 Plus CE, could do it right with almost identical code, but I don't think I can test that, as I don't own any such calculator, and a quick search of the internet didn't find any free emulators.

:AxesOff


Edit: @MarcMush pointed out that, per site consensus, I can assume that the graph bounds are already initialized to ZStandard, allowing me to trim that, and explained some details of how the calculator's MEM screen displays program bytecounts, revising my bytecount down to 25

## Output:

To make my rules abuse slightly better, I did opt to make the "yellow" half be lightly filled instead of empty. Although this might not technically constitute a solid color, in the context of what a TI-83 can display, I feel like it is closer to yellow than no fill.

• you can remove ZStandard (codegolf.stackexchange.com/a/52967/98541) and use Xmin instead of -10. Also, TI-Basic is tokenized. With these optimizations, I get 24 bytes Mar 23, 2022 at 9:32
• @MarcMush good one on removing ZStandard, but I cant seem to find Xmin as something I can put in on my calculator, and I'm aware of TI-Basic's tokenization, my bytecount is directly from my calculator's memory management screen Mar 23, 2022 at 15:19
• Actually I just tried something else, it seems that the bytecount displayed in the MEM screen includes the program's name, as renaming it to U instead of the name I had UKRAINE dropped the bytecount to 36, suggesting that my bytecount is actually 35 Mar 23, 2022 at 15:20
• Xmin is in VARS > Window... Mar 23, 2022 at 15:42
• an empty program is 10 bytes, so I substract 10 bytes from the program size (1-letter name of course), and I get the same program size as other people answering in TI-Basic. That way it will be the same as if you manually count with the token sizes Mar 23, 2022 at 15:44

# R, 7258 55 bytes

barplot(rbind(1,1),3,co=c("gold","#0557b7"),bo=NA,as=1)


Try it on rdrr.io!

• image(t(1:2),c=c("gold","#0557b7"),ax=F) Mar 19, 2022 at 23:34
• @DominicvanEssen this was my first try, but it doesn't keep the ratio constant and depends on the viewing area. Mar 20, 2022 at 6:21
• Ah, yes. With that in mind I like yours more! Mar 20, 2022 at 8:55
• I feel like there is a way to use the bg argument/parameter and just plot one colour letting the background take care of the rest, but struggling to actually execute --- anyone got any ideas?
– JDL
Mar 21, 2022 at 13:54

## SQL, 379346 244 bytes

This uses Microsoft T-SQL in SQL Management Studio's (SSMS) to generate spatial data. This code should work with Oracle's PL-SQL with few changes. Not sure about how it would work with others.

Updated with changes to reduce byte count by t-clausen.dk and removed unnecessary spaces and line breaks, though it's not very readable anymore.

DECLARE @C INT=1,@ VARCHAR(MAX)='' WHILE @C<32 SELECT @+='|.0,0 .x'+iif(@C=14,'|26,0 x',''), @C+=1 SET @=REPLACE(REPLACE(REPLACE(@+'|-26,0 -26?', '|','SELECT CAST(''POLYGON((0 0,78 0,78 '),'x','26?UNION ALL '),'?',',0 0))''AS GEOMETRY)')EXEC(@)


Update using REPLACE to cut out redundant parts of the strings and removing some extra spaces after commas:

DECLARE @C INT = 1,@S VARCHAR(MAX) = '',@G VARCHAR(99)='|1 0,1 .1,0 .1,0 0))'' AS GEOMETRY) G UNION ALL '

WHILE @C<=31 --loop is just to cycle through the colors

BEGIN
SET @S+=@G  --MERGE SELECT STATEMENTS OF UNVIEWABLE OBJECTS (TOO SMALL) FOR WRONG COLORS
IF @C=14 SET @S+='|78 0,78 26,0 26,0 0))'' AS GEOMETRY) UNION ALL '  --ADD TOP OF FLAG IN BLUE
SET @C+=1   --UPDATE COLOR COUNTER
END
SET @S+='|78 0,78 -26,0 -26,0 0))'' AS GEOMETRY)'
SELECT @S = REPLACE(@S,'|','SELECT CAST(''POLYGON ((0 0,')
EXEC (@S)  --execute query


Original T_SQL:

DECLARE @C INT = 1,@S VARCHAR(MAX) = '',@G VARCHAR(99)='SELECT CAST(''POLYGON ((0 0, 1 0, 1 .1, 0 .1, 0 0))'' AS GEOMETRY) G UNION ALL '

WHILE @C<=31 --loop is just to cycle through the colors

BEGIN
SET @S+=@G  --MERGE SELECT STATEMENTS OF UNVIEWABLE OBJECTS (TOO SMALL) FOR WRONG COLORS
IF @C=14 SET @S+='SELECT CAST(''POLYGON ((0 0, 78 0, 78 26, 0 26, 0 0))'' AS GEOMETRY) UNION ALL '  --ADD TOP OF FLAG IN BLUE
SET @C+=1   --UPDATE COLOR COUNTER
END

SET @S+='SELECT CAST(''POLYGON ((0 0, 78 0, 78 -26, 0 -26, 0 0))'' AS GEOMETRY)' --ADD BOTTOM OF FLAG IN YELLOW(ish)

EXEC (@S)  --execute query


Unfortunately, the colors look a little faded. Apologies to Ukraine for the bad colors. There don't seem to be too many colors available and they are all faded tones.

SQL Fiddle doesn't handle the spatial data. If there's another fiddle site that does, let me know or add a link. Or if there's a way to set the colors.

• Welcome to Code Golf, and nice answer! Had no idea SQL was capable of graphical output. Mar 21, 2022 at 19:29
• hello, nice answer. I see some places this can be golfed, I suspect this can be at least 100 characters shorter. Everything inside your WHILE can be written as 1 expression, this allows you to remove BEGIN and END. G does not need to be declared as a variable as you only use it once and the last SET and SELECT can be written in 1 expression. C<=31 can be written as C<32 Mar 22, 2022 at 9:24
• I tried to golf your answer, I cut a few corners. Feel free to copy whatever you want from this Mar 22, 2022 at 13:22
• @t-clausen.dk - thanks. I have included your changes and removed some line breaks and spaces. Mar 22, 2022 at 16:30
• you can still remove some of the spaces. You can use a line break instead of a otherwise necessary space, this will not change the length of the code Mar 25, 2022 at 9:05

# QBasic, 56 bytes

SCREEN 9
LINE(1,1)-(99,33),1,BF
LINE(1,34)-(99,66),14,BF


Try it at Archive.org.

Draws a 99x66 flag on the screen:

• Those colors don't look exact, but I'm assuming QBasic has a very limited color palette? Mar 19, 2022 at 19:21
• Yeah, there are only 16 colors to choose from. I actually think color 9, light blue, looks a bit closer than color 1, but the OP said "Use standard blue and yellow"... though I guess technically ANSI colors are only allowed if a solution uses character output (which I can't really do because QBasic's console is only 24 lines long)... so I guess if the OP says this is invalid, I can delete it. Mar 19, 2022 at 20:53
• Ah, I see you've already asked about it. "Closest available" works for me... except which is closer to (0, 87, 183): (0, 0, 170) or (0, 0, 255)? Hmm... Mar 19, 2022 at 21:01
• I did do a bit of googling around and was actually able to find some QBasic documentation someones hosting that says that with the screen mode you're using, it actually gets 64 colors on video adapters with >64k memory, although I couldn't find anything on what those colors actually are Mar 20, 2022 at 2:48
• Nice to see QBasic after all these years! That was my first programming language! Mar 20, 2022 at 14:03

# Python 3 + Pillow, 120 100 bytes

from PIL.Image import*;i=new("RGB",(78,52));i.putdata([(0,87,183)]*2028+[(255,215,0)]*2028);i.show()

• You can shorten this a little bit by using [(0,87,183)]*2028+[(255,215,0)]*2028 instead of the list comprehension. Mar 19, 2022 at 23:09
• Another note: using ; instead of \n doesn't make a difference in bytes, so you can use newlines, unless of course you want to keep the decreased readability ;-). Mar 20, 2022 at 18:51
• @SylvesterKruin this is CGSE, of course I want decreased readability /s Mar 21, 2022 at 14:57

# HTML + CSS, 79 bytes

<p style=background:#0057B7><p><style>*{aspect-ratio:3;margin:0;background:gold}

The final } should be removed, but this doesn't work in a Stack Snippet.

The HTML named colour gold is exactly the right colour for the yellow of the flag. I wonder whether this is a coincidence.

# ZSH, 93 characters

This works in ZSH. I'm using Ubuntu, but ZSH on other systems should work fine. I have no hidden Unicode characters

a(){printf "printf '.%.0s' {1..78}w\n%.0s" {1..13}};printf '\033[44m';a;printf '\033[43m';a


## Output

Note: for some reason, if you run it many times, it breaks, so I advise running reset between invocations of this.

## Explanation

# make a function named a
a() {
# generate a row of periods followed by a newline, and print that row 13 times. See https://stackoverflow.com/a/5349842/16886597 for exactly what that does. Basically, this function creates a 78x13 grid of dots, and prints them to the screen
printf "printf '.%.0s' {1..78}w\n%.0s" {1..13}
};
# set the color to blue
printf '\033[44m';
# print the dots
a;
# set the color to yellow
printf '\033[43m';
# print the dots
a


Note that I also use the shortcut for command substitution, saving one char.

• You can replace {1..13} and {1..78} with {a..m} and {+..y} respectively, because there are still the correct number of characters in each of those ranges. You also don't need that w. Mar 20, 2022 at 15:12

# Zsh-F, 38 bytes

eval ';<<<␛[4'{4,3}m\${(l:78+{a..m}:)} Attempt This Online! ␛ should be the literal ASCII escape character, but this doesn't display in StackExchange markdown. ## Demo # Unicorn, 14 10 bytes P3X4Y3C7P3  Note: There isn't a closer blue; the alternative is cyan. • Amazing! 14 bytes Mar 24, 2022 at 8:47 • @BlackMild As it turns out, that wasn't even a great way to do it. I got it down to 10 Mar 24, 2022 at 19:02 # Desmos, 56 54 bytes C=rgb([0,255],[87,215],[183,0]) [2,0]<y<[4,2]\{0<x<6\}  Try It On Desmos! Try It On Desmos! - Prettified I noticed that when I converted the rgb values to hsv, I got that both had a common s value of 100.0. It saves one byte compared to rgb, but I wasn't sure if the values I got were exact or if they were just rounded (especially the v value of 71.8 for the blue color), so I decided not to use hsv in case it was inaccurate. • huh that HSV observation is interesting, but based on a quick conversion myself I'm getting 212,97,72 and 51,51,100 for the blue and yellow respectively, so I doubt there's a golfing opportunity there Mar 20, 2022 at 3:19 • @des54321 I used an online tool for the conversion because I don't know how to do it by hand, so it could be possible that the online tool is wrong. I got 211, 100, 71.8 for blue and 51, 100, 100 for yellow, using this tool I found online. Mar 20, 2022 at 3:31 • hmmm I plugged it into that tool too and I got 212,97.3,71.8 for the hsv, possibly you mis-typed something? I reversed it and the hsv you're getting seems to be hex #0558b7, instead of #0557b7 Mar 20, 2022 at 3:34 • @des54321 I found the problem. The question body put (0, 87, 183) for the rgb value for blue (which was what I was using for the conversion) which is apparently different from the hex value that follows immediately afterwards (#0557B7), which has a rgb value of (5, 87, 183). Now I'm not sure which one I'm supposed to be using because different answers use different values 0_0 Mar 20, 2022 at 3:41 • @des54321 No need to suggest another edit, I'll just edit it directly (because I have over 2k rep) Mar 20, 2022 at 4:00 ## Asymptote 88 82 bytes (I update my shortest code here, including its history. Hope that it is legal!) // Asymptote 82 bytes fill(box((0,0),(78,26)),rgb(0,87,183));fill(box((0,0),(78,-26)),rgb("#FFD700"));  // Asymptote 88 bytes fill(box((0,0),(300,100)),rgb(0,87,183)); fill(box((0,0),(300,-100)),rgb(255,215,0));  In this world of civilization, it's hard to believe that there have been an invasion war from Russia. Stand with Ukraine! Appendix TikZ 125 bytes (by @Joe85AC) \documentclass[tikz]{standalone}\begin{document}\tikz{\def~#1;{\color[HTML]{#1}\fill rectangle(3,}~0057b7;);~ffd700;-1)}\stop  TikZ 187 bytes \documentclass[tikz]{standalone}$$\begin{document}\tikz{\definecolor{b}{RGB}{0,87,183}\definecolor{r}{RGB}{255,215,0}\fill[b](0,0)rectangle(3,1);\fill[r](0,0)rectangle(3,-1);}\end{document}$$  TikZ 297 bytes \documentclass[tikz,border=5mm]{standalone} $$\begin{document} \begin{tikzpicture} \definecolor{Ukraine blue}{RGB}{0,87,183} \definecolor{Ukraine yellow}{RGB}{255,215,0} \fill[Ukraine blue] (0,0) rectangle (3,1); \fill[Ukraine yellow] (0,0) rectangle (3,-1); \end{tikzpicture} \end{document}$$  • Presumably you could shave bytes by renaming "Ukraine blue" just "b" etc? Mar 21, 2022 at 22:47 • The second picture (Nature) has zero code, thus it must be the winner. I REALY LIKE IT May 13, 2022 at 9:06 • TikZ: 158 bytes --> \documentclass[tikz]{standalone}\def~{document}\begin~\tikz{\definecolorset{HTML}{}{}{b,0057b7;g,ffd700}\def~{rectangle(4,}\fill(,)[b]~2);\fill(,)[g]~0)} \end~ Aug 6, 2022 at 19:02 • @BlackMild tikz uses 1 as default value in coordinates if you leave it blank... I just tried to optimize it a little further. I guess, there was still some room for improvement but i was tired yesterday evening (German time)... TikZ, 152 bytes: \documentclass[tikz]{standalone}\def~{document}\begin~\tikz{\definecolorset{HTML}{}{}{b,0057b7;g,ffd700}\def~#1{\fill(,)[#1]rectangle(4,}~b2);~g0)}\end~ Aug 7, 2022 at 9:32 • Optimized it a little further: 125 bytes --> \documentclass[tikz]{standalone}\begin{document}\tikz{\def~#1;{\color[HTML]{#1}\fill rectangle(3,}~0057b7;);~ffd700;-1)}\stop Aug 14, 2022 at 8:48 # Rust, 1071069286 85 bytes NOTE: you can't actually copy the escape characters from the code below for some reason. Be sure to click the try it online link if you want to test the code; don't copy it from the answer! The odd thing is, the escape characters could be copied in the edit preview, but not in the actual answer. I've asked a question on Meta about it. fn main(){print!("[38;2;0;87;183m{}[38;5;220m{0}",("X".repeat(78)+" ").repeat(13))}  If you want one more byte, you can use █ instead of X. Try it online! To 106 bytes: Removed the first r, and added a 0 in the second pair of braces {}. To 92 bytes: Thanks to Toothbrush's help, I was able to reduce the code even more by removing the let statement, rearranging the formatting, and changing the gold color to 220. To 86 bytes: Credit to Aiden4, I reduced the code to 86 bytes by using literal escape characters. I know you can't see them in the code, but you can see them online (86-byte version). To 85 bytes: Removed the \n and just used an actual newline in the code. • Welcome to Code Golf, and nice answer! You can also use tio.run/#rust to check the byte count of an answer. Mar 20, 2022 at 16:40 • You don't need the let statement: fn main(){print!("\x1b[38;2;0;87;183m{}\x1b[38;2;255;215;0m{0}",("X".repeat(78)+"\n").repeat(13))} is 98 bytes. Also, you can save 1 byte by deduplicating part of the format string: fn main(){print!("{}0;87;183m{1}{0}255;215;0m{1}","\x1b[38;2;",("X".repeat(78)+"\n").repeat(13))} is 97 bytes Mar 21, 2022 at 15:32 • Also, if you use standard blue and yellow as allowed in the rules, you can use fn main(){print!("\x1b[34m{}\x1b[33m{0}",("X".repeat(78)+"\n").repeat(13))} (75 bytes). Mar 21, 2022 at 15:51 • If not, you can use fn main(){print!("\x1b[38;2;0;87;183m{}\x1b[38;5;220m{0}",("X".repeat(78)+"\n").repeat(13))} (92 bytes) since colour 220 is exactly #ffd700. Mar 21, 2022 at 15:55 • You can use a literal escape character instead of using an ASCII escape for the escape character to get down to 86 bytes. Try it online! Mar 21, 2022 at 18:37 # HTML4, 9895 85 bytes <table width=78 height=52 cellspacing=0><tr><td bgcolor=#0057B7><tr><td bgcolor=gold> Edit: Saved 3 bytes by using @pxeger's observation that gold is #FFD700. Saved 10 bytes thanks to @IsmaelMiguel. Note that the sizes here work in Firefox but other browsers may have other default table styles which alter the resulting size. • HTML is not a programming language /s Mar 19, 2022 at 14:17 • Why use a table? Simple CSS will save at least 50 bytes... – code Mar 21, 2022 at 4:03 • @code Because this isn't an HTML+CSS answer... – Neil Mar 21, 2022 at 8:27 • <table width=80 height=56 cellspacing=0><tr><td bgcolor=#0057B7><tr><td bgcolor=gold> <-- Save 10 bytes. It works on Google Chrome 99.0.4844.74 on Windows 10. This makes an 80x56px table with spacing around, with each row taking 78x26px each. Mar 22, 2022 at 0:33 • @IsmaelMiguel Huh, Firefox developer tools tells me that I need width=78 height=52 so I'll stick with those values but thanks for the 10 byte saving! – Neil Mar 22, 2022 at 8:51 # Python 3 + pygame, 124 117 bytes There's already two other python solutions to this problem, but I might as well add a third. from pygame import* d,r=display,draw.rect s=d.set_mode() r(s,"#0557b7",(0,0,78,26)) r(s,"gold",(0,26,78,26)) d.flip()  There might be something I could golf by being smarter with sizes, but this seems pretty close to optimal. By pure luck, "gold" happens to be exactly equal to #ffd700 in pygame's color library, scraping off 3 bytes. Edit -7 bytes: Hold on a sec apparently you don't actually need to do pygame.init()??? I strongly suspect this is undefined behavior, but it works even running from the command line, so who am I to argue. Output: • For removing pygame.init(), I remember reading somewhere that it just imports all pygame modules, so that you don't need to manually import any of them yourself. It is highly recommended, but not required. Mar 20, 2022 at 3:50 • @AidenChow ah that makes sense, luckily this is PPCG, where all recommendations of good coding fall in the face of shorter code :P Mar 20, 2022 at 3:53 # Java, 169 bytes import java.awt.*;v->new Frame(){public void paint(Graphics g){for(int i=0;i<2;g.fillRect(0,i*30-i/2*4,78,26))g.setColor(new Color(i*255,i*128+87,++i%2*183));}{show();}}  Output: Explanation: import java.awt.*; // Required import for Frame/Graphics/Color v-> // Method with empty unused parameter and Frame return new Frame(){ // Create a Frame (window for graphical output) public void paint(Graphics g){ // Overwrite its default paint method: for(int i=0;i<2 // Loop i in the range [0,2): ; // After every iteration: g.fillRect( // Draw the rectangle 0,i*30-i/2*4,// at x,y position 0,30i-i//2*4 (i=1→30; i=2→56), // where the +30 is to account for the title-bar 78,26)) // of 78 pixels wide and 26 pixels high // (so the flag is the minimum required 78x52) g.setColor(new Color(i*255,i*128+87,++i%2*183));} // Change the RGB-color based on i: // i=0 (blue): 0, 87,183 // i=1 (yellow): 255,215, 0 // (and increase i by 1 with ++i) { // And in an inner initializer block: show();}} // Show the frame  • Impressive! java golfing always gets a +1 from me Mar 21, 2022 at 13:42 # Perl (51 characters) The following piece of code writes the file as a PNM picture say"P6 78 52 255 ","\0W\xb7"x2028,"\xff\xd7\0"x2028  • This is almost exactly what I just came up with too! You can save a few bytes using the raw chars directly though: dom111.github.io/code-sandbox/… Apr 13, 2022 at 18:59 # Racket, 94 bytes (require 2htdp/image)(define(f c)(rectangle 78 26"solid"c))(above(f(color 0 87 183))(f"gold"))  ## JavaScript (browser console), 94 bytes j='height:4em;width:12em;display:block;background:',console.log('%c %c ',j+#0057B7,j+gold)  ## 96 bytes console.log('%c %c ',${j='height:4em;width:12em;display:block;background:'}#0057B7,${j}gold)  This is shorter (85 bytes), but in a bit of a grey area? If you size the console perfectly, the output will be the correct dimensions: console.log('%c %c ',${j='display:block;height:6em;background:'}#0057B7,${j}gold)  ## 97 characters console.log('%c %c ',${j='height:26px;width:78px;display:block;background:'}#0057B7,${j}gold)  I think this works in most browsers these days? (Incidentally, I note that the image in the question is not actually the colours described.) # C (GCC), 78 bytes main(i){puts("P6\n78 52\n255");for(;i<4057;)printf(i++<2029?"%cW\xb7":"\xff\xd7%c",0);} Attempt This Online! (code in Base64) Outputs a PPM image to STDOUT. • Good answer! For those wondering how to save the image, they can run the compiled binary and redirect the output to a file. For example: /home/user/compiledflag > /home/user.flag.ppm. Mar 22, 2022 at 15:45 • And for those wondering how to view the image, PPM is a format supported by most *NIX image tools, such as GIMP or the default GNOME Image Viewer (and many other, these are the ones installed on my system). :) Mar 22, 2022 at 16:13 • -7 bytes Mar 27, 2022 at 17:46 # JavaScript/HTML 117112102100 98 bytes c=c.getContext2d f=k=>c.fillRect(0,(c.fillStyle=k)>c?33:0,99,33) fgold,f#0057b7 <canvas id=c> With continued help from @Samathingamajig and @pxeger's answer 1. <canvas id=c> is invalid HTML when missing an end tag but at least Chromium-Edge and Firefox create the element anyway. 2. c=c.getContext2d  is using template literal syntax, Slava Ukraini! • You can remove 2 bytes with <canvas id=c> Mar 21, 2022 at 15:16 • Another 2 bytes removed with c=c.getContext2d Mar 21, 2022 at 15:31 • Yet another 2 bytes removed with c.fillRect(0,y,78,26) Mar 21, 2022 at 15:37 • Again another 2 bytes removed with f=k=>c.fillRect(0,(c.fillStyle=k)>'$'?33:0,99,33) Mar 22, 2022 at 2:09
• Hoping to get it to be below 100 chars, but all my changes are either staying the same or increasing. Mar 22, 2022 at 2:40

## Batch, 93 bytes

@for %%i in (44 103)do @for /l %%j in (1,1,12)do @set/p=␛[%%im%PATH:~,80%<nul
@set/p=␛[m<nul


Assumes a default 80×25 screen with a PATH variable of at least 80 characters (this is true on a default Windows 10 installation). The last line is to stop the prompt appearing in yellow which wouldn't be a line of at least 78 non-whitespace characters and would therefore be illegal.

Note that ␛ is used to represent the nonprintable $$$$ (good luck copying and pasting that).

# HTML, 73 bytes

<p style=aspect-ratio:3/2;background:linear-gradient(#0057B7+50%,gold+50%

Thanks to @pxeger for pointing out that you can remove the quotes and not close the tag.

• -3 bytes with the usual HTML abuse: <p style=aspect-ratio:3/2;background:linear-gradient(#0057B7+50%,gold+50% Mar 22, 2022 at 16:57