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.
  • 2
    \$\begingroup\$ Can we output an mage object native to our language, for example a Bitmap object in C#? \$\endgroup\$
    – Gymhgy
    Commented Apr 16, 2019 at 21:13
  • 1
    \$\begingroup\$ @EmbodimentofIgnorance sounds fine to me. \$\endgroup\$
    – AJFaraday
    Commented Apr 16, 2019 at 22:08
  • 12
    \$\begingroup\$ I'm waiting for the solution in Piet \$\endgroup\$ Commented Apr 17, 2019 at 0:25
  • 4
    \$\begingroup\$ @manassehkatz Is it just possible that hard-coding the data would be better golf than executing it? \$\endgroup\$
    – AJFaraday
    Commented Apr 17, 2019 at 8:09
  • 4
    \$\begingroup\$ 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. \$\endgroup\$
    – Arnauld
    Commented Apr 19, 2019 at 7:26

58 Answers 58


BASIC C64, 106 bytes

0 POKE53281,0
1 DATA144,28,158,156,144,13,158,30,159,144,13,156,159,31,144

enter image description here


[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]
   add di,316
   sub bp,4
jnc L

C: dd 00203424h, 0034302ch, 00242c28h

enter image description here


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
  • \$\begingroup\$ Cool answer! Can you post the byte code or xxd dump for this? \$\endgroup\$
    – 640KB
    Commented May 1, 2019 at 14:42

Processing 3: 191 178 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++;}
  • 1
    \$\begingroup\$ Since the rectangles are drawn in a for loop, I'm pretty sure you can put them in setup. \$\endgroup\$
    – Razetime
    Commented Oct 19, 2020 at 2:20
  • \$\begingroup\$ @Razetime i didn't know you could do that I will check that out \$\endgroup\$ Commented Oct 19, 2020 at 2:42
  • \$\begingroup\$ Nice first answer, welcome to the site! \$\endgroup\$ Commented Oct 19, 2020 at 2:42
  • \$\begingroup\$ @Razetime I actually worked out an even better way to do it! \$\endgroup\$ Commented Oct 19, 2020 at 3:04

Wolfram Language (Mathematica), 72 bytes


enter image description here


CSS, 157 155 147 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.

  • \$\begingroup\$ 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) \$\endgroup\$ Commented Apr 17, 2019 at 21:30
  • \$\begingroup\$ @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. \$\endgroup\$
    – Neil
    Commented Apr 17, 2019 at 22:14
  • \$\begingroup\$ You can still change the last 67%s to 0s \$\endgroup\$ Commented Apr 17, 2019 at 23:30
  • \$\begingroup\$ @GustvandeWal Better still, I can change 4 values to 0s and I'm now tying with @darrylyeo's answer! \$\endgroup\$
    – Neil
    Commented Apr 17, 2019 at 23:40
  • 1
    \$\begingroup\$ @darrylyeo I had wondered whether there was a way of avoiding the repetition; thanks for letting me know! \$\endgroup\$
    – Neil
    Commented 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.

  • 1
    \$\begingroup\$ 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 \$\endgroup\$ Commented Apr 17, 2019 at 21:39
  • 1
    \$\begingroup\$ 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 \$\endgroup\$ Commented Apr 18, 2019 at 16:07
  • \$\begingroup\$ 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 \$\endgroup\$ Commented Apr 18, 2019 at 22:40

APL (dzaima/APL), 186 161 bytes

Uses dzaima's Processing integration.

p 3 3
p 2 3 3 2
p 1 3 3 1
p 2 2
p 1 2 2 1
p 1 1}

-25 bytes after applying some of dzaima's suggestions and 3 character color codes.

Grid (Heavily Magnified):

enter image description here

Actual size:

enter image description here


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.

  • 1
    \$\begingroup\$ 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 \$\endgroup\$
    – tsh
    Commented Apr 18, 2019 at 19:16

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

import turtle as m
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
  • \$\begingroup\$ Very nice! I was wondering today whether turtle.color() accepted short colour codes :-) \$\endgroup\$
    – Aaron F
    Commented Apr 18, 2019 at 17:02

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


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)
mov ah, [si]
inc si
mov al, db
shr ah, 1
jnc 11b
add di, 9a
; 11b (jump target)
loop 10c
db 18, 1c, 1b, 1c, 14, 17, 1a, 16, 02

Python 2, 74 48 47 bytes


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

  • \$\begingroup\$ You don't need to use loops here, string multiplication suffices: print('\033[10%sm '*3+'\n')*3%tuple('135326564') \$\endgroup\$
    – xnor
    Commented Apr 18, 2019 at 2:33
  • \$\begingroup\$ @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 \$\endgroup\$
    – Beefster
    Commented Apr 18, 2019 at 19:48

GeoGebra Script, 157 bytes


Try it online!


screenshot of the 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])

matplotlib's imshow output

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


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

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:

enter image description here

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

enter image description here


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:
     add(new Panel(){             //    Add a Panel we can draw on:
       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:
                                  //         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)

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:

enter image description here

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

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!

  • 1
    \$\begingroup\$ Thanks for the answer, Henry. It might be nice to include a tio.run to execute this code. \$\endgroup\$
    – AJFaraday
    Commented Apr 17, 2019 at 8:15
  • \$\begingroup\$ @AJFaraday unfortunately, it doesn't work in TIO, but I will provide a link regardless. \$\endgroup\$
    – Henry T
    Commented Apr 17, 2019 at 8:28
  • \$\begingroup\$ 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. \$\endgroup\$
    – sergiol
    Commented 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
for c in ["red"]+y+["green"]+y+["blue"]:
    if i==9:
    elif i%3==0:
        a=90 if i==6 else 270
  • 1
    \$\begingroup\$ 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 :) \$\endgroup\$
    – AJFaraday
    Commented Apr 17, 2019 at 19:23
  • \$\begingroup\$ 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. \$\endgroup\$
    – sergiol
    Commented Jun 19, 2019 at 0:31

Pyth, 25 bytes


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

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:

Shoes window screenshot with RGB color grid

  • \$\begingroup\$ 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. \$\endgroup\$ Commented Apr 24, 2019 at 14:44
  • 1
    \$\begingroup\$ @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. :( \$\endgroup\$
    – manatwork
    Commented Apr 24, 2019 at 15:09

Processing, 225 210 chars/bytes

Exhilarating code, I know.


enter image description here

  • 1
    \$\begingroup\$ 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. \$\endgroup\$ Commented Apr 23, 2019 at 22:50
  • 1
    \$\begingroup\$ 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. \$\endgroup\$ Commented Apr 24, 2019 at 4:27
  • 1
    \$\begingroup\$ @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. \$\endgroup\$
    – Robert S.
    Commented 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:

    .word (+), 2019     ;line number
    .null $9e, ^+       ;sys <start>
    ldx #$03
        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 *

.byte $02,$07,$04,$07,$05,$03,$04,$03,$06

enter image description here

  • \$\begingroup\$ 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. \$\endgroup\$ Commented 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)))


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

color grid

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, 134 131 111 bytes

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

  • \$\begingroup\$ You can save one byte by using string interpolation for the font tag \$\endgroup\$
    – Marie
    Commented 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


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

enter image description here


PostScript, 77 61 60 bytes


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




JavaScript + HTML Canvas, 153 bytes

<canvas id=c>


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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