51
\$\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.
Improve this question
\$\endgroup\$
15
  • 2
    \$\begingroup\$ Can we output an mage object native to our language, for example a Bitmap object in C#? \$\endgroup\$ Commented Apr 16, 2019 at 21:13
  • 1
    \$\begingroup\$ @EmbodimentofIgnorance sounds fine to me. \$\endgroup\$ 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\$ 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\$ Commented Apr 19, 2019 at 7:26

60 Answers 60

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

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++;}
Improve this answer
\$\endgroup\$
4
  • 1
    \$\begingroup\$ Since the rectangles are drawn in a for loop, I'm pretty sure you can put them in setup. \$\endgroup\$ 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
4
\$\begingroup\$

UiuaSBCS, 12 bytes

&ims⊞↥.⊞=.⇡3

Try it here!

Actual 3x3 result:

Output

Scaled 100x100 result:

Scaled

Explanation

Code | Desc | Stack &ims⊞↥.⊞=.⇡3 | | 3 | 3 | 3 ⊞=.⇡ | identity matrix | [1_0_0 0_1_0 0_0_1] ⊞↥. | outer product with itself | [[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]] &ims | show the image |
Improve this answer
\$\endgroup\$
1
  • \$\begingroup\$ You can use max instead of add to avoid the 2s \$\endgroup\$ Commented Sep 1, 2024 at 20:43
3
\$\begingroup\$

Wolfram Language (Mathematica), 72 bytes

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

enter image description here

Improve this answer
\$\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.

Improve this answer
\$\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.

Improve this answer
\$\endgroup\$
6
  • \$\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\$ 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\$ 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\$ Commented Apr 18, 2019 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.

Improve this answer
\$\endgroup\$
3
  • 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
3
\$\begingroup\$

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.

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)
Improve this answer
\$\endgroup\$
3
+100
\$\begingroup\$

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

enter image description here

Actual size:

enter image description here

Improve this answer
\$\endgroup\$
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.

Improve this answer
\$\endgroup\$
1
  • 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\$ Commented Apr 18, 2019 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")
Improve this answer
\$\endgroup\$
1
  • \$\begingroup\$ Very nice! I was wondering today whether turtle.color() accepted short colour codes :-) \$\endgroup\$ Commented Apr 18, 2019 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
Improve this answer
\$\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

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

Improve this answer
\$\endgroup\$
2
\$\begingroup\$

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

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

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:

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!

Improve this answer
\$\endgroup\$
1
  • \$\begingroup\$ Looks fine on my Mac's Terminal app? Don't see a problem. RIP @Razetime \$\endgroup\$ Commented Sep 2, 2024 at 1:07
2
\$\begingroup\$

PostScript, 77 61 60 bytes

Code:

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

Result:

result

Improve this answer
\$\endgroup\$
2
\$\begingroup\$

Chipmunk Basic, 194 bytes

data 3,0,0,3,3,0,3,0,3,3,3,0,0,3,0,0,3,3,3,0,3,0,3,3,0,0,3 k=33:graphics 0 for i=1 to 99 step k for j=1 to 99 step k read a,b,c graphics color a*k,b*k,c*k graphics fillrect i,j,i+k,j+k next:next
Improve this answer
\$\endgroup\$
1
  • \$\begingroup\$ Could probably determine the colours iteratively per the question, but CBasic separates the r,g,b making it harder to do so \$\endgroup\$ Commented Sep 2, 2024 at 0:52
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>

Improve this answer
\$\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!

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

Improve this answer
\$\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

Improve this answer
\$\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

Improve this answer
\$\endgroup\$
2
  • \$\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\$ Commented Apr 24, 2019 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

Improve this answer
\$\endgroup\$
3
  • 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\$ Commented Apr 24, 2019 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

Improve this answer
\$\endgroup\$
1
  • \$\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
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.

Improve this answer
\$\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>')

Improve this answer
\$\endgroup\$
1
  • \$\begingroup\$ You can save one byte by using string interpolation for the font tag \$\endgroup\$ Commented Apr 17, 2019 at 16:15
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

Improve this answer
\$\endgroup\$
0
\$\begingroup\$

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>

Improve this answer
\$\endgroup\$
1
2

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.