Generate an RGB colour grid

Question

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

Answer 1

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

Answer 2

[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

Answer 3

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++;}

Answer 4

Wolfram Language (Mathematica), 72 bytes

Grid@Partition[RGBColor/@Unitize[Total/@Tuples[IdentityMatrix@3,{2}]],3]

Answer 5

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.

Answer 6

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.

Answer 7

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:

Answer 8

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.

Answer 9

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

Answer 10

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
add di, 9a
; 11b (jump target)
loop 10c
ret
db 18, 1c, 1b, 1c, 14, 17, 1a, 16, 02

Answer 11

Python 2, 74 48 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

Answer 12

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:

Answer 13

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)

Answer 14

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

Answer 15

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!

Answer 16

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>

Answer 17

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!

Answer 18

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)

Answer 19

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.

Answer 20

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

Answer 21

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:

Answer 22

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

Answer 23

[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

Answer 24

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.

Answer 25

Javascript, 134 131 111 bytes

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

Answer 26

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.

Answer 27

PostScript, 77 61 60 bytes

Code:

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

Result:

Answer 28

JavaScript + HTML Canvas, 153 bytes

c=c.getContext`2d`;for(i=0;i<9;i++){x=i/3|0;y=i%3;c.fillStyle=`rgb(${(!x|!y)*255},${(x==1|y==1)*255},${(x>1|y>1)*255})`;c.fillRect(x,y,1,1)}

<canvas id=c>