There have been many other flag challenges posted but not one for the national flag of France. This week seems like an appropriate time.

Produce this flag in the fewest bytes possible:

French flag

  • The image must be in a ratio of 3:2, with size at least 78 pixels wide and 52 pixels tall.
  • Each stripe takes up one third of the width.
  • The stripe colors from left to right are RGB: (0, 85, 164), (255, 255, 255), (239, 65, 53).
  • The image can be saved to a file or piped raw to STDOUT in any common image file format, or it can be displayed.
  • 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, white, and red.)
  • Built-in flag images/libraries are not allowed.

The shortest code in bytes wins.

Leaderboard

The Stack Snippet at the bottom of this post generates the leaderboard from the answers a) as a list of shortest solution per language and b) as an overall leaderboard.

To make sure that your answer shows up, please start your answer with a headline, using the following Markdown template:

## Language Name, N bytes

where N is the size of your submission. If you improve your score, you can keep old scores in the headline, by striking them through. For instance:

## Ruby, <s>104</s> <s>101</s> 96 bytes

If there you want to include multiple numbers in your header (e.g. because your score is the sum of two files or you want to list interpreter flag penalties separately), make sure that the actual score is the last number in the header:

## Perl, 43 + 2 (-p flag) = 45 bytes

You can also make the language name a link which will then show up in the snippet:

## [><>](http://esolangs.org/wiki/Fish), 121 bytes

<style>body { text-align: left !important} #answer-list { padding: 10px; width: 290px; float: left; } #language-list { padding: 10px; width: 290px; float: left; } table thead { font-weight: bold; } table td { padding: 5px; }</style><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="//cdn.sstatic.net/codegolf/all.css?v=83c949450c8b"> <div id="language-list"> <h2>Shortest Solution by Language</h2> <table class="language-list"> <thead> <tr><td>Language</td><td>User</td><td>Score</td></tr> </thead> <tbody id="languages"> </tbody> </table> </div> <div id="answer-list"> <h2>Leaderboard</h2> <table class="answer-list"> <thead> <tr><td></td><td>Author</td><td>Language</td><td>Size</td></tr> </thead> <tbody id="answers"> </tbody> </table> </div> <table style="display: none"> <tbody id="answer-template"> <tr><td>{{PLACE}}</td><td>{{NAME}}</td><td>{{LANGUAGE}}</td><td>{{SIZE}}</td><td><a href="{{LINK}}">Link</a></td></tr> </tbody> </table> <table style="display: none"> <tbody id="language-template"> <tr><td>{{LANGUAGE}}</td><td>{{NAME}}</td><td>{{SIZE}}</td><td><a href="{{LINK}}">Link</a></td></tr> </tbody> </table><script>var QUESTION_ID = 64140; var ANSWER_FILTER = "!t)IWYnsLAZle2tQ3KqrVveCRJfxcRLe"; var COMMENT_FILTER = "!)Q2B_A2kjfAiU78X(md6BoYk"; var OVERRIDE_USER = 42156; var answers = [], answers_hash, answer_ids, answer_page = 1, more_answers = true, comment_page; function answersUrl(index) { return "https://api.stackexchange.com/2.2/questions/" + QUESTION_ID + "/answers?page=" + index + "&pagesize=100&order=desc&sort=creation&site=codegolf&filter=" + ANSWER_FILTER; } function commentUrl(index, answers) { return "https://api.stackexchange.com/2.2/answers/" + answers.join(';') + "/comments?page=" + index + "&pagesize=100&order=desc&sort=creation&site=codegolf&filter=" + COMMENT_FILTER; } function getAnswers() { jQuery.ajax({ url: answersUrl(answer_page++), method: "get", dataType: "jsonp", crossDomain: true, success: function (data) { answers.push.apply(answers, data.items); answers_hash = []; answer_ids = []; data.items.forEach(function(a) { a.comments = []; var id = +a.share_link.match(/\d+/); answer_ids.push(id); answers_hash[id] = a; }); if (!data.has_more) more_answers = false; comment_page = 1; getComments(); } }); } function getComments() { jQuery.ajax({ url: commentUrl(comment_page++, answer_ids), method: "get", dataType: "jsonp", crossDomain: true, success: function (data) { data.items.forEach(function(c) { if (c.owner.user_id === OVERRIDE_USER) answers_hash[c.post_id].comments.push(c); }); if (data.has_more) getComments(); else if (more_answers) getAnswers(); else process(); } }); } getAnswers(); var SCORE_REG = /<h\d>\s*([^\n,<]*(?:<(?:[^\n>]*>[^\n<]*<\/[^\n>]*>)[^\n,<]*)*),.*?(\d+)(?=[^\n\d<>]*(?:<(?:s>[^\n<>]*<\/s>|[^\n<>]+>)[^\n\d<>]*)*<\/h\d>)/; var OVERRIDE_REG = /^Override\s*header:\s*/i; function getAuthorName(a) { return a.owner.display_name; } function process() { var valid = []; answers.forEach(function(a) { var body = a.body; a.comments.forEach(function(c) { if(OVERRIDE_REG.test(c.body)) body = '<h1>' + c.body.replace(OVERRIDE_REG, '') + '</h1>'; }); var match = body.match(SCORE_REG); if (match) valid.push({ user: getAuthorName(a), size: +match[2], language: match[1], link: a.share_link, }); else console.log(body); }); valid.sort(function (a, b) { var aB = a.size, bB = b.size; return aB - bB }); var languages = {}; var place = 1; var lastSize = null; var lastPlace = 1; valid.forEach(function (a) { if (a.size != lastSize) lastPlace = place; lastSize = a.size; ++place; var answer = jQuery("#answer-template").html(); answer = answer.replace("{{PLACE}}", lastPlace + ".") .replace("{{NAME}}", a.user) .replace("{{LANGUAGE}}", a.language) .replace("{{SIZE}}", a.size) .replace("{{LINK}}", a.link); answer = jQuery(answer); jQuery("#answers").append(answer); var lang = a.language; lang = jQuery('<a>'+lang+'</a>').text(); languages[lang] = languages[lang] || {lang: a.language, lang_raw: lang.toLowerCase(), user: a.user, size: a.size, link: a.link}; }); var langs = []; for (var lang in languages) if (languages.hasOwnProperty(lang)) langs.push(languages[lang]); langs.sort(function (a, b) { if (a.lang_raw > b.lang_raw) return 1; if (a.lang_raw < b.lang_raw) return -1; return 0; }); for (var i = 0; i < langs.length; ++i) { var language = jQuery("#language-template").html(); var lang = langs[i]; language = language.replace("{{LANGUAGE}}", lang.lang) .replace("{{NAME}}", lang.user) .replace("{{SIZE}}", lang.size) .replace("{{LINK}}", lang.link); language = jQuery(language); jQuery("#languages").append(language); } }</script>

  • 4
    Those RGB values don't match your image. From what I see, you've got RGB: (0, 35, 149), (255, 255, 255), (237, 41, 57). – beaker Nov 18 '15 at 0:18
  • 8
    Storing the specified palette compactly is probably the trickiest part of this problem in most languages. Given that, it seems rather unfair to graphical solutions to permit ANSI output with a standard palette. Why not permit graphical solutions to use pure (0, 0, 255)/(255, 255, 255)/(255, 0 0) to level the playing field? – JohnE Nov 18 '15 at 0:19
  • 14
    Each stripe takes up one third of the width. Might be more interesting to use the Naval variant: by a regulation dated 17 May 1853, the navy went back to using the 30:33:37 proportions, which it now continues to use, as the flapping of the flag makes portions farther from the halyard seem smaller. – Ben Jackson Nov 18 '15 at 0:19
  • 33
    echo 🇫🇷 not quite big enough – Digital Trauma Nov 18 '15 at 4:08
  • 5
    @JohnE I agree. The rules on colors give the ASCII-art solutions a massive advantage. They also don't make the challenge any more "difficult" (merely adds bytes really) for the languages that can use arbitrary colors and disqualifies several cool languages that can't do arbitrary colors. – quartata Nov 18 '15 at 22:26

