# 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#? Apr 16, 2019 at 21:13
• @EmbodimentofIgnorance sounds fine to me. Apr 16, 2019 at 22:08
• I'm waiting for the solution in Piet Apr 17, 2019 at 0:25
• @manassehkatz Is it just possible that hard-coding the data would be better golf than executing it? Apr 17, 2019 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. Apr 19, 2019 at 7:26

## 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  # [x86 Assembly], 42 bytes org 100h mov al,13h int 10h push 40960 pop es xor di,di mov bp,8 L: mov eax,[C+bp] stosd add di,316 sub bp,4 jnc L ret C: dd 00203424h, 0034302ch, 00242c28h  Dump: 00000000 B013 mov al,0x13 00000002 CD10 int 0x10 00000004 6800A0 push word 0xa000 00000007 07 pop es 00000008 31FF xor di,di 0000000A BD0800 mov bp,0x8 0000000D 668B861E01 mov eax,[bp+0x11e] 00000012 66AB stosd 00000014 81C73C01 add di,0x13c 00000018 83ED04 sub bp,byte +0x4 0000001B 73F0 jnc 0xd 0000001D C3 ret 0000001E 0024 add [si],ah 00000020 3420 xor al,0x20 00000022 002C add [si],ch 00000024 3034 xor [si],dh 00000026 0028 add [bx+si],ch 00000028 2C24 sub al,0x24  • Cool answer! Can you post the byte code or xxd dump for this? May 1, 2019 at 14:42 ## Processing 3: 191178 161 Bytes int l=0;void setup(){size(33,33);}void draw(){int i=l%33;int j=l/33;stroke((i%3==0||j%3==0)?255:0,(i%3==1||j%3==1)?255:0,(i%3==2||j%3==2)?255:0);point(i,j);l++;}  • Since the rectangles are drawn in a for loop, I'm pretty sure you can put them in setup. Oct 19, 2020 at 2:20 • @Razetime i didn't know you could do that I will check that out Oct 19, 2020 at 2:42 • Nice first answer, welcome to the site! Oct 19, 2020 at 2:42 • @Razetime I actually worked out an even better way to do it! Oct 19, 2020 at 3:04 # Wolfram Language (Mathematica), 72 bytes Grid@Partition[RGBColor/@Unitize[Total/@Tuples[IdentityMatrix@3,{2}]],3]  ## CSS, 157155147 139 bytes html{height:100%;background-blend-mode:screen;--:red 33%,#0f0 0 67%,blue 0;background:linear-gradient(90deg,var(--)),linear-gradient(var(-- Unlike @darrylyeo's answer no zooming is required (or possible!) I just wanted to show off background-blend-mode, despite it being far too long a keyword for code golf. Edit: Saved 2 10 bytes with help from @GustvandeWal. Saved a further 8 bytes thanks to @darrylyeo. • html can be replaced with * (3 bytes. Will make it a bit ugly) - All offset values to some value below 10 (8 bytes. Makes it a LOT more ugly) - Last offset value to 0 (2 bytes) - height to 99% (1 byte) - Omit last closing bracket (1 byte) Apr 17, 2019 at 21:30 • @GustvandeWal I decided against those changes that made the result ugly, but I was able to rearrange my CSS so that I could omit not one but two closing brackets, so thanks for the tip. – Neil Apr 17, 2019 at 22:14 • You can still change the last 67%s to 0s Apr 17, 2019 at 23:30 • @GustvandeWal Better still, I can change 4 values to 0s and I'm now tying with @darrylyeo's answer! – Neil Apr 17, 2019 at 23:40 • @darrylyeo I had wondered whether there was a way of avoiding the repetition; thanks for letting me know! – Neil Apr 18, 2019 at 19:06 # CSS, 147 138 bytes Uses the box-shadow and background properties. html{width:1em;height:1em;background:#f0f;box-shadow:red 0 1em,#ff0 1em 1em,#ff0 0 2em,#0f0 1em 2em,#0ff 2em 2em,#0ff 1em 3em,#00f 2em 3em -9 bytes (Gust van de Wal): Make background magenta to cover for two pixels instead of one. • html{width:3px;height:3px;background:#f0f;box-shadow:red 0 3px,#ff0 3px 3px,#ff0 0 6px,#0f0 3px 6px,#0ff 6px 6px,#0ff 3px 9px,#00f 6px 9px for 138 bytes Apr 17, 2019 at 21:39 • To improve visibility, replace px with em or mm. Also, use html instead of body. Here's the CSS: html{width:1em;height:1em;background:red;box-shadow:#ff0 1em 0,#f0f 2em 0,#ff0 0 1em,#0f0 1em 1em,#0ff 2em 1em,#f0f 0 2em,#0ff 1em 2em,#00f 2em 2em Apr 18, 2019 at 16:07 • Just figured that you can make the yellow and cyan shadows bigger and overlap everything: html{width:2em;height:2em;background:#f0f;box-shadow:red 0 2em,#0f0 2em 4em,#00f 4em 6em,#ff0 1em 3em 0 1em,#0ff 3em 5em 0 1em, 126 bytes Apr 18, 2019 at 22:40 ## APL (dzaima/APL), 186 161 bytes Uses dzaima's Processing integration. G←P5.G P5.draw←{p←G.pt G.stroke←'00f' p 3 3 G.stroke←'0ff' p 2 3 3 2 G.stroke←'f0f' p 1 3 3 1 G.stroke←'0f0' p 2 2 G.stroke←'ff0' p 1 2 2 1 G.stroke←'f00' p 1 1}  -25 bytes after applying some of dzaima's suggestions and 3 character color codes. ### Grid (Heavily Magnified): ### Actual size: # Raw PPM image, 36 bytes $ xxd image.ppm
00000000: 5036 2033 2033 2031 0a01 0000 0101 0001  P6 3 3 1........
00000010: 0001 0101 0000 0100 0001 0101 0001 0001  ................
00000020: 0100 0001


