Generate an RGB colour grid

Question

This! is an RGB colour grid...

Basic RGB 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.

row and column diagram

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.
• Things I care about:
  • 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.

• Gymhgy: Can we output an mage object native to our language, for example a Bitmap object in C#?
• AJFaraday: @EmbodimentofIgnorance sounds fine to me.
• manassehkatz-Moving 2 Codidact: I'm waiting for the solution in Piet
• AJFaraday: @manassehkatz Is it just possible that hard-coding the data would be better golf than executing it?
• Arnauld: 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.

Answer 1

Bash, 44

• 2 bytes saved thanks to @NahuelFouilleul
• 2 bytes saved thanks to @manatwork

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).

enter image description here

You can recreate this script as follows:

base64 -d <<< cHJpbnRmICIke2Y9G1szJWRtLn0kZiRmCiIgMSAzIDUgMyAyIDYgNSA2IDQ= > rgbgrid.sh

• flawr: what the heck? please explain :)
• Nahuel Fouilleul: can save 2 bytes using shell expansion printf ${f=\\e[3%dm.}$f$f\\n 1 3 5 3 2 6 5 6 4
• AJFaraday: This one really brightened my day, thank you!
• Fredrik Pihl: 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.
• manatwork: 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.)

Answer 2

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).

enter image description here

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

• marshal craft: Will this work in dos, prib not but would be cool if it did.
• 640KB: @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.
• marshal craft: 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.
• 640KB: @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.
• Samy Bencherif: God this is a cool answer

Answer 3

Wolfram Language (Mathematica), 41 bytes

Image@Outer[Plus,#,#,1]&@IdentityMatrix@3

enter image description here

---

Wolfram Language (Mathematica), 68 bytes

Mathematica has built-ins for all these colors.

Image@{{Red,Yellow,Magenta},{Yellow,Green,Cyan},{Magenta,Cyan,Blue}}

enter image description here

Answer 4

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.

Excel Colour Grid

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 :)

• Neil: 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.
• dana: @Neil - Indeed :) I was able to get it quite a bit shorter using that. Thanks for the tip.
• Keeta - reinstate Monica: I didn't see anything that stops you from changing this to Sub F() and End Sub for more savings.
• Chronocidal: 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
• i_saw_drones: You can also remove quotes from the string, VBA will coerce the number into a string automatically.

Answer 5

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:

svg layout

• AJFaraday: I really like the ingenuity of this solution.

Answer 6

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:

enter image description here

• Margaret Bloom: Note that mov al, 13h is incorrect unless it is guaranteed by DOSBox to have ah = 0 at the program entrypoint.
• Iłya Bursov: @MargaretBloom ax is 0 at start of com application in ms dos
• Margaret Bloom: Thanks Iłya, that's good to know!

Answer 7

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>█

• Gust van de Wal: You can omit the last closing bracket in the CSS. Also, incredible (and sickening) work!
• darrylyeo: You can change the tag names to avoid the default CSS formatting, e.g. <w>, <x>, <y>, and <z>.
• lynn: <a href=x>█ will be blue by default, saving you some bytes of CSS :)

Answer 8

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).

output

^{screenshot from Steem SSE}

• Wossname: +1 for making me all nostalgic for my trusty old ST.

Answer 9

R, (削除) 89 (削除ここまで) (削除) 50 (削除ここまで) 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'))

enter image description here

• Gymhgy: Welcome to PPCG!
• yqlim: wow it's Rainbow Six!
• anjama: @alephalpha Yikes, I can't believe I missed that. I went ahead and fixed the oldest version and character count
• Dominic van Essen: 46 bytes with image(matrix(c(6,4,5,2:4,1,2),3),c=rainbow(6))

Answer 10

ditaa, 118 bytes

/----+----+----\
|cF00|cFF0|cF0F|
+----+----+----+
|cFF0|c0F0|c0FF|
+----+----+----+
|cF0F|c0FF|c00F|
\----+----+----/

This is the output using -E option:

enter image description here

Answer 11

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):

enter image description here

To prove that it is a valid solution you need to sample this grid of pixels which do match the specification exactly:

enter image description here

The rest of the image is classified as a border or a spacing which, as said in the question, doesn't matter.

• Seth: Very unique! Love it!

Answer 12

Excel-VBA, (削除) 89 (削除ここまで) (削除) 73 (削除ここまで) (削除) 72 (削除ここまで) 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:

Result Grid

-2 bytes: Removal of cell row numbers - thanks to Taylor Raine!

• jdt: Welcome to PPCG!
• i_saw_drones: Thank you! Hopefully I'll learn some tricks from the masters :)
• Taylor Raine: For i=1To 9:[A:C].Cells(i).Interior.ColorIndex=Mid(367648785,i,1):Next for 70

Answer 13

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.

Answer 14

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))

Answer 15

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.

Example of code execution

• marshal craft: I don't get how this works?
• ASCII-only: @marshalcraft %c is used to create a format string, the arguments being CSS styles for the text after it
• marshal craft: So this is basically like dos versions but with chrome browser?
• Marie: Just curious but how did you go about finding the shortest possible chain of fs/0s to use?
• Neil: @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.

Answer 16

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!

• Expired Data: 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
• flawr: @ExpiredData Thanks a lot, that works indeed!
• Expired Data: You can probably do this too Try it online!
• flawr: @ExpiredData ---Very nice trick, thanks a lot! :)--- why don't you post this as an own answer?
• Expired Data: Ok I will do that

Answer 17

\$\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}} $$

• flawr: I think your colors are not correct. But apart from that I'd upvote your post if only for the title:)
• flawr: 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: Just note that the PPCG community was never famous for its sanity. If anything probably for the lack thereof.
• ASCII-only: \rule{5em}{5em} -> \rule 5em 5em
• Phelype Oleinik: The \color{something} command doesn't take a text argument like \textcolor{something}{tex to be coloured}, rather it's a switch, so you can save two bytes by removing the extra pair of braces around \rule: \def\c#1{\color{#1}\rule{5em}{5em}}. Also, in proper TeX ~ is an active character so you can replace all \c by ~ and save a couple more bytes. Don't know about MathJax though.

Answer 18

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!

enter image description here

My first code golf entry!

• AJFaraday: Welcome to Code Golf! Nice work!
• manatwork: I think you could use expressions in your truth table: t={[0>1]=0,[0<1]=1}.
• Sheepolution: @manatwork Smart!
• Lycea: another löver, nice to see you here

Answer 19

HTML/CSS, (削除) 278 (削除ここまで) (削除) 141 (削除ここまで) 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

• Ferrybig: Leave out </td>, the browser is smart enough to automatically add this closing tag
• Ferrybig: If using deprecated elements, you can also specify the background color of a cell using <td bgcolor=#f00>
• frarugi87: Maybe a noob question, but can't you avoid using the table and just print the █ and go to a new line with <br>?
• ASCII-only: @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">█
• data: @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>█

Answer 20

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

Answer 21

Octave, 38 bytes

image(reshape(de2bi(126973007),3,3,3))

Try it online!

Answer 22

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), (削除) 151 (削除ここまで) (削除) 136 (削除ここまで) 135 bytes

-15 bytes thanks to @Hohmannfan.

<img src=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAIAAADZSiLoAAAAFElEQVR4AWP4z8Dw/z8DEIIodB4A4D0O8pOGuTgAAAAASUVORK5CYII>

---

Also, see my CSS and SVG answers.

• frarugi87: 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
• ASCII-only: 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
• A C: I haven't counted, but I suspect that <img src="data:image/gif;base64,R0lGODdhAwADAMIGAAAA//8AAP8A/wD/AAD/////AAAAAAAAACwAAAAAAwADAAADBhglNSQEJAA7"> is shorter
• SE - stop firing the good guys: Here's a png file that's 15 bytes smaller when base64 encoded: iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAIAAADZSiLoAAAAFElEQVR4AWP4z8Dw/z8DEIIodB4A4D0O8pOGuTgAAAAASUVORK5CYII=
• SE - stop firing the good guys: 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>

Answer 23

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:

buncha colorful 'x's

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.

Answer 24

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 glorious output of this glorious piece of crappy programming

The program (as a screenshot for additional heresy):

The program as a screenshot for additional heresy

Note: The grayed out blocks are also counted towards the metric.

• AJFaraday: I’d love that to be a standard PCG challenge! Instead it happens organically on some code golf puzzles

Answer 25

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.

Answer 26

C#, (削除) 248 (削除ここまで) (削除) 204 (削除ここまで) 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:
enter image description here

Answer 27

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:

enter image description here

Modified for 8x larger output:

enter image description here

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:

enter image description here

Blown up ~11x:

enter image description here

• Nat: It's 180 characters, excluding line breaks. I'm not sure how/if line breaks are counted in code golf.
• Benjamin Urquhart: Yes, but TI-BASIC is a tokenized language - for example, the interpreter sees TextColor as 2 bytes, not 9 as you would expect @Nat

Answer 28

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

enter image description here

Answer 29

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

• Broxzier: You can shave off one byte by writing 0xFF0000 as 255<<16.
• Broxzier: 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};

Answer 30

PostScript, 195 bytes

Output ^{_{look closer:}} enter image description here

%!PS
/r{rlineto}def/s{newpath moveto 0 1 r 1 0 r 0 -1 r closepath setrgbcolor fill}def
1 0 0 0 2 s
1 1 0 1 2 s
1 0 1 2 2 s
1 1 0 0 1 s
0 1 0 1 1 s
0 1 1 2 1 s
1 0 1 0 0 s
0 1 1 1 0 s
0 0 1 2 0 s

To test just paste the code in a blank file and save as something.ps and open in a pdf viewer.

To enlarge the output add 50 50 scale (or some other number) on the second line of the file.