84 Answers 84

up vote 38 down vote accepted

CJam, 23 22 bytes

00000000: 27 9b 22 5c 22 25 1f 22 66 7b 69 27 6d 32 37 2a  '."\"%."f{i'm27*
00000010: 7d 4e 5d 32 36 2a                                }N]26*

The above is a hexdump that can be reversed with xxd -r.

At the cost of two extra bytes – for a total of 24 bytes – we can use background colors instead, making the output a bit prettier.

00000000: 27 9b 22 2c 2f 29 00 22 66 7b 69 27 6d 53 32 36  '.",/)."f{i'mS26
00000010: 2a 7d 57 4e 74 32 36 2a                          *}WNt26*

How it works

In both programs, we use the ANSI escape sequence \x9bXYm – where X is 3 for foreground color and 4 for background color, and Y specifies the color to use – to switch between the three colors of the flag.

'<CSI>       Push the '\x9b' character (Control Sequence Introducer).
"\"%<US>"    Push the string of the ISO 8859-1 characters with code
             points 34, 37, and 31.
f{           For each character in the string, push the CSI and that
             character; then:
  i            Cast the character to integer.
  'm27*        Push 27 m's. The first completes the control sequence,
               the remaining 26 will be printed.
}
N]           Wrap the generated array and "\n" in an array.
26*          Repeat it 26 times.

The other program is similar.

Output

output

  • I'm currently unsure how tall I should make the "image". – Dennis Nov 18 '15 at 0:14
  • I went with 78x30 in my answer. Those dimensions in Lucida Console 9 pt (the default font for xterm) gave the closest to 3:2. – Mego Nov 18 '15 at 1:21
  • You could use a full block for 'prettyness' – lol Mar 18 '17 at 5:36

Pure Bash (on OSX), 84

The default OSX terminal supports full colour emojis. Not sure if this counts as text or graphical output.

printf -vs %26s
for i in {1..26}
do echo ${s// /🔵}${s// /⚪️}${s// /🔴}
done

Output looks like:

enter image description here


Alternatively:

Bash with OSX utilities, 56

yes `dc -e3do26^d1-dn2/*p|tr 201 🔵🔴⚪️`|sed 26q

The dc expression:

  • calculates 3^26-1 and prints it in ternary 22222222222222222222222222
  • divides this by 2, then multiplies by 3^26. Output in ternary this is 1111111111111111111111111100000000000000000000000000

tr then translates the 210 characters to 🔵⚪️🔴. yes outputs this line indefinitely. sed 26q halts output at 26 lines.

  • 51
    A terminal that supports emojis. Wow. – rr- Nov 18 '15 at 19:09
  • 6
    The first solution doesn't use the right RGB values nor does it use the standard ANSI colors, does it? – Doorknob Nov 18 '15 at 22:10
  • @Doorknob You're right of course - neither solutions do - so this answer may be overstepping the line. I've asked the OP for clarification – Digital Trauma Nov 18 '15 at 22:41
  • 3
    It's just Unicode. – undergroundmonorail Nov 19 '15 at 10:58
  • 1
    @steve I wasn't really expecting this answer to become so popular, especially given that there are questions regarding its validity. Can you give a yay or nay as to whether you think it is valid? Thanks! – Digital Trauma Nov 20 '15 at 21:15

Python 2, 47 bytes

s="[3%smF";print(s%4*26+s%7*26+s%1*26+"\n")*30

Contains unprintables - here's a hexdump (reversible with xxd -r):

00000000: 733d 221b 5b33 2573 3b31 6d46 223b 7072  s=".[3%s;1mF";pr
00000010: 696e 7428 7325 342a 3236 2b73 2537 2a32  int(s%4*26+s%7*2
00000020: 362b 7325 312a 3236 2b22 5c6e 2229 2a33  6+s%1*26+"\n")*3
00000030: 30                                       0

Uses ANSI escape codes to print colored characters to STDOUT - I chose "F" for France. No online link because ideone doesn't support ANSI escape codes in output.

Thanks to Dennis and xnor for some great tips.

Screenshot from xterm:

flag

  • 1
    You've got an extra space there. in [0] --> in[0] – mbomb007 Nov 17 '15 at 22:34
  • 2
    1. You can use actual ESC bytes instead of \x1b. 2. Bolding doesn't seem to be necessary. 3. I'm not sure if that applies to ANSI art as well, but the question seems to mandate a 3 : 2 ratio. – Dennis Nov 17 '15 at 23:00
  • It's shorter to sub in the parameters with formatting: print("\x1b[3%s;1mF"*78+"\n")%((4,)*26+(7,)*26+(1,)*26)*30. – xnor Nov 17 '15 at 23:03
  • 15
    Press F to pay respects – Riking Nov 18 '15 at 8:14
  • 3
    The character looks slightly nicer, e.g. print("\x1b[3%s;1m█"*78+"\n")%((4,)*26+(7,)*26+(1,)*26)*30 – ali_m Nov 21 '15 at 20:03

Desmos, 30 12 bytes

3x>10
3x<-10

Try it online.

I'm not entirely sure if this is valid, please let me know if there are any issues.

  • 3
    @CᴏɴᴏʀO'Bʀɪᴇɴ Default colors are red and blue in that order (I believe) so there is no need to set them. – quartata Nov 18 '15 at 3:18
  • 7
    @CᴏɴᴏʀO'Bʀɪᴇɴ Then it's a random flag generator ;) – DanTheMan Nov 18 '15 at 3:29
  • 3
    @CᴏɴᴏʀO'Bʀɪᴇɴ They're not random for me - inputting two inequalities manually is consistently getting me red, then blue. – Mego Nov 18 '15 at 3:34
  • 1
    This is strange. I'm getting red and blue as well. – lirtosiast Nov 18 '15 at 4:44
  • 2
    I don't think it is... nor does it fit the aspect ratio precisely. – Doorknob Nov 18 '15 at 22:11