It might not fit the requirements, but it's fun to include anyway as a benchmark.

• Just a reference, use P3 is 62 bytes: P3 3 3 1 1 0 0 1 1 0 1 0 1 1 1 0 0 1 0 0 1 1 1 0 1 0 1 1 0 0 1
– tsh
Apr 18, 2019 at 19:16

Python Turtle, 202 bytes, inspired by Aaron F's answer

import turtle as m
t=m.Turtle()
t.shape("square")
l=t.left
i=0
y=["#ff0","#f0f","cyan"]
for c in["red"]+y+["#0f0"]+y:t.color(c);t.stamp();a={2:270,5:90}.get(i,0);l(a);t.fd(21);l(a);i+=1
t.color("blue")

• Very nice! I was wondering today whether turtle.color() accepted short colour codes :-) Apr 18, 2019 at 17:02

# x86 machine code, 16-bit, MS-DOS, EGA display, 40 39 bytes

Hexdump:

68 80 b8 07 31 ff be 1e 01 b9 09 00 2e 8a 24 46
b0 db d0 ec ab 73 04 81 c7 9a 00 e2 ef c3 18 1c
1b 1c 14 17 1a 16 02


Execution log:

It writes the "bar" character █ with various attributes to display memory, starting from address b8800 (display memory starts at b8000; I added an offset to move the output to a better place on the screen).

I could use the fact that display memory is filled with space characters, and change their background instead of overwriting them with the bar character, but for best match I needed bright colours, and they are not supported as background.

I developed the code using debug.com in a DOS emulator here. Source code:

; the following should read "push b880" but debug.com cannot emit this instruction
db 68, 80, b8
pop es
xor di, di
mov si, 11e
mov cx, 9
; 10c (loop target)
cs:
mov ah, [si]
inc si
mov al, db
shr ah, 1
stosw
jnc 11b
; 11b (jump target)
loop 10c
ret
db 18, 1c, 1b, 1c, 14, 17, 1a, 16, 02


# Python 2, 7448 47 bytes

print('\033[9%sm#'*3+'\n')*3%tuple('135326564')


