46
\$\begingroup\$

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.
\$\endgroup\$
  • 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 at 21:13
  • 1
    \$\begingroup\$ @EmbodimentofIgnorance sounds fine to me. \$\endgroup\$ – AJFaraday Apr 16 at 22:08
  • 10
    \$\begingroup\$ I'm waiting for the solution in Piet \$\endgroup\$ – manassehkatz Apr 17 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 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 at 7:26

53 Answers 53

3
\$\begingroup\$

Wolfram Language (Mathematica), 72 bytes

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

enter image description here

\$\endgroup\$
3
\$\begingroup\$

Jelly, 16 bytes

“IỤỵ7ỤĖm8’b4K”P;

Try it online!

Niladic link or full program that produces a portable pixmap format image of the desired grid.

\$\endgroup\$
3
\$\begingroup\$

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.

\$\endgroup\$
3
\$\begingroup\$

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.

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

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.

\$\endgroup\$
  • 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 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 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 at 22:40
3
\$\begingroup\$

[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

enter image description here

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

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.

\$\endgroup\$
  • 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 at 19:16
2
\$\begingroup\$

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

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:

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
\$\endgroup\$
2
\$\begingroup\$

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

\$\endgroup\$
  • \$\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 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 at 19:48
2
\$\begingroup\$

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:

screenshot of the output

\$\endgroup\$
1
\$\begingroup\$

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>

\$\endgroup\$
1
\$\begingroup\$

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!

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

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)
\$\endgroup\$
  • 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 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 at 0:31
1
\$\begingroup\$

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.

\$\endgroup\$
1
\$\begingroup\$

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

\$\endgroup\$
1
\$\begingroup\$

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:

Shoes window screenshot with RGB color grid

\$\endgroup\$
  • \$\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 Apr 24 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 at 15:09
1
\$\begingroup\$

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

enter image description here

\$\endgroup\$
  • 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 Apr 23 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 Apr 24 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 at 14:44
1
\$\begingroup\$

[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

enter image description here

\$\endgroup\$
  • \$\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 at 21:52
1
\$\begingroup\$

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

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.

\$\endgroup\$
1
\$\begingroup\$

Javascript, 134 131 111 bytes

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

\$\endgroup\$
  • \$\begingroup\$ You can save one byte by using string interpolation for the font tag \$\endgroup\$ – Marie Apr 17 at 16:15
1
\$\begingroup\$

PostScript, 77 61 bytes

Code:

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

Result:

result

\$\endgroup\$
1
\$\begingroup\$

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.

enter image description here

\$\endgroup\$

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.