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\$ – Embodiment of Ignorance Apr 16 '19 at 21:13
  • 1
    \$\begingroup\$ @EmbodimentofIgnorance sounds fine to me. \$\endgroup\$ – AJFaraday Apr 16 '19 at 22:08
  • 12
    \$\begingroup\$ I'm waiting for the solution in Piet \$\endgroup\$ – manassehkatz-Moving 2 Codidact Apr 17 '19 at 0:25
  • 4
    \$\begingroup\$ @manassehkatz Is it just possible that hard-coding the data would be better golf than executing it? \$\endgroup\$ – AJFaraday Apr 17 '19 at 8:09
  • 3
    \$\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 Apr 19 '19 at 7:26

53 Answers 53


Wolfram Language (Mathematica), 72 bytes


enter image description here

|improve this answer|||||

PostScript, 195 bytes

Output look closer: enter image description here

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

|improve this answer|||||

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.

|improve this answer|||||
  • \$\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\$ – Gust van de Wal Apr 17 '19 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 Apr 17 '19 at 22:14
  • \$\begingroup\$ You can still change the last 67%s to 0s \$\endgroup\$ – Gust van de Wal Apr 17 '19 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 Apr 17 '19 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 Apr 18 '19 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.

|improve this answer|||||
  • 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\$ – Gust van de Wal Apr 17 '19 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\$ – Ismael Miguel Apr 18 '19 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\$ – Gust van de Wal Apr 18 '19 at 22:40

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

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.

|improve this answer|||||
  • 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 Apr 18 '19 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
|improve this answer|||||
  • \$\begingroup\$ Very nice! I was wondering today whether turtle.color() accepted short colour codes :-) \$\endgroup\$ – Aaron F Apr 18 '19 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
|improve this answer|||||

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

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

GeoGebra Script, 157 bytes


Try it online!


screenshot of the output

|improve this answer|||||

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>

|improve this answer|||||

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!

|improve this answer|||||
  • 1
    \$\begingroup\$ Thanks for the answer, Henry. It might be nice to include a tio.run to execute this code. \$\endgroup\$ – AJFaraday Apr 17 '19 at 8:15
  • \$\begingroup\$ @AJFaraday unfortunately, it doesn't work in TIO, but I will provide a link regardless. \$\endgroup\$ – Henry T Apr 17 '19 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 Jun 19 '19 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
|improve this answer|||||
  • 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 Apr 17 '19 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 Jun 19 '19 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.

|improve this answer|||||

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

|improve this answer|||||

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

|improve this answer|||||
  • \$\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\$ – manassehkatz-Moving 2 Codidact Apr 24 '19 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 Apr 24 '19 at 15:09

Processing, 225 210 chars/bytes

Exhilarating code, I know.


enter image description here

|improve this answer|||||
  • 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\$ – manassehkatz-Moving 2 Codidact Apr 23 '19 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\$ – manassehkatz-Moving 2 Codidact Apr 24 '19 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. Apr 24 '19 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

|improve this answer|||||
  • \$\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\$ – Natural Number Guy May 1 '19 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.

|improve this answer|||||

Javascript, 134 131 111 bytes

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

|improve this answer|||||
  • \$\begingroup\$ You can save one byte by using string interpolation for the font tag \$\endgroup\$ – Marie Apr 17 '19 at 16:15

PostScript, 77 61 bytes


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



|improve this answer|||||

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

|improve this answer|||||

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
|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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