# Generate an RGB colour grid

This! is an RGB colour grid...

Basically it's a 2-dimensional matrix in which:

• The first row, and the first column, are red.
• The second row, and the second column, are green.
• The third row, and the third column, are blue.

Here are the colours described graphically, using the letters R, G, and B.

Here's how we calculate the colour of each space on the grid is calculated.

• Red + Red = Red (#FF0000)
• Green + Green = Green (#00FF00)
• Blue + Blue = Blue (#0000FF)
• Red + Green = Yellow (#FFFF00)
• Red + Blue = Purple (#FF00FF)
• Green + Blue = Teal (#00FFFF)

# The Challenge

• Write code to generate an RGB colour grid.
• It's code golf, so attempt to do so in the smallest number of bytes.
• Use any programming language or markup language to generate your grid.
• The result should graphically display an RGB grid with the defined colours.
• Things I don't care about:
• If the output is an image, HTML, SVG or other markup.
• The size or shape of the colour blocks.
• Borders, spacing etc between or around the blocks.
• It definitely doesn't have to have labels telling you what the row and column colours should be.
• Can we output an mage object native to our language, for example a Bitmap object in C#? – Gymhgy Apr 16 '19 at 21:13
• @EmbodimentofIgnorance sounds fine to me. – AJFaraday Apr 16 '19 at 22:08
• I'm waiting for the solution in Piet – manassehkatz-Moving 2 Codidact Apr 17 '19 at 0:25
• @manassehkatz Is it just possible that hard-coding the data would be better golf than executing it? – AJFaraday Apr 17 '19 at 8:09
• Not that it really matters, but I'd personally have used cyan and magenta instead of teal and purple (or anything else). As far as I know, these are the official terms used in printing or subtractive color models such as CMYK. – Arnauld Apr 19 '19 at 7:26

printf "${f=^[[3%dm.}$f$f " 1 3 5 3 2 6 5 6 4  Here, blocks are . characters. ^[ is a literal ASCII escape character (0x1b). You can recreate this script as follows: base64 -d <<< cHJpbnRmICIke2Y9G1szJWRtLn0kZiRmCiIgMSAzIDUgMyAyIDYgNSA2IDQ= > rgbgrid.sh  • what the heck? please explain :) – flawr Apr 17 '19 at 7:28 • can save 2 bytes using shell expansion printf${f=\\e[3%dm.}$f$f\\n 1 3 5 3 2 6 5 6 4 – Nahuel Fouilleul Apr 17 '19 at 7:28
• printf \\e[3%dm. 1' expands to \\e[31m. which is the ANSI escape code for red and so on and . is the character to print. – Fredrik Pihl Apr 17 '19 at 11:10
• Continuing with @NahuelFouilleul's suggestion, double quote it: printf "${f=^[[3%dm.}$f$f␤" 1 3 5 3 2 6 5 6 4 (Where ^[ is a literal escape character=1 byte and ␤ a literal new line character=1 byte.) – manatwork Apr 17 '19 at 12:39 # x86-16 machine code, IBM PC DOS, 43 bytes 00000000: be22 01b9 0100 ac8a d83c 10b8 db09 cd10 .".......<...... 00000010: b403 cd10 7204 7809 b2ff 42b4 02cd 10eb ....r.x...B..... 00000020: e2c3 0c0e 1d0e 0a1b 0d0b 91 ...........  Listing: BE 0122 MOV SI, OFFSET CT ; load color bar table into [SI] LOOP_COLOR: B9 0001 MOV CX, 1 ; display 1 char and clear CH (changed by INT 10H:3) AC LODSB ; load next color byte 8A D8 MOV BL, AL ; move new color to BL 3C 10 CMP AL, 010H ; if this is third color in row: SF=0, CF=0 ; else if last color: SF=1, CF=0 ; else continue on same row: CF=1 B8 09DB MOV AX, 09DBH ; AH=9 (write char with attr), AL=0DBH (block char) CD 10 INT 10H ; call PC BIOS, display color block B4 03 MOV AH, 3 ; get cursor position function CD 10 INT 10H ; call PC BIOS, get cursor 72 04 JC NEXT_COL ; if not last in row, move to next column 78 09 JS EXIT ; if last color, exit B2 FF MOV DL, -1 ; otherwise move to first column and next row NEXT_COL: 42 INC DX ; move to next column (and/or row) B4 02 MOV AH, 2 ; set cursor position function CD 10 INT 10H ; call PC BIOS, set cursor position EB E2 JMP LOOP_COLOR ; loop to next color byte EXIT: C3 RET ; return to DOS CT DB 0CH, 0EH, 1DH ; color table DB 0EH, 0AH, 1BH DB 0DH, 0BH, 91H  This uses the IBM PC BIOS INT 10H video services to write the color grid to the screen. Unfortunately the only way to write a specific color attribute requires also writing code to place the cursor in the next correct location, so there's a lot of extra code for that. Here's the output running on an IBM PC CGA (in 40x25 text mode to make it bigger). ## TL;DR Here's a more verbose explanation, with more detail of what some of these machine code instructions do. ### Color table The colors are stored as bytes in the color table (CTBL) with the 4-bit color value in the low nibble and a flag value in the high nibble. A 1 in the high nibble signals the end of the row and a 9 signals the end of the list. This is checked using a single CMP instruction which subtracts 0x10 from the color values and sets the result flags. These operands are treated as 8-bit signed values, so the sign flag (positive or negative result) and carry flag (a subtractive borrow was required, meaning the color byte is less than 0x10) are the interesting ones here. These flags are then checked further down for the conditional logic of whether to advance the row, the column or end the program. Examples: High nibble 0 means not the last in the row and not the last in the list: • 0x0C - 0x10 = 0xFC -- Result is negative and a carry (borrow) was required High nibble 1 means it is the last color in the row and not the last in the list: • 0x1D - 0x10 = 0x0D -- Result is positive and no borrow High nibble 9 means it is the last color of the list: • 0x91 - 0x10 = 0x81 -- Result is negative and no borrow ### Cursor movement Using the PC BIOS or DOS API for output, the function that allows setting a character color does not automatically advance the cursor, so that has to be done by the program. The cursor position must be fetched each time since the registers are overwritten later by the other functions. The "get" function puts these into the 8-bit registers DL for the column, and DH for the row. These same registers are what is used by the "set" function to move the cursor to a new location. We can take advantage of the fact that, on x86 architecture DH and DL can be manipulated as a single 16-bit register (DX). To advance to the next column, we increment DX which effectively only increments DL (column position). To advance to the next column we would need to instead increment the row number and set the column to 0. We can do this in only one additional instruction by setting the low nibble (DL) to 0xFF and then continuing the normal program flow incrementing DX. Since we're now looking at DH/DL as a 16-bit value, DL becomes 0 and the carry from 0xFF + 1 is added to DH. Examples: Advance to next column: DH DL DX 1 1 0101 ; at row 1, column 1 1 2 0102 ; add one to DX  Advance to next row, first column: DH DL DX 1 2 0102 ; at row 1, column 2 1 FF 01FF ; +set DL to 0xFF 2 0 0200 ; add one to DX  • Will this work in dos, prib not but would be cool if it did. – marshal craft Apr 17 '19 at 5:24 • @marshalcraft Yes, in fact this will only work in DOS, or using a DOS emulator such as DOSBox, pcjs.org, etc. I've added a link to download the executable so you can give it a try. – 640KB Apr 17 '19 at 12:56 • Windows comes with limited dos emulator, probably now called command prompt, which I probably should have said, would be cool if it worked with cmd or PowerShell haha. – marshal craft Apr 17 '19 at 16:24 • @marshalcraft You are correct, however since it's for DOS it's a 16-bit executable, and if you have a 32-bit version of Windows it should actually run as it has a 16-bit runtime environment. However a 64-bit edition of Windows won't run it as it only has a 32-bit runtime. – 640KB Apr 17 '19 at 16:33 • God this is a cool answer – Samy Bencherif Apr 30 '19 at 8:55 # Wolfram Language (Mathematica), 41 bytes Image@Outer[Plus,#,#,1]&@IdentityMatrix@3  # Wolfram Language (Mathematica), 68 bytes Mathematica has built-ins for all these colors. Image@{{Red,Yellow,Magenta},{Yellow,Green,Cyan},{Magenta,Cyan,Blue}}  # 80386 machine code, IBM PC DOS, 38 bytes hex: B0 13 CD 10 68 00 A0 1F 66 C7 06 00 00 28 2C 24 00 66 C7 06 40 01 2C 30 34 00 66 C7 06 80 02 24 34 20 00 CD 16 C3  asm: mov al,13h int 10h ; initialize vga 13h mode (320x200x256 colors) push 0a000h pop ds ; push video buffer address to ds mov dword ptr ds:0, 242c28h ; print 3 pixels mov dword ptr ds:320, 34302ch ; print 3 pixels mov dword ptr ds:640, 203424h ; print 3 pixels int 16h ; wait for any keypress ret ; exit to os  scaled output from dosbox: • Note that mov al, 13h is incorrect unless it is guaranteed by DOSBox to have ah = 0 at the program entrypoint. – Margaret Bloom Apr 17 '19 at 15:18 • @MargaretBloom ax is 0 at start of com application in ms dos – Iłya Bursov Apr 17 '19 at 15:27 • Thanks Iłya, that's good to know! – Margaret Bloom Apr 18 '19 at 7:13 # Excel VBA (Immediate Window), 80 bytes For i=1To 9:Cells(i Mod 3+1,(i+1)/3).Interior.ColorIndex=Mid(673486857,i,1):Next  # Excel VBA (Function), 96 bytes Sub g() For i=1To 9 Cells(i Mod 3+1,(i+1)/3).Interior.ColorIndex=Mid(673486857,i,1) Next End Sub  Not a horrible tool for the job... I appreciate the fact that Excel already shows a grid so it is a matter of setting the background color. Credit to @Neil for suggesting I use ColorIndex instead of Color leading to a 43 byte savings. -21 bytes thanks to @Keeta -16 bytes thanks to @Chronocidal for suggesting the "Immediate Window" -2 bytes thanks to @i_saw_drones Lots of changes from my original submission :) • You could probably do better with ColorIndex as that's a number from 3 to 8 here, which you could encode in a string or something. – Neil Apr 17 '19 at 8:32 • @Neil - Indeed :) I was able to get it quite a bit shorter using that. Thanks for the tip. – dana Apr 17 '19 at 17:15 • I didn't see anything that stops you from changing this to Sub F() and End Sub for more savings. – Keeta - reinstate Monica Apr 18 '19 at 12:46 • Don't make it a function, and run this in the Immediate Window to drop 21 bytes: for i=1 To 3:for j=1 To 3:Cells(i,j).Interior.ColorIndex=Mid("367408005",i*j,1):next j,i – Chronocidal Apr 18 '19 at 15:40 • You can also remove quotes from the string, VBA will coerce the number into a string automatically. – i_saw_drones Apr 18 '19 at 16:16 # SVG, 210 182 bytes <svg><path d="h3v3h-3" fill=#f0f/><path d="h2v2h-2" fill=#ff0/><path d="m1 1h2v2h-2" fill=#0ff/><line x2=1 stroke=red/><path d="m1 1h1v1h-1" fill=#0f0/><path d="m2 2h1v1" fill=#00f/>  Since the size or shape of the colour blocks doesn't matter, quite a few bytes can be golfed off with this slightly odd layout: • I really like the ingenuity of this solution. – AJFaraday Apr 18 '19 at 21:05 # HTML + CSS, 121 120 bytes Worst piece of HTML I've ever wrote. One byte save thanks to @Gust van de Wal b{color:#ff0}a{color:cyan}i{color:lime}u{color:blue <pre><body bgcolor=#f0f text=red>█<b>█ █<i>█<a>█ █<u>█ # HTML + CSS, 114 bytes (semi valid) I'm putting this as semi-valid because the blue is not exactly #0000FF blue and also relies on not having clicked the link. Thanks to @Lynn for the idea b{color:#ff0}i{color:lime}c{color:cyan <pre><body bgcolor=#f0f text=red>█<b>█ █<i>█<c>█ █<a href=x>█ • You can omit the last closing bracket in the CSS. Also, incredible (and sickening) work! – Gust van de Wal Apr 17 '19 at 21:16 • You can change the tag names to avoid the default CSS formatting, e.g. <w>, <x>, <y>, and <z>. – darrylyeo Apr 18 '19 at 19:14 • <a href=x>█ will be blue by default, saving you some bytes of CSS :) – Lynn Apr 20 '19 at 0:21 # GFA Basic 2.02 (Atari ST), 48 bytes A manually edited listing in .LST format. Includes many non-printable characters, whose codes are shown within brackets. ?"[ESC]c[SOH] [ESC]c[ETX] [ESC]c[ENQ] "[CR] ?"[ESC]c[ETX] [ESC]c[STX] [ESC]c[ACK] "[CR] ?"[ESC]c[ENQ] [ESC]c[ACK] [ESC]c[EOT] "[CR]  The operating system of the Atari ST defines extended VT52 commands which are used here. ### Output The output is a block of $$\24\times24\$$ pixels (9 space characters of $$\8\times8\$$ pixels). screenshot from Steem SSE • +1 for making me all nostalgic for my trusty old ST. – Wossname Apr 17 '19 at 7:56 # ditaa, 118 bytes /----+----+----\ |cF00|cFF0|cF0F| +----+----+----+ |cFF0|c0F0|c0FF| +----+----+----+ |cF0F|c0FF|c00F| \----+----+----/  This is the output using -E option: # R, 8950 48 bytes Newest version: image(matrix(c(6,4,5,2:4,1,2),3),col=rainbow(6))  Not enough elements in the vector to fill the 3x3 matrix, so it wraps around and reuses the first element. Old versions: image(matrix(c(6,4,5,2:4,1,2,6),3),col=rainbow(6)) image(matrix(c(3,5,6,2,4,5,1:3),3),col=c('red','yellow','magenta','green','cyan','blue'))  • Welcome to PPCG! – Gymhgy Apr 16 '19 at 21:45 • wow it's Rainbow Six! – yqlim Apr 18 '19 at 3:21 • @alephalpha Yikes, I can't believe I missed that. I went ahead and fixed the oldest version and character count – anjama Apr 19 '19 at 12:22 • 46 bytes with image(matrix(c(6,4,5,2:4,1,2),3),c=rainbow(6)) – Dominic van Essen Oct 19 '20 at 14:55 # Perl 6 (and probably similar for many languages) (31 bytes) {'ÿ ÿÿÿ ÿ ÿÿ ÿ ÿÿÿ ÿ ÿÿ ÿ'} # replace spaces with ASCII 00 # which I can't seem to enter  This outputs a headless TIFF file, which used to be generated by Photoshop with the file extension .raw and is presumed to be square unless otherwise specified at the time of opening. Playing around with the color depth (if allowed) could reduce this down further. # ffplay (ffmpeg), 93 bytes ffplay -f rawvideo -s 3x3 -pix_fmt rgb24 "data:/;base64,/wAA//8A/wD///8AAP8AAP///wD/AP//AAD/"  Old: ffplay -f lavfi -i testsrc=s=3x3,geq=r=255*not(X*Y):g=255*not((X-1)*(Y-1)):b=255*not((X-2)*(Y-2))  ## Factorio Blueprint String, 705 bytes I admit, I'm just pushing the limits of what counts as a solution. 0eNrdWNGOqyAQ/ReedeNo0daH/ZHNTYOW7ZJFNAi91zT99wua7ZpdaaT1pb40oQ6HOecwA3pGBde0kUwolJ8RK2vRovztjFp2FITb/1TXUJQjpmiFAiRIZUdtzYkMGyIoR5cAMXGg/1AOlz8BokIxxegA0w+6vdBVQaUJuAKQstSV5kTV0qA2dWvm1MKuZ3FecIA6lIf4BV8uwS+YeDKPXzBhPKAkUxjJPAy4AbG5QljZFBEqLOuqYGKa1Vc6YAQzE5Ss+b6gH+TETLQJeWdcUemQ/8Sk0oSPHOgjQkkPqMfT1kEYWzEsI2hpc2gtFtgfO2NkDTMjbIKnCOLv1SrCechJ1UzwSm7zKpksNVN78+xwnffOZKv2s2kS0akPJo4D10FslEd2UDVE9oLn6NU+1i01S/HaKqmkpvNl2DhkSGfJEK1Eha1DhWyWCmvZCzuHCtu7aj5asuQ7ynn99/GqT0f07BjAwXnnx3kohEW7XMPE5+OEs5+EUwdhiL4T0IVh3LNzHlMwfUoB+LTPeK19A2LPkoGbety1f46SUvH4BoLExTHxOCKe3mmIXTJ43ogGp5MlnS47soTR+GeryFyUscex+PzOu65IkPr0OrzW2wFkHn0Ar3c3eN6S4pt63NUH7GvtAn3AafTOo+yf3+jhbDcv9/1XgHz00SBAJ+NNn3uWRJDiDcDWXIf+Aya7oEk=  Produced output when placed in-game (low graphics settings used): To prove that it is a valid solution you need to sample this grid of pixels which do match the specification exactly: The rest of the image is classified as a border or a spacing which, as said in the question, doesn't matter. • Very unique! Love it! – Seth Feb 23 at 4:12 # Excel-VBA, 897372 70 bytes Edit: You can use the immediate window and dispense with the Sub/End Sub to save 16 bytes: For i=1To 9:[A:C].Cells(i).Interior.ColorIndex=Mid(367648785,i,1):Next  Original answer: Sub a() For i=1To 9 [A1:C3].Cells(i).Interior.ColorIndex=Mid(367648785,i,1) Next End Sub  This was inspired by Neil's suggestion on this answer, and is my first submission! Result: -2 bytes: Removal of cell row numbers - thanks to Taylor Scott! • Welcome to PPCG! – Johan du Toit Apr 17 '19 at 14:50 • Thank you! Hopefully I'll learn some tricks from the masters :) – i_saw_drones Apr 18 '19 at 16:33 • For i=1To 9:[A:C].Cells(i).Interior.ColorIndex=Mid(367648785,i,1):Next for 70 – Taylor Scott May 13 '19 at 19:59 # Octave/MATLAB, 57 56 40 bytes -17 byte thanks to @ExpiredData! Check out their even golfier solution! image(reshape(de2bi(126973007),[3,3,3]))  Try it online! • Does just image work instead of imshow? Don't have a Matlab license any more and I'm on phone so can't test it – Expired Data Apr 17 '19 at 6:35 • @ExpiredData Thanks a lot, that works indeed! – flawr Apr 17 '19 at 6:52 • You can probably do this too Try it online! – Expired Data Apr 17 '19 at 6:57 • @ExpiredData ---Very nice trick, thanks a lot! :)--- why don't you post this as an own answer? – flawr Apr 17 '19 at 7:03 • Ok I will do that – Expired Data Apr 17 '19 at 7:07 ## JavaScript, 108 102 bytes console.log(%c█%c█%c█ .repeat(3),...[...320251014].map(c=>color:#+f0ff00f0.substr(c,3)))  No snippet because this only works in a real browser console and not the snippet's console. Edit: Thanks to @AJFaraday for the screenshot. Explanation: Browsers allow the first parameter of console.log to include substitutions. The %c substitution takes a parameter and applies it as (sanitised) CSS. Each █ block is therefore coloured using the appropriate substring of f0ff00f0 interpreted as a three-hex-digit colour code. • I don't get how this works? – marshal craft Apr 17 '19 at 5:25 • @marshalcraft %c is used to create a format string, the arguments being CSS styles for the text after it – ASCII-only Apr 17 '19 at 8:43 • So this is basically like dos versions but with chrome browser? – marshal craft Apr 17 '19 at 16:26 • Just curious but how did you go about finding the shortest possible chain of fs/0s to use? – Marie Apr 17 '19 at 18:03 • @Marie I started by noting that ff0ff contains all the mixed colours and 00f00 contains all the pure colours. If you concatenate them you get duplicate positions for ff0 and f00 so you can then remove the first and last characters. I then wrote a short script to check all 7-character strings to ensure that 8 was optimal. – Neil Apr 17 '19 at 19:38 $$\\Large{\mathbf{\TeX} \left(\text{MathJax}\right)},~122\,\text{bytes}\$$ $$\def\c#1{\color{#1}{\rule{5em}{5em}}} \c{red} \c{yellow} \c{fuchsia} \\ \c{yellow} \c{lime} \c{aqua} \\ \c{fuchsia} \c{aqua} \c{blue}$$ Golf'd: $\def\c#1{\color{#1}{\rule{5em}{5em}}}\c{red}\c{yellow}\c{fuchsia}\\\c{yellow}\c{lime}\c{aqua}\\\c{fuchsia}\c{aqua}\c{blue}$ Ungolf'd: $$\def\coloredBox#1{\color{#1}{\rule{5em}{5em}}} \coloredBox{red} \coloredBox{yellow} \coloredBox{fuchsia} \\ \coloredBox{yellow} \coloredBox{lime} \coloredBox{aqua} \\ \coloredBox{fuchsia} \coloredBox{aqua} \coloredBox{blue}$$  Edits: 1. Thanks to @flawr for pointing out how to fix the colors! 2. Could shave off $$\14\,\text{bytes}\$$ by replacing \rule{5em}{5em} with ▉, which'd look like$$\def\d#1{\color{#1}{▉}} \d{red} \d{yellow} \d{fuchsia} \\ \d{yellow} \d{lime} \d{aqua} \\ \d{fuchsia} \d{aqua} \d{blue}$$ , but just doesn't look quite the same. 3. Could probably shave off a few more bytes by finding color names that acceptably resemble the intended colors. 4. Just to show what a decently $$\\mathrm{\TeX}\text{'d}\$$ version of this would look like:$${\newcommand{\rotate}[2]{{\style{transform-origin: center middle; display: inline-block; transform: rotate(#1deg); padding: 50px}{#2}}}} {\def\place#1#2#3{\smash{\rlap{\hskip{#1em}\raise{#2em}{#3}}}}} {\def\placeBox#1#2#3{\place{#1}{#2}{\color{#3}{\rule{5em}{5em}}}}} {\def\placeLabelTop#1#2#3{\place{#1}{#2}{\large{\textbf{#3}}}}} {\def\placeLabelLeft#1#2#3{\place{#1}{#2}{\rotate{-90}{\large{\textbf{#3}}}}}} \placeLabelTop{1.1}{15.5}{Red} \placeLabelTop{5.5}{15.5}{Green} \placeLabelTop{11.2}{15.5}{Blue} \placeLabelLeft{-6.2}{13.6}{Red} \placeLabelLeft{-7.1}{8.5}{Green} \placeLabelLeft{-6.5}{3.5}{Blue} \placeBox{0}{10}{red} \placeBox{5}{10}{yellow} \placeBox{10}{10}{fuchsia} \placeBox{0}{5}{yellow} \placeBox{5}{5}{lime} \placeBox{10}{5}{aqua} \placeBox{0}{0}{fuchsia} \placeBox{5}{0}{aqua} \placeBox{10}{0}{blue} \place{15.1}{0}{\large{.}} \phantom{\rule{15em}{16.5em}}$$ • I think your colors are not correct. But apart from that I'd upvote your post if only for the title:) – flawr Apr 17 '19 at 6:56 • @flawr Yeah, they look different than the ones in the question statement, but I figured that if that's how $\mathrm{\TeX}$ renders those colors by the names given in the question statement, hopefully it'll be close enough. =P – Nat Apr 17 '19 at 6:56 • It seems mathjax uses the css color names. So you could replace purple with fuchsia and teal with aqua and green with lime then things would be correct I think. – flawr Apr 17 '19 at 7:02 • Just to note it: The above could be golf'd a bit more by removing some {}'s. But that'd violate too many clean coding principles for my sanity. =P – Nat Apr 17 '19 at 8:49 • Just note that the PPCG community was never famous for its sanity. If anything probably for the lack thereof. – flawr Apr 17 '19 at 8:51 # Lua + LÖVE/Love2D, 186 183 bytes t={[0>1]=0,[0<1]=1}l=love g=l.graphics function l.draw()for i=1,3 do for j=1,3 do g.setColor(t[i<2 or j<2],t[i==2 or j==2],t[i>2 or j>2])g.rectangle('fill',j*10,i*10,10,10)end end end  Try it online! My first code golf entry! • Welcome to Code Golf! Nice work! – AJFaraday Apr 17 '19 at 9:17 • I think you could use expressions in your truth table: t={[0>1]=0,[0<1]=1}. – manatwork Apr 17 '19 at 13:00 • @manatwork Smart! – Sheepolution Apr 17 '19 at 20:30 • another löver, nice to see you here – Lycea Jun 3 '19 at 8:59 # HTML/CSS, 278141 137 bytes r{color:red}y{color:#ff0}m{color:#f0f}g{color:#0f0}c{color:#0ff}l{color:#00f <pre><r>█<y>█<m>█ <y>█<g>█<c>█ <m>█<c>█<l>█ -137 bytes thanks to commenters, most notably @data -4 bytes thanks to @Einacio Uses Unicode █ (U+2588) for the "blocks", and uses CSS classes/inline style to color them. I think the <font> tags could be golfed more, however changing them to a shorter tag such as <a> breaks the color attribute • Leave out </td>, the browser is smart enough to automatically add this closing tag – Ferrybig Apr 16 '19 at 20:01 • If using deprecated elements, you can also specify the background color of a cell using <td bgcolor=#f00> – Ferrybig Apr 16 '19 at 20:03 • Maybe a noob question, but can't you avoid using the table and just print the █ and go to a new line with <br>? – frarugi87 Apr 17 '19 at 7:34 • @frarugi87 yes - 235 total: <span style="color:red">█<span class=a>█<span class=b>█<br><span class=a>█<span style="color:#0f0">█<span class=c>█<br><span class=b>█<span class=c>█<span style="color:#00f">█ – ASCII-only Apr 17 '19 at 8:47 • @ASCII-only b{color:#ff0}u{color:#f0f}i{color:#0ff} <pre><font color=red>█<b>█<u>█ <b>█<font color=lime>█<i>█ <u>█<i>█<font color=blue>█ – data Apr 17 '19 at 12:19 # MATL, 44 23 21 20 19 bytes A direct port of my Octave answer with the suggestions from @ExpiredData and @LuisMendo. 126973007Bo7B3*e0YG  try it online # Octave, 38 bytes image(reshape(de2bi(126973007),3,3,3))  Try it online! # HTML (GIF), 108 bytes It's the battle of the web-based image formats! (Any TIF or JPG contenders out there?) Answer by @A C. <img src=data:image/gif;base64,R0lGODdhAwADAMIGAAAA//8AAP8A/wD/AAD/////AAAAAAAAACwAAAAAAwADAAADBhglNSQEJAA7> # HTML (BMP), 116 115 bytes Answer by @ASCII-only. <img src=data:image/bmp;base64,Qk0+AAAAQVNDTxoAAAAMAAAAAwADAAEAGAD/AP///wD/AAAAAAAA//8A/wD//wAAAAAAAP8A////AP8AAAA> # HTML (WebP), 116 bytes Answer by @Hohmannfan. <img src=data:image/webp;base64,UklGRjYAAABXRUJQVlA4TCoAAAAvAoAAAC8gEEjaH3qN+RcQFPk/2vwHH0QCg0I2kuDYvghLcAoX0f/4Hgc> # HTML (PNG), 151136 135 bytes -15 bytes thanks to @Hohmannfan. <img src=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAIAAADZSiLoAAAAFElEQVR4AWP4z8Dw/z8DEIIodB4A4D0O8pOGuTgAAAAASUVORK5CYII> Also, see my CSS and SVG answers. • Good idea but.. It seems to me that a 89 bytes file for a 9 pixel image is a bit too much. Maybe manually writing a BMP header can golf this down. If I'm not wrong, the bare minimum header is 26 bytes, plus 12 of actual data (3 rows of 4 pixels) can trim the image down to 38 bytes, which in base64 means 51 or 52 characters rather than 119 – frarugi87 Apr 17 '19 at 8:26 • 118: <img src="data:image/bmp;base64,Qk0+AAAAQVNDTxoAAAAMAAAAAwADAAEAGAD/AP///wD/AAAAAAAA//8A/wD//wAAAAAAAP8A////AP8AAAA=">. 14 byte file header, 12 byte application header, 9 of actual data per row (+3 to pad to multiple of 4), yeah – ASCII-only Apr 17 '19 at 9:13 • I haven't counted, but I suspect that <img src="data:image/gif;base64,R0lGODdhAwADAMIGAAAA//8AAP8A/wD/AAD/////AAAAAAAAACwAAAAAAwADAAADBhglNSQEJAA7"> is shorter – A C Apr 18 '19 at 13:08 • Here's a png file that's 15 bytes smaller when base64 encoded: iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAIAAADZSiLoAAAAFElEQVR4AWP4z8Dw/z8DEIIodB4A4D0O8pOGuTgAAAAASUVORK5CYII= – SE - stop firing the good guys Apr 18 '19 at 18:56 • To continue the format battle, here's a lossless WebP solution. I can't cut it down anymore without violating the spec, so it narrowly beaten by BMP at 116 bytes. <img src=data:image/webp;base64,UklGRjYAAABXRUJQVlA4TCoAAAAvAoAAAC8gEEjaH3qN+RcQFPk/2vwHH0QCg0I2kuDYvghLcAoX0f/4Hgc> – SE - stop firing the good guys Apr 18 '19 at 19:12 ## Blockly turtle, 45 blocks Try it online! How about we play a little game of finding the most ridiculous tool for the job? Output: The program (as a screenshot for additional heresy): Note: The grayed out blocks are also counted towards the metric. • I’d love that to be a standard PCG challenge! Instead it happens organically on some code golf puzzles – AJFaraday Apr 19 '19 at 8:00 # Node.js, 79 bytes require('fs').writeFile(a='P',a+[...'3331100110101110010011101011001'].join )  Produces a file named "P" in the PPM format containing the color grid. # dc (on xterm), 64 bytes Fi16[AP]sF36dD6r31 101dD6rD1[1CP61P[38;5;]Pn[mX]Pz3%0=Fz0<M]dsMx  You'll just get a bunch of wacky escape codes instead of colors, but you can still try it online! By my understanding, the 16 basic ANSI colors are free to be interpreted however the terminal wants. On the other hand, the 216 colors in the xterm color cube have explicit RGB values. I am using these codes and printing a grid of Xs: First we set the input radix to base 15 with Fi. This costs two bytes, but gives back three, so... a net gain of a byte (and a big ol' loss in readability). Next we're trying to get our color values onto the stack. In decimal, this would be 21 51 201 51 46 226 201 226 196, but we're in wacky mode so it's going to be 16 36 D6 36 31 101 D6 101 D1. We eliminate one of the spaces by slotting in a macro we need to define at some point, [AP]sF (which simply prints a line feed). We can shrink 36 D6 36 and 101 D6 101 by placing the first value on the stack, duplicating it, placing the second, and then swapping (36dD6r, 101dD6r). Macro M handles the printing and whatnot. 1CP prints the escape character. Brackets are used to delimit strings, and as far as I know are not escapable, so we need to print the bracket with an ASCII value as well, 61P. [38;5;]P is the 'set foreground color from the numbered list' code. n prints the value from the top of the stack w/o a newline, popping it. [mX]P ends the code and prints an 'X'. z3%0=F checks the stack depth mod 3, running our line feed macro F when necessary. z0<M keeps M running as long as there's stuff on the stack. dsMx to run. Note that if you run this in dc in an xterm, it'll leave your foreground color blue. 1CP61P74P (input shown in the screenshot) should reset this. # TI-Basic, x bytes (will score when I can) Note: content filter is blocking me from looking up the token sizes for each of these commands. If anyone wants to score for me, go for it. TextColor(11 Text(0,0,"0" TextColor(19 Text(0,2,"0" Text(2,0,"0" TextColor(13 Text(4,0,"0" Text(0,4,"0" TextColor(14 Text(2,2,"0" TextColor(18 Text(2,4,"0" Text(4,2,"0" TextColor(17 Text(4,4,"0"  This look really bad on my little calculator screen. But hey, shape doesn't matter :^) Golf output: Modified for 8x larger output: # TI-BASIC, x bytes Using Pxl-On instead of Text: Pxl-On(0,0,11 Pxl-On(0,1,19 Pxl-On(0,2,13 Pxl-On(1,0,19 Pxl-On(1,1,14 Pxl-On(1,2,18 Pxl-On(2,0,13 Pxl-On(2,1,18 Pxl-On(2,2,17  Output: Blown up ~11x: • It's 180 characters, excluding line breaks. I'm not sure how/if line breaks are counted in code golf. – Nat Apr 18 '19 at 20:09 • Yes, but TI-BASIC is a tokenized language - for example, the interpreter sees TextColor as 2 bytes, not 9 as you would expect @Nat – Benjamin Urquhart Apr 18 '19 at 22:00 # Jelly, 16 bytes “IỤỵ7ỤĖm8’b4K”P;  Try it online! Niladic link or full program that produces a portable pixmap format image of the desired grid. ## C++, SFML, 177 bytes #include<SFML/Graphics.hpp> int d[]={255,65535,0xFF00FF,65535,65280,0xFFFF00,0xFF00FF,0xFFFF00,0xFF0000};void f(){sf::Image g;g.create(3,3,(sf::Uint8*)d);g.saveToFile("a.jpg");}  Uses sf::Image::create(int,int,unsigned char*) method to create an image with rgb values in it • You can shave off one byte by writing 0xFF0000 as 255<<16. – Broxzier Apr 23 '19 at 7:06 • Taking it a bit further, you can save 13 bytes by defining the R/G/B colour values in variables before the array: int b=255<<16,g=65280,r=255,d[]={r,g|r,b|r,g|r,g,b|g,b|r,b|g,b}; – Broxzier Apr 23 '19 at 21:35 ## C#, 248204 198 bytes class P{static void Main(){for(int i=0;i<12;i++){foreach(dynamic n in Enum.GetValues(typeof(ConsoleColor)))if((""+n)[0]=="RYMRYGCRMCBR"[i])Console.BackgroundColor=n;Console.Write(i%4<3?" ":"\n");}}}  Output: ## BASIC C64, 106 bytes 0 POKE53281,0 1 DATA144,28,158,156,144,13,158,30,159,144,13,156,159,31,144 2 READA:PRINTCHR$(A)+"o";:GOTO2