HTML / SVG, 76 bytes 87 88 121 122 149

Saved 27 bytes thanks to @insertusernamehere

Saves 9 bytes thanks to @Joey

Saved 1 bytes thanks to @sanchies

Saves 1 bytes thanks to @Neil

<svg><path fill=#0055a4 d=m0,0h26v52H0 /><path fill=#ef4135 d=M52,0h26v52H52

Using lots of HTML syntax abuse, this can get pretty short.


Screenshot of output:

France Flag Output


Or try it (make sure your browser supports SVG):

<svg><path fill=#0055a4 d=m0,0h26v52H0 /><path fill=#ef4135 d=M52,0h26v52H52

  • 3
    I tried to beat you with CSS and now I have golfed your SVG that it is even smaller than my CSS solution. :D This is the shortest I could get to work in Safari, Chrome and Firefox, it's 122 bytes long: <svg><rect width=78 height=52 fill="#ef4135"/><rect width=52 height=52 fill="#fff"/><rect width=26 height=52 fill=#0055a4> – insertusernamehere Nov 18 '15 at 0:45
  • 1
    @insertusernamehere Thanks, That saved 27 bytes! I've managed to further golf this down to an astonishing 88 bytes – Downgoat Nov 18 '15 at 1:12
  • 3
    For me, fill=#0055a4 /> works too (no "), saving a whole byte. – Sanchises Nov 18 '15 at 10:30
  • 3
    @sanchises a whole byte? o_O wow :D – developerbmw Nov 21 '15 at 5:47
  • 4
    @developerbmw Actually, it would be more impressive to save half a byte when you think about it. – Sanchises Nov 21 '15 at 8:48

Brainfuck$, 153 bytes

+++++++++++++[->>>++>+++++++>++++>>>>++++++++>+++<<<<<<<<<<]>>>+>>#->$#>$#+++++++>$--->+++++[<]<<+++++[->+++++>++++++<<]>+#>($#([-]>[.>]<[<])>>>>+++<<<<)

Outputs the image with ANSI color codes. I chose a height of 30 like Mego.

The reference implementation from 2009 linked on the esolangs page has gone missing. You can run it using this interpreter made by me, which supports everything from the esolangs page.

window.addEventListener("load",function(){document.querySelector("#r").addEventListener("click",function(){var  c=document.querySelector("#c").value,u=document.querySelector("#i").value,d=Array(30000).fill(0),p=0,i=0,q=0,s=[],o=document.querySelector("#o");o.value="";eval(c.replace(/[^]/g,function(e,i){return{"+":"d[p]=(-~d[p]+256)%256;","-":"d[p]=(~-d[p]+256)%256;",">":"p++;","<":"p--;",",":"d[p]=q-u.length?u[q++].charCodeAt()%256:0;",".":"o.value+=String.fromCharCode(d[p]);","[":"while(d[p]){","]":"}","#":"s.push(d[p]);","$":"d[p]=s.pop();",";":"d[p]=(parseInt(prompt())%256+256)%256;",":":"o.value+=d[p].toString();","(":"for(var i"+i+"=d[p];i"+i+">0;i"+i+"--){",")":"}","@":"o.value+=('D '+d.slice(0,20)+'\\nS '+s+'\\nIP '+i+' DP '+p);"}[e]||"";}));});});
<label for=c>Code:</label><br/><textarea style="width:100%;height:15em;white-space:pre" id=c>+++++++++++++[-&gt;&gt;&gt;++&gt;+++++++&gt;++++&gt;&gt;&gt;&gt;++++++++&gt;+++&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;]&gt;&gt;&gt;+&gt;&gt;#-&gt;$#&gt;$#+++++++&gt;$---&gt;+++++[&lt;]&lt;&lt; init sequence to cells 3 to 10&#10;+++++[-&gt;+++++&gt;++++++&lt;&lt;] set cells 1~2 to 25 &amp; 30&#10;&gt;+ set cell 1 to 26&#10;# push 26 to stack&#10;&gt; go to cell 2&#10;( do 30 times&#10;    $# get 26 to this cell from stack&#10;    ( do 26 times&#10;        [-]&gt;[.&gt;]&lt;[&lt;] print sequence&#10;    )&#10;    &gt;&gt;&gt;&gt;+++&lt;&lt;&lt;&lt; change color to white&#10;    $# get 26 to this cell from stack&#10;    ( do 26 times&#10;        [-]&gt;[.&gt;]&lt;[&lt;] print sequence&#10;    )&#10;    &gt;&gt;&gt;&gt;------&lt;&lt;&lt;&lt; change color to red&#10;    $# get 26 to this cell from stack&#10;    ( do 26 times&#10;        [-]&gt;[.&gt;]&lt;[&lt;] print sequence&#10;    )&#10;    &gt;&gt;&gt;&gt;+++&lt;&lt;&lt;&lt; change color to blue&#10;    ++++++++++. print newline&#10;)</textarea><br/><button id=r>Run</button><br/><label for=i>Input:</label><br/><textarea id=i style="width:100%"></textarea><br/><label for=o>Output:</label><br/><textarea readonly id=o style="width:100%;height:15em;white-space:pre"></textarea>

Brainfuck, 258 bytes

This is basically the same thing, but just in plain old Brainfuck.

>>+++++++++++++[-<<++>>>>++>+++++++>++++>++++>+++++>++++>++++++++>+++[<]<]>>+>>->>------>--->+++++[<]<<<++++[>+++++[->+++++<]>+[>>[.>]<[<]<-]>>>>>+++[<]+++++[-<+++++>]<+[>>[.>]<[<]<-]>>>>>------[<]+++++[-<+++++>]<+[>>[.>]<[<]<-]>>>>>+++[<]<++++++++++.[-]<<-]

Or, if you prefer this one in oOo CODE (984 bytes):

one day ThERe WIlL Be PEaCE iN ThIS wORlD
OnE DaY ThERe WiLl Be peaCe iN ThIS wOrld
one day theRe WIlL be pEaCE iN ThIS wORlD
OnE DaY theRe WIlL Be PEaCe in ThIS wORlD
OnE day ThERe WIlL Be PEaCe in ThIS wORlD
OnE day ThERe WIlL Be PEaCE iN ThIS wOrld
OnE DaY ThErE wilL bE PeaCe IN this woRlD
one day There will Be pEacE in ThiS woRld
one Day TheRe will Be PEaCE iN ThIS wOrLd
onE dAY thEre WilL Be PEaCE iN ThIs World
OnE DaY ThERe WIlL bE pEace in ThIS wORlD
OnE DaY thErE Will Be PeAce in this WoRLd
one dAY thErE wilL bE PeaCE in tHIs world
one day theRe WIlL Be PeAce iN tHIS wORlD
OnE DaY ThErE wIll be PEaCE iN ThIS wORlD
one dAY thERe WiLl be peace In THis worLD
onE dAy thErE WilL Be peACe in this world
one Day TheRe wIll Be pEace In thIs WORlD
OnE DaY ThERe WiLl Be peaCE iN ThIS wORlD
OnE day tHEre WIlL bE peace in tHiS World
oNE daY tHere WiLL be PEace IN this world
one day ThERe WIlL bE peaCe IN thIS wORlD
OnE DaY ThERe WIlL Be PEaCE iN THis WoRld
oNE daY thERe wiLL

Bash + ImageMagick, 60 77 73 bytes

convert -sample 78x52\! - a<<<"P3 3 1 255 0 85 164 255 255 255 239 65 53"