Depends on system colors (this assumes 'bright' colors are pure RGB values), but works by modifying the foreground color of #s in the terminal.

-26 bytes thanks to xnor

-5 bytes by realizing the color blocks don't need to be rectangles, +4 bytes from miscounting

• You don't need to use loops here, string multiplication suffices: print('\033[10%sm '*3+'\n')*3%tuple('135326564')
– xnor
Apr 18, 2019 at 2:33
• @xnor thanks, but it turns out I had to add \033[0m before the \n because of some interaction with \n coloring the entire next line Apr 18, 2019 at 19:48

# GeoGebra Script, 157 bytes

Execute[Flatten[Sequence[Sequence[{"P"+i+j+"=("+j*.2+","+i*.2+")","SetColor[P"+i+j+","+(i==2∨j==0)+","+(i==1∨j==1)+","+(i==0∨j==2)+"]"},i,0,2],j,0,2]]]


Try it online!

Output:

# Python 123 bytes

from matplotlib.pyplot import*;r=0,1,2;imshow([[[2.if i==j==k else 1if(i==k)|(j==k)else 0for k in r]for j in r]for i in r])


Seeing no one took advantage of matplotlib in a graphical-output challenge I figured it had to be done for completion.

## Explanation

We can take advantage of the fact that matplotlib will autolevel our colors if we give it floating point data instead of integer data. This means we don't have to worry about specifying specific color values, just the correct ratios. So a red pixel we can define as (2, 0 ,0) and a yellow pixel we can define as (1, 1, 0). All we have to do is make sure at least one of these elements is a float, and matplotlib will automatically scale it to the proper 255-bit color for us.

Ungolfed code for clarity.

from matplotlib.pyplot import *
r = (0, 1, 2)
image = [[[0 for i in r] for i in r] for i in r]
for i in r:
for j in r:
for k in r:
if i==j==k: #matching pixel for diagonal element
image[i][j][k] = 2.
elif i==k or j==k: #matching pixel for partial component
image[i][j][k] = 1
imshow(image)


# Java 10, 229 bytes

import java.awt.*;v->new Frame(){{add(new Panel(){public void paint(Graphics g){var G=(Graphics2D)g;for(int i=9;i-->0;G.fillRect(i%3*4,i/3*4,4,4))G.setColor(new Color(i<4|i==6?255:0,i%2>0|i==4?255:0,i>4|i==2?255:0));}});show();}}


Screenshot of the actual 12x12 pixels result:

Screenshot of the 10 times larger 120x120 pixels result (the 4 in the fillRect are replaced with 40):

Explanation:

import java.awt.*;                // Required import for almost everything
v->                               // Method with empty unused parameter and Frame return
new Frame(){                    //  Create the Frame
{                              //   In an inner code-block:
public void paint(Graphics g){
//     Overwrite its paint method:
for(int i=9;i-->0        //      Loop i in the range (9,0]:
;                    //        After every iteration:
G.fillRect(i%3*4,i/3*4,4,4))
//         Draw a 4x4 pixel rectangle at coordinate
//         x=i%3*4, y=i//3*4
G.setColor(new Color(  //       Set the current RGB color to:
i<4|i==6?255:0,      //        Red: 255 if i is 0,1,2,3,6; 0 otherwise
i%2>0|i==4?255:0,    //        Green: 255 if i is 1,3,4,5,7; 0 otherwise
i>4|i==2?255:0));}});//        Blue: 255 if i is 2,5,6,7,8; 0 otherwise
show();}}                    //    And show the Frame when we're done


# Ruby, 113 bytes (Ubuntu Terminal)

a=[[91,93,95],[93,32,96],[95,96,34]]
for b,c,d in a do puts"\e[#{b}m█\e[0m\e[#{c}m█\e[0m\e[#{d}m█\e[0m" end


In Terminal.app, the colors do not display properly:

According to Wikipedia, this program should fit the spec if it's run on Ubuntu, which is the only terminal which has the colors as per specifications. Can someone help me out with this?

Try it online!