(ugh, +17 chars due to color requirements I didn't notice earlier...)

Outputs to the file a, in netpbm format:

llama@llama:~$ convert -sample 78x52\! - a<<<"P3 3 1 255 0 85 164 255 255 255 239 65 53"
llama@llama:~$ file a
a: Netpbm image data, size = 78 x 52, rawbits, pixmap

Can also output in PNG, if you change the filename to a.png (+4 chars).

Output:

enter image description here

  • 1
    convert -sample 78x52\! - a<<<"P3 3 1 255 0 85 164 255 255 255 239 65 53" – Digital Trauma Nov 17 '15 at 23:50
  • @DigitalTrauma Thanks! That saves 4 chars and doesn't exit with an error. (Also, I never knew ImageMagick could read from / write to STDIN.) – Doorknob Nov 17 '15 at 23:52
  • You can use -scale instead of -sample; also, the backslash doesn't seem to be necessary – aditsu Nov 25 '15 at 6:41

LaTeX, 139 bytes

Thanks to @WChargin for saving 21 bytes.

\documentclass{proc}\input color\begin{document}\def\z#1!{{\color[rgb]{#1}\rule{4cm}{8cm}}}\z0,.33,.64!\z1,‌​1,1!\z.94,.25,.21!\end{document}

This prints the following 12cm*8cm image on an A4 page:

enter image description here

Note that "Page 1" is also printed at the bottom of the page

  • 1
    Well this is about 100 bytes shorter than my asymptote solution... – Arcturus Nov 18 '15 at 13:09
  • 1
    s.\newcommand\z[1].\def\z#1 to save a bunch of bytes. Also, you can shave off a few by using \def\z#1!{…}\z0,.33,.64!\z1,1,1!\z.94,.25,.21!—that is, use your own delimiters instead of braces for grouping – wchargin Nov 20 '15 at 21:54
  • 1
    You can also \input color – wchargin Nov 20 '15 at 21:54
  • 1
    For completeness, revised version (139 bytes): \documentclass{proc}\input color\begin{document}\def\z#1!{{\color[rgb]{#1}\rule{4cm}{8cm}}}\z0,.33,.64!\z1,1,1!\z.94,.25,.21!\end{document} – wchargin Nov 20 '15 at 21:55

Pyth, 27 bytes

 .w*52[smmdGc3CM"\0U¤ÿÿÿïA5

There are some unprintable chars, so here's a hexdump:

00000000   2E 77 2A 35  32 5B 73 6D  6D 64 47 63  33 43 4D 22  .w*52[smmdGc3CM"
00000010   5C 30 55 A4  FF FF FF EF  41 35                     \0U.....A5

This creates a file o.png, which is exactly 78 pixels wide and 52 pixels tall:

enter image description here

Explanation:

.w*52[smmdGc3CM"........
               "........  a string containing the bytes 
                          0, 85, 164, 255, 255, 255, 239, 65, 53
             CM           convert them to integers
           c3             split into 3 lists
      smmdG               duplicate each list 26 times
     [                    put them into a list
  *52                     and duplicate it 52 times
.w                        save it as an image o.png
  • 1
    For a second, I thought I had grossly misunderstood the PNG specification. – primo Nov 18 '15 at 20:11
  • 1
    save it as an image o.png, but there's no ".png" anywhere? – rev Nov 22 '15 at 20:25
  • 1
    @AsidShout How do you call the program? If you use python3 pyth.py code.pyth, then you can find it in the same directory. – Jakube Nov 22 '15 at 20:44

HTML (quirks mode), 68 bytes

This uses quirks mode to render the flag.

The HTML is VERY invalid, but works on a stock Android 4.4.2 browser and on Firefox 42.0 (on Windows 7 x64).

<table width=78 height=52><td bgcolor=0055a4><td><td bgcolor=ef4135>

The flag is rendered with the right size and the standard red and blue colors. All webpages start with a standard white background.



As an alternative:

A perfectly valid HTML5 version (141 bytes):

<!DOCTYPE html><title>x</title><table style=width:78px;height:52px><tr><td style=background:#0055a4><td><td style=background:#ef4135></table>

Check it's validity on: https://html5.validator.nu/

Print-screen of the result:

validation result

  • 1
    Are you sure? When I have a HTML file with only this line, it doesn't work in Firefox, Chrome and Safari. If the file contains other HTML-elements after that line, it works for me. So maybe you can't discard the trailing >? – insertusernamehere Nov 18 '15 at 23:02
  • 1
    "Perfectly valid"? It should be style="..." if that's what you're going for in the second example. – mbomb007 Nov 18 '15 at 23:21
  • 3
    @mbomb007 What I am going for is to create the smallest valid HTML code. It validates with the official validator, so, it is perfectly valid HTML. You can try it yourself if you don't believe. – Ismael Miguel Nov 19 '15 at 1:25
  • 1
    @mbomb007 Also, missing quotes is the smallest issue: there's no <html>, no <head>, no <body>, no </tr>, no </td> and no closing of all missing tags. – Ismael Miguel Nov 19 '15 at 1:33
  • 1
    @insertusernamehere You were right. It was bugging on Android too. I tested it on jsfiddle. But when accessing data:text/html,<table width=78 height=52><td bgcolor=0055a4><td><td bgcolor=ef4135>, it wasn't working. Fixed it now, and use the link to test it. – Ismael Miguel Nov 19 '15 at 1:49

TI-Basic, 52 44 42 bytes

GridOff
AxesOff
11
Shade(-Ans,Ans,Xmin,Xmin/3
Shade(-Ans,Ans,Xmax/3,Xmax,1,1,Ans

(assumes a default [-10,10,1] by [-10,10,1] graph area)

Would be 4 bytes shorter without the first 2 lines, but by default would have axes and would not look as nice.

Looks like this:

enter image description here

If the shading is invalid for the challenge, let me know!

Without the first 2 lines, it looks like this:

enter image description here

  • I would also include the version without the first three lines just as a comparison. – GamrCorps Nov 18 '15 at 3:08
  • 1
    I think you can just go from Ymin to Ymax. You can also assume a default screen from -10 to 10. I'm also not sure about the validity of this, since the red and blue regions are only half shaded. – lirtosiast Nov 18 '15 at 3:21
  • @ThomasKwa I edited my post to show why I didn't use just Ymin and Ymax. I didn't realize I could assume a default screen, but you aren't clear about what that default screen is. Could you please clarify? About the "half-shaded" thing, that is just how TI-Basic shades things, if it is invalid, I will promptly change it. – DanTheMan Nov 18 '15 at 4:06
  • 1
    A default screen is Ymin=Xmin=-10, Ymax=Xmax=10. The calculator starts with those window settings, and AxesOn etc, so you can assume them. – lirtosiast Nov 18 '15 at 4:42
  • 1
    @Doorknob As far as I know, it's impossible to do that without resorting to witchcraft. – DanTheMan Nov 18 '15 at 22:34

ffmpeg, 110 113 116 117 119 108 100 bytes

Display, using ffplay, 100 bytes:

ffplay -f lavfi color=#0055a4:49x98[r];color=white:49x98[w];color=#ef4135:49x98[b];[r][w][b]hstack=3

Saved to file, using ffmpeg, 108 bytes:

ffmpeg -lavfi color=#0055a4:49x98[r];color=white:49x98[w];color=#ef4135:49x98[b];[r][w][b]hstack=3 -t 1 .png

The current version of the command will abort with an error BUT will output a single image ".png", same as shown below.

enter image description here

  • 8
    Wow. Abusing ffmpeg to make images... – Cole Johnson Nov 20 '15 at 6:15
  • Heh, I saw this question and thought of doing the same. Nice job making it compact. If it is allowed you can make it slightly smaller by using white instead of #ffffff: the values should be the same. – LordNeckbeard Nov 20 '15 at 19:11
  • I know. Wasn't bothered enough. Will do it now. – Gyan Nov 20 '15 at 19:22
  • Does #fff work? – ev3commander Nov 20 '15 at 20:24
  • No. But I can skip the f in f.png – Gyan Nov 20 '15 at 20:29

CSS, 127 128 144 bytes

body:before,body:after{content:'';float:left;width:33%;height:100%;background:#0055a4}body:after{float:right;background:#ef4135}

No need for another tag, works solely with the body-element.

Edits

  • Saved 16 bytes by removing display:block; and some ;.
  • Saved 1 byte, removed the trailing }.
  • 6
    Though technically CSS isn't a programming language by our definitions. – Conor O'Brien Nov 18 '15 at 0:04
  • 10
    @CᴏɴᴏʀO'Bʀɪᴇɴ I know – just wanted to beat SVG. – insertusernamehere Nov 18 '15 at 0:08
  • 4
    @CᴏɴᴏʀO'Bʀɪᴇɴ is right, this is not a valid answer. – Mego Nov 18 '15 at 2:45
  • 2
    @CᴏɴᴏʀO'Bʀɪᴇɴ it the css was saved as a SASS file, since SASS is a scripting language would it be a valid answer? – fcalderan Nov 20 '15 at 17:37
  • 6
    Yeah, regular CSS is a valid SASS file. – ev3commander Nov 20 '15 at 20:26

JavaScript, 140 143 147 151 153 bytes

   with(document)with(body.appendChild(createElement`canvas`).getContext`2d`)for(i=2;i--;fillRect(i*52,0,26,52))fillStyle=i?"#ef4135":"#0055a4"


Edits

  • Saved 2 bytes by replacing 2*i*26 with i*52. Thanks to Cᴏɴᴏʀ O'Bʀɪᴇɴ.
  • Saved 4 bytes by refactoring the for-loop. Thanks to ETHproductions.
  • Saved 2 bytes by using the with-statement. Thanks to Dendrobium.
  • Saved 2 bytes by turning increment into decrement. Thanks to Shaun H.
  • Saved 3 bytes by replacing fillStyle=["#0055a4","#ef4135"][i] with i?"#ef4135":"#0055a4".
  • 3
    2*i*26 can become 52*i, no? – Conor O'Brien Nov 18 '15 at 0:01
  • 7
    @CᴏɴᴏʀO'Bʀɪᴇɴ Of course it can. Thanks. It's way beyond my bed time. – insertusernamehere Nov 18 '15 at 0:06
  • 2
    You can shave off 2 bytes by using the with statement: with(document)with(body.appendChild(createElement`canvas`).getContext`2d`)for(i=0;i<2;fillRect(i++*52,0,26,52))fillStyle=["#0055a4","#ef4135"][i] – Dendrobium Nov 18 '15 at 17:14
  • 2
    save a byte: x=(d=document).body.appendChild(d.createElementcanvas).getContext2d;for(i=3;--i;x.fillRect(i*52,0,26,52))x.fillStyle=[,"#ef4135","#0055a4"][i] – Shaun H Nov 18 '15 at 22:37
  • 2
    @Dendrobium That's good. Thanks a lot. – insertusernamehere Nov 18 '15 at 22:49

R, 59 bytes

frame();rect(0:2/3,0,1:3/3,1,,,c("#0055a4",0,"#ef4135"),NA)

Output is displayed:

enter image description here

One can also do 49 bytes with

barplot(rep(1,3),,0,col=c("#0055a4",0,"#ef4135"))

if you do not mind the axes and borders:

enter image description here

  • 2
    The ratio seems wrong. I think you have a 2:3 to ratio on a single-colored rectangle instead of a 3:2ratio on the whole flag. – Fatalize Nov 18 '15 at 8:50
  • The ratio can be adjusted manually by resizing the plotting window. – flodel Nov 18 '15 at 11:19
  • 3
    To qualify, your entry should work 'out of the box'. Else, anyone can post a 6-pixel solution and say 'You can manually zoom in'. – Sanchises Nov 18 '15 at 17:07
  • 4
    You say 'axes', I say 'flag pole'. – user8777 Nov 19 '15 at 10:08
  • 2
    @sanchises: I'm French and I say f**k it. LIBERTE! – flodel Nov 19 '15 at 11:23

Blitz 2D/3D, 154 108 bytes

This produces exactly the same thing as the example given in the question (except for the anti-aliasing at the edges where colors meet).

Graphics 800,533
ClsColor 255,255,255
Cls
Color 0,35,149
Rect 0,0,267,533
Color 237,41,57
Rect 533,0,267,533

Output is displayed and it looks like this:

enter image description here

Mathematica, 63 94 103 bytes

When I first saw this challenge, I thought Sweet! Mathematica would be perfect for this! until I noticed that built-ins were banned :'(

But wait! I can use bar graphs!

r=RGBColor;BarChart[{1,1,1},ChartStyle->{r@"#0055a4",White,r@"#ef4135"},BarSpacing->0,AspectRatio->2/3]

(Thanks to Martin Büttner for shaving off 5 bytes but adding 16)

Looks like this:

enter image description here

If you add ,Axes->None it looks like this:

enter image description here

If you don't care about the border, you can use this: (95 bytes)

r=RGBColor;BarChart[{1,1},ChartStyle->{r@"#0055a4",r@"#ef4135"},BarSpacing->1,AspectRatio->2/3,Axes->None]

Looks like this:

enter image description here

Without axes:

enter image description here

  • 3
    Axes->None. You should also specifty AspectRatio->2/3. Renaming RGBColor is simple: r=RGBColor;...r["..."]. You can also use prefix-notation to save two more bytes r@"#0055a4". – Martin Ender Nov 18 '15 at 7:40
  • If you don't need the outline, try BarChart[{1, 1}, ChartStyle -> {RGBColor["#0055a4"], Red}, BarSpacing -> 1]. The Red looks close enough. – DavidC Nov 18 '15 at 13:05
  • @DavidCarraher Meh, since the question specifies a particular RGB value, that one should be used exactly. – Martin Ender Nov 18 '15 at 15:58
  • My main recommendation was to draw two rectangles, not three. You are technically correct about Red, however. – DavidC Nov 18 '15 at 16:13
  • Wouldn't the borders around the bars invalidate this solution? – LegionMammal978 Nov 18 '15 at 22:10

Javascript (ES6) 117 bytes

Draws it in the console

for(i=c=s=[];i<156;c[i++]=`color:${[,'blue','#fff'][i%3]||(s+=`
`,'red')}`)s+='%c'+'+'.repeat(26);console.log(s,...c)

  • 2
    For 'white' I think it's shorter to do: #fff. Also, the Red and Blue colors must match the colors specified in the spec – Downgoat Nov 18 '15 at 2:10
  • 1
    You can save a few bytes with i=c=s=[] instead of i=0,c=[],s='' after updating the colours that might help a little... – Dom Hastings Nov 18 '15 at 8:32
  • 1
    @Vɪʜᴀɴ When outputting in text, you can use the standard colors (red and blue). It's the 2nd point, counting from the bottom. This is within the spec. – Ismael Miguel Nov 18 '15 at 16:29
  • @DomHastings Nice tip, clever use of coercion. Thanks! – George Reith Nov 18 '15 at 16:58
  • 1
    @sysreq Its text in the console... I have no control over your console's lineheight. It's 78 characters wide 52 tall. – George Reith Nov 18 '15 at 18:46

pb, 68 bytes

cw[Y!52]{cccw[X!26]{b[77]>}ccccw[X!52]{b[77]>}cw[X!78]{b[77]>}<[X]v}

Wow, a challenge that pb is actually kinda good for! Those are few and far between.

When I was writing the spec for pb, I included coloured output mostly as a joke. The language was named after a "paintbrush", why would it not do colour? Other than example programs, this is the second time I've ever used it. It is implemented with ANSI codes as the question requires.

I used 'M' as the character to output with because it's fairly dense.

Output:

I resized that screenshot vertically to be two thirds of its height because letters aren't square. The output is 78 by 52, but the original screenshot looks really wrong.

With comments and indentation and junk:

c               # Increase output colour by 1
                # 0 (White) -> 1 (Red)
                # Loop ends with output colour == 1, this is cheaper than
                # setting it back to white every time.

w[Y!52]{        # While the brush's Y coordinate is not 52:
    ccc           # Increase output colour by 3
                    # 1 (Red) -> 4 (Blue)

    w[X!26]{      # While the brush's X coordinate is not 26:
        b[77]       # Write 'M' at the brush's coordinates
        >           # Increase X coordinate by 1
    }             

    cccc          # Increase output colour by 4
                    # 4 (Blue) -> 8 mod 8 = 0 (White)

    w[X!52]{      # While the brush's X coordinate is not 52:
        b[77]       # (same as before)
        >         
    }             

    c             # Increase output colour by 1
                    # 0 (White) -> 1 (Red)

    w[X!78]{      # While the brush's X coordinate is not 78:
        b[77]       # (same as before)
        >
    }

    <[X]          # Set X back to 0
    v             # Increase Y by 1
}
  • 78x30 will get you the dimensions you want for terminal output. – Mego Nov 18 '15 at 7:14
  • @Mego Yeah, but I'm not sure if it's allowed. – undergroundmonorail Nov 18 '15 at 7:15
  • The resulting output on xterm in the default font matches the specified dimensions. – Mego Nov 18 '15 at 7:17
  • I'd feel weird measuring the size of console output in anything but "characters", though. – undergroundmonorail Nov 18 '15 at 7:28
  • 1
    When your characters are 1.2x as tall as they are wide, they don't make for very good pixels. – Mego Nov 18 '15 at 9:40

C, 115 bytes

enter image description here

#define c"[48;2;%d;%d;%dm%9c"
d=255;main(a){while(a++<9)printf(c c c c,0,85,164,0,d,d,d,0,239,65,53,0,0,0,0,10);}

Contains unprintables:

00000000: 2364 6566 696e 6520 6322 1b5b 3438 3b32  #define c".[48;2
00000010: 3b25 643b 2564 3b25 646d 2539 6322 0a64  ;%d;%d;%dm%9c".d
00000020: 3d32 3535 3b6d 6169 6e28 6129 7b77 6869  =255;main(a){whi
00000030: 6c65 2861 2b2b 3c39 2970 7269 6e74 6628  le(a++<9)printf(
00000040: 6320 6320 6320 632c 302c 3835 2c31 3634  c c c c,0,85,164
00000050: 2c30 2c64 2c64 2c64 2c30 2c32 3339 2c36  ,0,d,d,d,0,239,6
00000060: 352c 3533 2c30 2c30 2c30 2c30 2c31 3029  5,53,0,0,0,0,10)
00000070: 3b7d 0a                                  ;}.

For this program to work, a couple of things need to be true:

  • The terminal supports the ESC [48;2;<r>;<g>;<b>m "truecolor" escape sequence.
  • The terminal is not xterm, becase xterm's implementation of the above will produce slightly wrong colors.
  • The terminal completely ignores NUL characters.

It also looks nicer if your terminal's background is black.

To change to height of the flag, pass command line arguments to the program. For every argument passed, the flag becomes one line shorter. It's not a bug, it's a feature!

Output:

enter image description here

  • Had trouble compiling this with gcc (version 5.1.1). Any specific flags needed to compile? "a.c:1:10: warning: ISO C99 requires whitespace after the macro name #define c"\x1b[48;2;%d;%d;%dm" – steve Nov 20 '15 at 14:03
  • 1
    @Steve is that a warning our an error? – Functino Nov 20 '15 at 16:55
  • 1
    @Steve Just tested it again, gcc 5.2.1. No flags. Produced 12 warnings but made a working binary. – Functino Nov 20 '15 at 17:07
  • apologies - works fine - got confused by the warnings (and the fact that the code looks pretty cryptic to a C newbie like me) – steve Nov 20 '15 at 19:32

MATLAB, 82 79 78 bytes

x=[0 1 1 0];y(3:4)=2;fill(x,y,[0 85 164]/255,x+1,y,'w',x+2,y,[239 65 53]/255)

Output looks like:

  • 1
    Which version of MATLAB? Doesn't work on r2013a as colours need to be decimal numbers in the range [0,1]. – Tom Carpenter Nov 18 '15 at 0:35
  • 1
    The following line works fill(x,y,[0 85 164]/255,x+1,y,'w',x+2,y,[239 65 53]/255) and saves you 2 bytes. :) I'd also use semi-colons instead of newlines to avoid extra stuff being printed out. – Tom Carpenter Nov 18 '15 at 0:39
  • 1
    @TomCarpenter I spaced on the 0-1 color scale, it's been a little while since I've had to specify colors. As for the semicolons/newlines, I was choosing readability over console writing, but I've changed my answer – costrom Nov 18 '15 at 1:22

Visual Basic+Excel, 618 137 bytes

Just curious to see how this can be golfed.

EDIT: Curiosity sated, thanks to @Neil and @JimmyJazzx, 618 bytes dropped right down to 137 bytes

Sub a(): Columns("A:C").ColumnWidth = 26: Range("A1:A13").Interior.Color = RGB(0, 85, 164): Range("C1:C13").Interior.Color = RGB(239, 65, 53): End Sub

Excel flag

  • 1
    Recording a macro results in terribly inefficient code. Try Range("A1:C13").Interior.ColorIndex = 5 and Range("G1:I13").Interior.ColorIndex = 3 which seems to suffice. – Neil Nov 22 '15 at 23:29
  • 2
    Sorry, that was Excel 2003, and I forgot to include the ActiveWorkbook.Colors to specify the exact RGB values. Excel 2007 has additional colour options but I don't know them offhand. – Neil Nov 22 '15 at 23:36
  • 1
    I get 137 bytes with a few Quick Changes. I think you can Cut this down more but this is the easy changes. Sub a():Columns("A:C").ColumnWidth=26:Range("A1:A13").Interior.Color=RGB(0,85,164):Range("C1:C13").Interior.Color=RGB(239,65,53):End Sub – JimmyJazzx Nov 23 '15 at 20:32
  • I get 135 with Sub a:Columns("A:C").ColumnWidth=26:Range("A1:A13").Interior.Color=RGB(0,85,164):Range("C1:C13").Interior.Color=RGB(239,65,53):End Sub – Joey Nov 26 '15 at 7:44

CSS, 102 110 111 114 bytes

*{background:linear-gradient(90deg,#0055a4 33%,#fff 33%,#fff 66%,#ef4135 66%) 0 0/78px 52px no-repeat

  • 1
    * *{background:linear-gradient(90deg,#0055a4,#0055a4 33%,#fff 33%,#fff 66%,#ef4135 66%) 0 0/78px 52px no-repeat} - one byte shorter – user2428118 Nov 18 '15 at 13:59
  • 1
    actually a single * is enough :) Thanks! – Thomas Eschemann Nov 18 '15 at 14:08
  • 1
    +1; You could save another byte by removing the trailing }. – insertusernamehere Nov 18 '15 at 22:57
  • 1
    You can delete the first color, you save 8 bytes. – Awashi Nov 25 '15 at 8:28
  • You can replace last 66% with 0. – Mr_Green Nov 10 '16 at 9:08

Dyalog APL (47 44)

⎕SM←↑1 21 41{(''⍴⍨2/20)1⍺,⍵,⍨4↑0}¨2*8 11 10

Result:

flag

  • 2
    can you do 2*8 11 10? – lirtosiast Nov 18 '15 at 2:26
  • 1
    @ThomasKwa: thanks – marinus Nov 18 '15 at 2:48

iKe, 43 bytes

,(0 0;"|"\"#0055A4|#FFF|#EF4135";52#,&3#26)

This is an example of a "raw tuple" iKe program- it's just a description of an origin (0 0), a palette (3 7#"#0055A4#FFFFFF#EF4135") and a bitmap (+52#'&3#26). You need to wrap a description like this in a function or use references to views if you want to animate it.

The palette is a very simple way of creating a series of CSS colors, hex equivalents of the spec.

  3 7#"#0055A4#FFFFFF#EF4135"
("#0055A4"
 "#FFFFFF"
 "#EF4135")

If the color requirements were less stringent we could use one of iKe's built-in palettes and save a considerable number of characters:

windows@7 0 4

flag

Try it in your browser.

Edit:

Saved one byte by using a short #FFF CSS color for the white stripe:

,(0 0;3 7#"#0055A4#FFFFFF#EF4135";+52#'&3#26)
,(0 0;"|"\"#0055A4|#FFF|#EF4135";+52#'&3#26)

If anyone else is interested in playing with iKe, there's a manual on the github repo. here's another problem I solved using iKe.

Edit 2:

Saved one byte with a simpler way to construct the bitmap:

+52#'&3#26
52#,&3#26

My question in the OP hasn't been answered, but for the record if more flexible color requirements are permitted, this program would be 30 bytes by using the Windows 3.1 palette:

,(0 0;windows@7 0 4;52#,&3#26)

flag2

Since this problem was posted, iKe has gained a feature which automatically centers textures drawn without a position, which could save another 3 bytes, but this would be against the rules:

,(;windows@7 0 4;52#,&3#26)

Octave, 77 76 bytes

s(98,49)=0;imshow(cat(3,[s w=s+255 w-18],[s+35 w s+41],[s+149 w s+57])/255);

Displays the image:

enter image description here

Processing, 100 Bytes

size(78,52);background(255);noStroke();fill(#0055A4);rect(0,0,26,52);fill(#EF4135);rect(52,0,26,52);

Displays this: France

(The naive solution is shorter than my first one.)

  • I think Processing's drawing commands can come out ahead of pixel pushing here: size(78,52);noStroke();int[]p={0xFF0055A4,255,0xFFEF4135};for(int c:p){translate(26,0);fill(c);rect(0,0,-26,52);} – JohnE Nov 18 '15 at 0:59
  • @JohnE Lol, yeah i just noticed that. – geokavel Nov 18 '15 at 0:59
  • @JohnE Even my super basic solution is shorter than yours! – geokavel Nov 18 '15 at 1:00
  • haha- looks like we both overcomplicated it – JohnE Nov 18 '15 at 1:01
  • how about abusing the scale instructions? This works on sketchpad.cc but might break in Processing 3: size(78,52);scale(26,52);fill(#EF4135);stroke(#0055A4);rect(0,-1,0,2);stroke(255);rect(1,-1,3,3); – JohnE Nov 18 '15 at 3:00

Ruby, 56 47 45 bytes

ASCII

$><<"\e[34z\e[37z\e[31z\n".gsub(?z,?m*27)*52
  • Yep, this is better than mine. Except the middle bar needs to be white. – iamnotmaynard Nov 18 '15 at 21:27
  • @iamnotmaynard True, fixed. Thanks! – Peter Lenkefi Nov 18 '15 at 21:35

PHP, 70 bytes

0000000: 424d 0000 0000 0000 0000 2300 0000 0c00  BM........#.....
0000010: 0000 2001 c000 0100 0800 a455 00ff ffff  .. ........U....
0000020: 3541 ef3c 3f66 6f72 283b 3665 343e 2469  5A.<?for(;6e4>$i
0000030: 3b29 6563 686f 2063 6872 2824 692b 2b2f  ;)echo chr($i++/
0000040: 3936 2533 293b                           96%3);

The above is a hexdump which may be reversed with xxd -r. Alternatively, it may also be generated with the following PHP script:

<?=hex2bin('424d0000000000000000230000000c0000002001c00001000800a45500ffffff3541ef3c3f666f72283b3665343e24693b296563686f206368722824692b2b2f39362533293b');

I assume default settings, as they are without an .ini (you may disable your local .ini with the -n option). Produces a .bmp image (288 x 192), which should be piped to a file. This is as large as I can make it without affecting the byte count.


Sample Usage

$ xxd -r in.hex > france.php
$ php -n france.php > out.bmp
$ out.bmp

Output

French Flag

  • These colors don't look right. Do they use the RGB values specified in the question? – Doorknob Nov 18 '15 at 22:17
  • @Doorknob They do. Starting at byte 26, a three value color palette is defined (bgr): A45500, FFFFFF, 3541EF. – primo Nov 19 '15 at 0:42

ShaderToy (GLSL), 147 bytes

void mainImage(out vec4 o,vec2 i){float x=i.x/iResolution.x*3.0;vec3 w=vec3(255,255,255);o=vec4((x<1.0?vec3(0,85,164):x<2.0?w:vec3(239,65,53))/w,1);}

See it here

Not particularly exciting. I'm sure there are ways to golf it more; I'll take a crack when I get home.

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.