# HTML, 150 bytes

<table bgcolor=#0ff><td bgcolor=red><td bgcolor=#ff0><td bgcolor=#f0f><tr><td bgcolor=#ff0><td bgcolor=#0f0><tr><td bgcolor=#f0f><td><td bgcolor=#00f>

# HTML, 151 bytes

<table bgcolor=#0ff><td bgcolor=#f00><td bgcolor=#ff0><td bgcolor=#f0f><tr><td bgcolor=#ff0><td bgcolor=#0f0><tr><td bgcolor=#f0f><td><td bgcolor=#00f>

# Python 2, 216 bytes

l=[41,43,45,43,42,46,45,46,44]
print(''.join(['\033[0;37;'+l[i+j*3]+'m \033[0m'+'\n'*(j==2)for i in range(3)for j in range(3)]))


Unfortunately, this code does not work well with TIO, but here is a link regardless: Try it online!

• Thanks for the answer, Henry. It might be nice to include a tio.run to execute this code. Apr 17, 2019 at 8:15
• @AJFaraday unfortunately, it doesn't work in TIO, but I will provide a link regardless. Apr 17, 2019 at 8:28
• A language does not need to be in TIO to be allowed. I did mine in Tcl/Tk as so many answers I posted before, and no one was rejected because of your observation. Jun 19, 2019 at 0:32

I don't know if this is allowed. turtle is a built-in, but it relies on TK, which might not always be available (eg. TIO doesn't like this).

Anyway, it was fun to do. Tried to get it as small as possible while still using Turtle. (269 bytes because those spaces aren't spaces, they're tabs!)

## Python 2 or 3, 269 bytes

import turtle
t=turtle.Turtle()
t.shape("square")
l=t.left
i=0
y=["yellow","magenta","cyan"]
for c in ["red"]+y+["green"]+y+["blue"]:
i+=1
t.color(c)
t.stamp()
if i==9:
break
elif i%3==0:
a=90 if i==6 else 270
else:
t.fd(21)
continue
l(a)
t.fd(21)
l(a)

• I’m not that hot on the rules of code golf, but that seems fine to me. And I love that you did it this way :) Apr 17, 2019 at 19:23
• A language does not need to be in TIO to be allowed. I did mine in Tcl/Tk as so many answers I posted before, and no one was rejected because of your observation. Jun 19, 2019 at 0:31

# Pyth, 25 bytes

.wm.eXbk;mX*3]Zd=k255G=G3


The online interpreter doesn't show generated images, so this program must be run locally. It generates a 3x3 pixel image like the one in the question.

# SVG, 212 bytes

Uses the CSS property mix-blend-mode: lighten.

<svg><g fill=red><path d="M0 0h3v1H0z"/><path d="M0 0h1v3H0z"/><g fill=lime><path d="M0 1h3v1H0z"/><path d="M1 0h1v3H1z"/><g fill=blue><path d="M0 2h3v1H0z"/><path d="M2 0h1v3H2z"/><style>*{mix-blend-mode:lighten

# SVG, 276 240 bytes

Previous answer using <rect> instead of <path>.

<svg><g fill=red><rect width=3 height=1 /><rect width=1 height=3 /><g fill=lime><rect width=3 height=1 y=1 /><rect width=1 height=3 x=1 /><g fill=blue><rect width=3 height=1 y=2 /><rect width=1 height=3 x=2 /><style>*{mix-blend-mode:lighten

# Ruby with Shoes, 89 characters

Shoes.app{n=0..2
n.map{|i|n.map{|j|fill n.map{|e|i==e||j==e ?:F:0}*''
rect i*9,j*9,9,9}}}


Sample output:

• If you leave out *9 and change the other 9s to 1s, will that give 1-pixel color squares? If so, that will save 4 bytes. But if that would result in "borders without insides" then leave it as is. Apr 24, 2019 at 14:44
• @manassehkatz, unfortunately that would result only borders. nostroke would turn off the borders and the filled rectangles would appear, but not with the desired colors as kind of antialiasing would be performed on the rectangles' margins. strokewidth 0 would solve that, but would exceed the 4 characters gain. :( Apr 24, 2019 at 15:09

# Processing, 225 210 chars/bytes

Exhilarating code, I know.

fill(#FF0000);
rect(0,0,4,4);
fill(#FFFF00);
rect(0,4,4,4);
rect(4,0,4,4);
fill(#FF00FF);
rect(0,8,4,4);
rect(8,0,4,4);
fill(#00FF00);
rect(4,4,4,4);
fill(#00FFFF);
rect(4,8,4,4);
rect(8,4,4,4);
fill(#0000FF);
rect(8,8,4,4);


• Unless there is something magic about 30 & 60, change to single-digit values (e.g., 4, 8 would give you the maximum) and that will save you 7 bytes. Apr 23, 2019 at 22:50
• Actually, with a=3 instead of 30, get rid of a altogether and just hardcode the 3s and remove the first line = 9 more bytes. Apr 24, 2019 at 4:27
• @manassehkatz Was able to save 15 bytes. The 30 and 60 were mainly to make the image big enough, which isn't necessary for the challenge. Thanks. Apr 24, 2019 at 14:44

# [C64 Assembly], 58 bytes

Machine code:

01 08 0b 08 e3 07 9e 32 30 35 39 20 a2 03 ca
a9 a0 9d 20 04 9d 28 04 9d 50 04 bd 30 08 9d
20 d8 bd 33 08 9d 28 d8 bd 36 08 9d 50 d8 d0
e0 4c 2d 08 02 07 04 07 05 03 04 03 06


Assembly code:

*=$0801 .word (+), 2019 ;line number .null$9e, ^+       ;sys <start>
+
ldx #$03 loop: dex lda #$a0
sta $0400,x sta$0428,x
sta $0450,x lda tabcol+0,x sta$d800,x
lda tabcol+3,x
sta $d828,x lda tabcol+6,x sta$d850,x
bne loop
jmp *

tabcol:
.byte $02,$07,$04,$07,$05,$03,$04,$03,$06  • I have a feeling it might be possible to reduce it even further with some self-modifying code and/or using Indirect-indexed addressing. Also if its smaller to fit zeropage address:$7c - ? also the sys loading bytes can be stripped. May 1, 2019 at 21:52

# Racket (BSL + 2htdp/image), 152 bytes

(define(s q)(star 9 'solid q))(above(beside(s 'red)(s 'yellow)(s 'magenta))(beside(s 'yellow)(s 'green)(s 'cyan))(beside(s 'magenta)(s 'cyan)(s 'blue)))


Ungolfed:

(define (s q) (star 9 'solid q))
(above
(beside (s 'red) (s 'yellow) (s 'magenta))
(beside (s 'yellow) (s 'green) (s 'cyan))
(beside (s 'magenta) (s 'cyan) (s 'blue)))


star was the shortest shape. Overall a pretty boring answer. I'll try to come up with a more interesting one when time permits.

## Javascript, 134131 111 bytes

for(n=0,i=12;--i;)document.write(i%4?'<font color=#'+'f00ff0f0fff00f00fff0f0ff00f'.substr(n++*3,3)+'>█':'<br>')

• You can save one byte by using string interpolation for the font tag Apr 17, 2019 at 16:15

# Tcl/Tk, 208 bytes

gri [can .c]
proc O {x y z w C\ #FF0} {.c cr o $x$y $z$w -f \$C}
O 2 2 5 5 red
O 8 2 11 5
O 14 2 17 5 #F0F
O 2 8 5 11
O 8 8 11 11 #0F0
O 14 8 17 11 #0FF
O 2 14 5 17 #F0F
O 8 14 11 17 #0FF
O 14 14 17 17 #00F


Notes:

• There is an Enter on bottom
• Ran in interactive shell to have commands' abbreviations enabled by default.

# PostScript, 7761 60 bytes

Code:

3 3 1[.1 0 0 .1 0 0]<AC80C9809A8>false 3 colorimage showpage


Result: