Programming Puzzles & Code Golf Stack Exchange is a question and answer site for programming puzzle enthusiasts and code golfers. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

The challenge is simple: Draw a rainbow in as few bytes as possible

The specs for the rainbow are as follows:

  • The figure must be exactly 400 pixels wide and 200 pixels high (optionally 401x201 if you want a single center pixel)
  • The red ring should touch all borders of the figure (outer radius = 200 pixels)
  • All rings shall have the same width (10 pixels)
    • The violet ring shall have an inner radius of 130 pixels
  • The bow should be the upper half of a perfect circle
  • The background shall be white (transparent is also accepted)
  • The figure shall not have borders, (exception is made if the border can't be suppressed)
  • Builtin rainbow making functions are not allowed!

The following colors are to be used in the rainbow:


This is code golf, so the shortest code in bytes win!



Related, but different!

share|improve this question
Builtin rainbow making functions are not allowed As I'm sure Mathematica has one – Luis Mendo Mar 11 at 23:05
How imperfect may the rainbow be? From not anti-aliased to tearing? Consider the images in this answer – aross Mar 15 at 15:53
@aross: it should look like the sample rainbow (some pixels may vary due to inaccurate calculations). The two last rainbows are too "messy", while the first one looks ok. I don't have a perfect rule, so use you best judgement :-) – Stewie Griffin Mar 15 at 16:12
@StewieGriffin Reason I'm asking is because apparently PHP graphics is pretty buggy, while the solution is correct in theory. Well, the second one is, the third one would be with anti-aliasing (which also doesn't work well) – aross Mar 15 at 16:16

28 Answers 28

up vote 14 down vote accepted

MATL, 107 95 92 87 84 83 bytes

-200:200 0:200!PYyq10/k12-t8<*t0>*Q7B.561FTh.295Oh.51h4BPFTF6Bl.5hOh4B8$v255*k5M/YG

This works in current release (14.0.0) of the language/compiler.

To check that the colors are correct, remove the last five characters (you need to wait for a few seconds and scroll down to the end of the output).

enter image description here


The code has three main steps:

Step 1: Generate a 201x401 matrix with numbers from 1 to 8. Pixels with value 1 are background (white), pixels with values 2, ..., 8 represent each band of the rainbow.

Horizontal coordinates range from -200 to 200 left to right, and vertical coordinates range from 0 to 200 bottom to top. So the origin (0,0) is bottom center, the upper left corner is (-200,200), etc.

The different bands of the rainbow are generated by computing the distance from each pixel to the origin and quantizing in steps of 10 pixels.

Step 2: Generate an 8x3 matrix defining the colormap. Each row is one of the necessary colors (white and the seven colors of the rainbow). Each value of the previous 201x401 matrix will be interpreted as an index to a row of this colormap.

We generate the colormap matrix using values between 0 and 1 for each color component, and then multiplying by 255 and rounding down. This way most values are initially 0 and 1, which will later become 0 and 255. Intermediate values are coded as values between 0 and 1 with 2 or 3 decimals, chosen so that when multiplied and rounded give the exact desired value.

Step 3: Display the image with that colormap.

-200:200       % row vector [-200, -199, ..., 200]
0:200          % row vector [0, 1, ..., 200]
!P             % transpose and flip: convert into column vector [200; 199; ...; 0]
Yy             % hypotenuse function with broadcast: distance from each point to (0,0)
q10/k          % subtract 1, divide by 10, floor (round down). Gives 20 circular bands
               % 10 pixels wide, with values from 0 to 19
12-            % subtract 12
t8<*           % values larger than 7 are set to 0
t0>*           % values less than 0 are set to 0. We now have 7 bands with values
               % 1, ..., 7, and the white background with value 0
Q              % add 1: white becomes 1, bands become 2, ..., 8

7B             % first row: [1 1 1] (7 converted to binary: color white)
.561FTh        % second row (light purple)
.295Oh.51h     % third row (dark purple)
4BP            % fourth row: [0 0 1] (4 converted to binary and flipped: blue)
FTF            % fifth row (green)
6B             % sixth row: [1 1 0] (6 converted to binary: yellow)
l.5hOh         % seventh row: orange
4B             % eigth row: [1 0 0] (4 converted to binary: red)
8$v            % vertically concatenate the 8 eight rows
255*k          % multiply by 255 and round down. Gives exact color values 
5M/            % push 255 again and divide. This is needed because colors in MATL are
               % defined between 0 and 1, not between 0 and 255

               % STEP 3: DISPLAY
YG             % display image with that colormap
share|improve this answer

Piet, 838 codels, several thousand pixels

Someone had to do it:

An awesome rainbow

If you save this image you can try it online!

The actual Piet program is only the top ~125 pixels, which I created using a Python program I wrote.

Editing this afterwards really hurt my vision, I'll be tripping for days!

This outputs the image in an SVG format, because SVG really is (in my opinion) the simplest way to do this. I shamelessly stole Doorknob's SVG code. Outputs:

correct output

well, this really:

<svg viewBox='0 0 400 200'><circle cx='200' cy='200' r='200' fill='red'/><circle cx='200' cy='200' r='190' fill='#ff7f00'/><circle cx='200' cy='200' r='180' fill='yellow'/><circle cx='200' cy='200' r='170' fill='lime'/><circle cx='200' cy='200' r='160' fill='blue'/><circle cx='200' cy='200' r='150' fill='indigo'/><circle cx='200' cy='200' r='140' fill='#8f00ff'/><circle cx='200' cy='200' r='130' fill='white'/></svg>

Good luck beating this answer, non-Esolang users!

share|improve this answer
Is this python script public? I'm asking for a friend, who is very lazy.... – NaCl Mar 13 at 22:45
Erm, it takes literally ~2 minutes to implement xD You can find an old version here and adjust it if necessary: (note: I made this when I was 10, the code is embarrassing to say the least) - it needs PyPNG installed. – theonlygusti Mar 14 at 18:05

Pyth, 150 149 128 bytes

"<svg viewBox=0,0,400,200>"V8s["<circle cx=200 cy=200 r="-200*TN" fill="@c"red #ff7f00 #ff0 #0f0 #00f indigo #8f00ff #fff"dN" />

Outputs in SVG:

<svg viewBox=0,0,400,200>
<circle cx=200 cy=200 r=200 fill=red />
<circle cx=200 cy=200 r=190 fill=#ff7f00 />
<circle cx=200 cy=200 r=180 fill=#ff0 />
<circle cx=200 cy=200 r=170 fill=#0f0 />
<circle cx=200 cy=200 r=160 fill=#00f />
<circle cx=200 cy=200 r=150 fill=indigo />
<circle cx=200 cy=200 r=140 fill=#8f00ff />
<circle cx=200 cy=200 r=130 fill=#fff />


Thanks to @MamaFunRoll for 16 bytes and @PatrickRoberts for 6 more!

share|improve this answer
You could probably save a lot of bytes by packing the strings. – quartata Mar 11 at 23:31
@AquaTart All that does is add bytes. O_o – Doorknob Mar 12 at 0:20
I don't think you need any of the quotes, ending slashes, or the last ending </svg> tag. – Mama Fun Roll Mar 12 at 2:57
Two suggestions: red #ff7f00 #ff0 #0f0 #00f #8f00ff #fff for the color list and take single quotes off all parameter values that don't have spaces in them (cx, cy, r and fill) but make sure to leave a space between the value of fill and the / so the color doesn't get misinterpreted. Also remove the </svg> as suggested above. – Patrick Roberts Mar 12 at 9:25
Sorry, I meant red #ff7f00 #ff0 #0f0 #00f indigo #8f00ff #fff. Also if you replace the spaces with commas in the viewBox you can remove the single quotes for that parameter as well. – Patrick Roberts Mar 12 at 10:46

Mathematica 152 144 126 bytes

Graphics@MapIndexed[{#,Disk[{0,0},4-#/5&@@#2,{Pi,0}]}&,RGBColor/@TextWords@"#f00 #ff7f00 #ff0 #0f0 #00f #4b0082 #8f00ff #fff"]

enter image description here

Thanks @CatsAreFluffy for shaving off 8 bytes & @njpipeorgan for a further 18 :)

share|improve this answer
Use # vs #[[1]], #2 vs #[[2]], and @@@ vs /@. – CalculatorFeline Mar 13 at 0:01
Also, Thread works instead of Transpose. – LegionMammal978 Mar 14 at 0:51
Graphics@MapIndexed[{#,Disk[{0,0},4-#/5&@@#2,{Pi,0}]}&,RGBColor/@TextWords@"#f0‌​0 #ff7f00 #ff0 #0f0 #00f #4b0082 #8f00ff #fff"] saves another 18 bytes, but the idea is the same. – njpipeorgan Mar 14 at 2:39
Just curious... is there a "rainbow builtin"? – mbomb007 Mar 14 at 17:41
@mbomb007 not that i'm aware of! – martin Mar 15 at 11:46

vim, 165 142 139

i<svg viewBox=0,0,400,200><cr><circle cx=2<C-n> cy=2<C-n> r=2<C-n> fill=red<cr>#ff7f00<cr>#ff0<cr>#0f0<cr>#00f<cr>indigo<cr>#8f00ff<cr>#fff<esc>2Gqq0y4f=jPBB10<C-x>@qq@qV2G:norm A /><cr>

Yeesh, this is clunky. There's got to be improvements that can be made.

Outputs as SVG, like my Pyth answer.

Thanks to @MyHamDJ for shaving off 3 bytes!

share|improve this answer
You could shave off 2 bytes (or keystrokes) if you replace your last ex command with kv3G:norm A'/><cr> – Dr Green Eggs and Iron Man Mar 12 at 1:12
You could also take 3 more off if you enter the <circle cx... string on line 2 the first time through, rather then typing all of the colors then entering it afterwards. – Dr Green Eggs and Iron Man Mar 12 at 1:17

JavaScript (ES6), 171 158 bytes

document.write`<svg width=400 height=200>${`f00
fff`.replace(/.+/g,c=>`<circle cx=200 cy=200 r=${i--}0 fill=#${c} />`,i=20)}`

Credit to @edc65 for the idea to convert




It may look longer but the amount of bytes saved in compressing the array to a string is well worth the conversion. (It saves 13 bytes in this case)


document.write`<svg width=400 height=200>${`f00
fff`.replace(/.+/g,c=>`<circle cx=200 cy=200 r=${i--}0 fill=#${c} />`,i=20)}`

share|improve this answer


<svg width=400 viewBox=0,0,40,20 onload="this.innerHTML=`f00
fff`.replace(/.+/g,c=>`<circle cx=20 cy=20 r=${--r} fill=#${c} />`,r=21)"/>

share|improve this answer
use height=200 and cx=200 cy=200 r=${--r}0 instead of viewBox='0 0 40 20'. That should save 7 bytes. – Patrick Roberts Mar 12 at 11:48
I hope it's okay that I borrowed your idea with the .replace method... – Patrick Roberts Mar 12 at 12:08
@PatrickRoberts of course it's ok, I borrowed some of yours – edc65 Mar 12 at 19:05
I surely didn't expect to see r-=1 in code golf... – Neil Mar 12 at 20:26
@Neil bah! it was -=10 in some iteration before the final release – edc65 Mar 12 at 22:07

HTML (162) + CSS (146)

body{height:200px;width:400px}div{height:100%;box-sizing:border-box;border-radius:50% 50% 0 0/100% 100% 0 0;border:solid;border-width:10px 10px 0}
<div style=color:red><div style=color:#FF7F00><div style=color:#FF0><div style=color:#0F0><div style=color:#00F><div style=color:#4B0082><div style=color:#8F00FF>

HTML (224) + CSS (128)

body{height:200px;width:400px}div{height:100%;box-sizing:border-box;border-radius:50% 50% 0 0/100% 100% 0 0;padding:10px 10px 0}
<div style=background:red><div style=background:#FF7F00><div style=background:#FF0><div style=background:#0F0><div style=background:#00F><div style=background:#4B0082><div style=background:#8F00FF><div style=background:#FFF>

share|improve this answer

Minecraft 1.10 (almost), 2677 characters one-command, 868 blytes

Well I sure picked a verbose language.

summon FallingSand ~ ~1 ~ {Block:log,Time:1,Passengers:[{id:FallingSand,Block:redstone_block,Time:1,Passengers:[{id:FallingSand,Block:activator_rail,Time:1,Passengers:[{id:MinecartCommandBlock,Command:"summon ArmorStand ~ ~ ~ {Tags:[\"b\"]}"},{id:MinecartCommandBlock,Command:"summon Pig ~ ~ ~ {NoAI:1b}"},{id:MinecartCommandBlock,Command:setblock ~-1 ~-2 ~6 chain_command_block 3 replace {auto:1,Command:"execute @e[tag=b] ~ ~ ~ execute @e[rm=200] ~ ~ ~ tp @e[c=1] ~ -99 ~"}},{id:MinecartCommandBlock,Command:setblock ~-1 ~-2 ~5 chain_command_block 3 replace {auto:1,Command:"execute @e[tag=b] ~ ~ ~ execute @e[rm=190,r=200] ~ ~ ~ setblock ~ ~ ~ wool 14"}},{id:MinecartCommandBlock,Command:setblock ~-1 ~-2 ~4 chain_command_block 3 replace {auto:1,Command:"execute @e[tag=b] ~ ~ ~ execute @e[rm=180,r=190] ~ ~ ~ setblock ~ ~ ~ wool 1"}},{id:MinecartCommandBlock,Command:setblock ~ ~-2 ~4 chain_command_block 4 replace {auto:1,Command:"execute @e[tag=b] ~ ~ ~ execute @e[rm=170,r=180] ~ ~ ~ setblock ~ ~ ~ wool 4"}},{id:MinecartCommandBlock,Command:setblock ~ ~-2 ~5 chain_command_block 2 replace {auto:1,Command:"execute @e[tag=b] ~ ~ ~ execute @e[rm=160,r=170] ~ ~ ~ setblock ~ ~ ~ wool 13"}},{id:MinecartCommandBlock,Command:setblock ~ ~-2 ~6 chain_command_block 2 replace {auto:1,Command:"execute @e[tag=b] ~ ~ ~ execute @e[rm=150,r=160] ~ ~ ~ setblock ~ ~ ~ wool 11"}},{id:MinecartCommandBlock,Command:setblock ~ ~-2 ~7 chain_command_block 2 replace {auto:1,Command:"execute @e[tag=b] ~ ~ ~ execute @e[rm=140,r=150] ~ ~ ~ setblock ~ ~ ~ wool 10"}},{id:MinecartCommandBlock,Command:setblock ~ ~-2 ~8 chain_command_block 2 replace {auto:1,Command:"execute @e[tag=b] ~ ~ ~ execute @e[rm=130,r=140] ~ ~ ~ setblock ~ ~ ~ wool 2"}},{id:MinecartCommandBlock,Command:setblock ~1 ~-2 ~8 chain_command_block 4 replace {auto:1,Command:"tp @e[type=Cow] ~1 ~ ~"}},{id:MinecartCommandBlock,Command:setblock ~1 ~-2 ~7 chain_command_block 3 replace {auto:1,Command:"tp @e[type=Bat] ~-1 ~ ~"}},{id:MinecartCommandBlock,Command:setblock ~1 ~-2 ~6 chain_command_block 3 replace {auto:1,Command:"execute @e[type=Pig] ~ ~ ~ summon Bat ~ ~ ~ {NoAI:1b}"}},{id:MinecartCommandBlock,Command:setblock ~1 ~-2 ~5 chain_command_block 3 replace {auto:1,Command:"execute @e[type=Pig] ~ ~ ~ summon Cow ~ ~ ~ {NoAI:1b}"}},{id:MinecartCommandBlock,Command:setblock ~1 ~-2 ~4 repeating_command_block 3 replace {auto:1,Command:"tp @e[type=Pig] ~ ~1 ~"}},{id:MinecartCommandBlock,Command:setblock ~ ~ ~1 command_block 0 replace {Command:fill ~ ~-3 ~-1 ~ ~ ~ air}},{id:MinecartCommandBlock,Command:setblock ~ ~-1 ~1 redstone_block},{id:MinecartCommandBlock,Command:kill @e[type=MinecartCommandBlock,r=1]}]}]}]}

Make a new Superflat world, paste that mess into an Impulse command block, set your render distance fairly high, and run it. Break the armor stand when your computer stops lagging.

The result is 400 blocks across and 200 blocks tall, as requested.

I used MrGarretto's one command generator to pack everything together, and then modified the result of that a little bit to save a couple more bytes. Here's the input to it:

INIT:summon ArmorStand ~ ~ ~ {Tags:["b"]}
INIT:summon Pig ~ ~ ~ {NoAI:1b}
tp @e[type=Pig] ~ ~1 ~
execute @e[type=Pig] ~ ~ ~ summon Cow ~ ~ ~ {NoAI:1b}
execute @e[type=Pig] ~ ~ ~ summon Bat ~ ~ ~ {NoAI:1b}
tp @e[type=Bat] ~-1 ~ ~
tp @e[type=Cow] ~1 ~ ~
execute @e[tag=b] ~ ~ ~ execute @e[rm=130,r=140] ~ ~ ~ setblock ~ ~ ~ wool 2
execute @e[tag=b] ~ ~ ~ execute @e[rm=140,r=150] ~ ~ ~ setblock ~ ~ ~ wool 10
execute @e[tag=b] ~ ~ ~ execute @e[rm=150,r=160] ~ ~ ~ setblock ~ ~ ~ wool 11
execute @e[tag=b] ~ ~ ~ execute @e[rm=160,r=170] ~ ~ ~ setblock ~ ~ ~ wool 13
execute @e[tag=b] ~ ~ ~ execute @e[rm=170,r=180] ~ ~ ~ setblock ~ ~ ~ wool 4
execute @e[tag=b] ~ ~ ~ execute @e[rm=180,r=190] ~ ~ ~ setblock ~ ~ ~ wool 1
execute @e[tag=b] ~ ~ ~ execute @e[rm=190,r=200] ~ ~ ~ setblock ~ ~ ~ wool 14
execute @e[tag=b] ~ ~ ~ execute @e[rm=200] ~ ~ ~ tp @e[c=1] ~ -99 ~

That's a total of 15 1.9+ command blocks, and 838 bytes, so 15*2 + 838 = 868 blytes.

Here's the (almost) part, it's missing a corner and edge. It logically shouldn't - Minecraft bug? Would be exactly 400x200 blocks if it wasn't for that. Not much I can do.


share|improve this answer
Yay, a pig based rainbow generator ! +1 – TùxCräftîñg Jun 19 at 14:17

Java, 354 bytes

public void r() throws IOException{BufferedImage i=new BufferedImage(400,200,2);Graphics2D g=i.createGraphics();g.setStroke(new BasicStroke(10));int[]c={0xFF0000,0xFF7F00,0xFFFF00,0xFF00,255,0x4B0082,0x8F00FF};for(int v=0;v<7;v ++){g.setColor(new Color(c[v]));g.drawArc(v*10+5,v*10+5,390-v*20,390-v*20,0,360);}ImageIO.write(i,"PNG",new File("a.png"));}}

Just uses the Graphics2D class to draw 7 arcs, with an array to store the colors. I'm sure it can be improved further.

Ungolfed code:

public void ungolfed() throws IOException {
        BufferedImage i = new BufferedImage(400, 200, 2); // 2 is TYPE_INT_ARGB
        Graphics2D g = i.createGraphics();
        g.setStroke(new BasicStroke(10));
        int[] c = {0xFF0000, 0xFF7F00, 0xFFFF00, 0x00FF00, 0x0000FF, 0x4B0082, 0x8F00FF};
        for(int v = 0; v < 7; v ++) {
            g.setColor(new Color(c[v]));
            g.drawArc(v * 10 + 5, v * 10 + 5, 390 - v * 20, 390 - v * 20, 0, 360);
        ImageIO.write(i, "PNG", new File("a.png"));
share|improve this answer
Your 0x0000ff could be just 0xff or even just 255, same with 0x00ff00 being 0xff00. 0xff0000 could be 255<<16 to save another byte. Your loop could be to save a few more bytes. You can save one more byte by adding a ,q to your int declaration. You'd have to make it int c[]= instead of int[] c so q is an int and not an int[]. Doing that lets you add a q=390-v*20; to your loop. and replace the 390-v*20 with a q. It's a lot of work for one byte, but a byte is a byte, right?! – corsiKa Mar 13 at 7:07
You can save two more bytes by just throwing Exception instead of IOException. – corsiKa Mar 13 at 7:08
I also wonder if you can use drawOval and just render the top half of the image... might be a little more expensive though... – corsiKa Mar 13 at 7:09

SpecBAS - 318 254 bytes

If we're drawing rainbows, then it seems like a good place to use the successor to ZX Spectrum BASIC.

1 p,k=20,x1=0,x2=400,y=200
2 FOR EACH s IN [16711680,16744192,16776960,65280,255,4915330,9371903]: PALETTE p,s: INC p: NEXT s
3 CLS 15: DRAW 0,200 TO 70,200: DRAW 330,200 TO 400,200
4 FOR i=1 TO 7
5 INK k: DRAW x1,y TO x2,y,-PI: DRAW x1+10,y TO x2-10,y,-PI: FILL x1+5,190
6 x1+=10,x2-=10,k+=1
7 NEXT i

Line 2 sets up the palette for the specific RGB values needed (and is probably not helping the byte count) as standard Spectrum colours didn't match up.

The DRAW command can take an extra parameter which makes it turn through a number of degrees radians between x1,y1 and x2,y2. Finally it finds a gap in the semicircles just drawn and flood fills with the current colour.

enter image description here

share|improve this answer

JavaScript 271 251


share|improve this answer
Thanks @StewieGriffin I've made the change for 10. Been trying to get the count down but still a ways from doorknobs pyth answer! – wolfhammer Mar 11 at 23:51
You can move everything between the for's { ... } to inside the last for section, seperated by ,. e.g. for(i=0;i<8;x.beginPath(),x.arg(...etc...)). You can probably also use slice/splice of substr if I'm not mistaken. It might also be shorter to make the <canvas> using .innerHTML. Or even a HTML+JS answer and give the <canvas> and id of c and then it should automatically be added as a JS global variable – Downgoat Mar 12 at 1:42
@Downgoat substr has the advantage here in that its second parameter is a length, not an offset. As for golfing, document.body would seem to provide a considerable saving. – Neil Mar 12 at 20:28

Ruby with Shoes, 155 bytes,height:200){background'fff'
8.times{|i|stroke fill %w{f00 ff7f00 ff0 0f0 00f 4b0082 8f00ff fff}[i]
oval left:i*=10,top:i,radius:200-i}}

Sample output:

rainbow by Ruby with Shoes

share|improve this answer

Tcl/Tk, 263 bytes

canvas .c -bg #FFF -bo 0 -highlightt 0;pack .c -e 1 -f both;wm ge . 400x200;foreach {r c} {200 #FF0000 190 #FF7F00 180 #FFFF00 170 #00FF00 160 #0000FF 150 #4B0082 140 #8F00FF 130 #FFF} {.c cr o -$r -$r $r $r -outline $c -f $c};after 100 {.c x s -5 u;.c y s -10 u}

Alas, this kind of question always favors some esoteric languages... That said, Tcl/Tk really makes graphics operations all of: easy, short, and readable.

That said, I've sacrificed readability to crunch options down to as few characters as possible. I don't imagine crunching the list of colors will help much compared to code to unpack it...

For comparison, here's the uncrunched code (380 bytes):

canvas .c -bg #FFF -borderwidth 0 -highlightthickness 0
pack .c -expand yes -fill both
wm geometry . 400x200
foreach {r c} {
  200 #FF0000 
  190 #FF7F00 
  180 #FFFF00 
  170 #00FF00 
  160 #0000FF 
  150 #4B0082 
  140 #8F00FF 
  130 #FFFFFF
} {
  .c create arc -$r -$r $r $r -extent 180 -outline $c -fill $c
after 100 {
  .c xview scroll -5 units
  .c yview scroll -10 units

The after command was unfortunately necessary since no scrolling (of the canvas's coordinate origin) can be done before the window is mapped to the screen.

Also, the crunched code actually draws a full rainbow (using a circle instead of an arc) and just relies on window clipping...

Anyway, I hope y'all enjoy. :O)

share|improve this answer

CSS, 244 242 240 bytes

body{width:400px;height:200px;background-image:radial-gradient(500px at bottom,#FFF 26%,#8F00FF 26%,#8F00FF 28%,#4B0082 28%,#4B0082 30%,#00F 30%,#00F 32%,#0F0 32%,#0F0 34%,#FF0 34%,#FF0 36%,#FF7F00 36%,#FF7F00 38%,red 38%,red 40%,#FFF 40%)}

Edit: Saved 2 bytes by working around a bug in Chrome. Saved a further 2 bytes thanks to @TrangOul.

Note: the snippet uses a <div> due to limitations of Stack Snippets.

div {
    width: 400px;
    height: 200px;
    background-image: radial-gradient(500px at bottom,
        #FFF 26%,
        #8F00FF 26%, #8F00FF 28%,
        #4B0082 28%, #4B0082 30%,
        #00F 30%, #00F 32%,
        #0F0 32%, #0F0 34%,
        #FF0 34%, #FF0 36%,
        #FF7F00 36%, #FF7F00 38%,
        red 38%, red 40%,
        #FFF 40%);

share|improve this answer
It looks like the background on the outside of the rainbow is red (at least on my phone). – Stewie Griffin Mar 13 at 11:47
@StewieGriffin Works fine for me in Firefox for Android. (I couldn't work out how to enable Stack Snippets in my phone's default browser.) – Neil Mar 13 at 17:31
Ok, a bit strange :-) i'm using chrome 49.0.2623.91 on galaxy s6 edge btw. – Stewie Griffin Mar 13 at 20:25
@StewieGriffin Looks like it's broken in Chrome for Windows too. – Neil Mar 13 at 21:14
@StewieGriffin OK I think I have a workaround, and it saves two bytes too! – Neil Mar 14 at 8:50

C, 220 217 213 bytes

#define X printf("%c",s<169|s/401?y:s
i=8e4,t,y=255;main(s){for(puts("P6 400 200 255");i--;X/288?y:s<195?143:s<225?75:0),X<256|s/360?0:s/323?127:y),X<225&s/195?130:s<256?y:0))s=i/400,t=i%400-200,s=(s*s+t*t)/100;}

Output is PPM (the binary kind).

Edit: Saved a couple bytes thanks to @tucuxi.

Edit 2: Rearranged code to save even more.

share|improve this answer
you can shave a byte with i;s;t;main() -> s;t;main(i), and another one by placing part of your for loop body within the for: ;)code1,code2; -> ;code2)code1; (saved a comma!). – tucuxi Mar 14 at 10:19

Bash + ImageMagick, 159 125 characters

eval convert -size 401x201 xc: '-fill \#'{f00,ff7f00,ff0,0f0,00f,4b0082,8f00ff,fff}' -draw "circle 200,200 200,$[i++*10]"' x:

Sample output:

rainbow by Bash + ImageMagick

share|improve this answer

LaTeX, 290 bytes

\documentclass{proc}\input tikz\begin{document}\def\z#1!#2!#3!#4!{\definecolor{t}{rgb}{#1,#2,#3}\fill[color=t](200pt,0)circle(#4pt);}\tikz{\clip(0,0)rectangle(400pt,200pt);\z1!0!0!200!\z1!.5!0!190!\z1!1!0!180!\z0!1!0!170!\z0!0!1!160!\z.29!0!.51!150!\z.56!0!1!140!\z1!1!1!130!}\end{document}

Try it here.


\input tikz

    %Define macro "\z" with 4 arguments.         
    % The first 3 arguments are rgb values for the color
    % Last argument is the radius in pt that we draw a full circle with


    % Start a Tikz figure


        % We only draw the top half of the circle


        % Draw each circle from biggest to smallest


        % Draw a white circle last

share|improve this answer
@DonMuesli Thanks for the link, added. – Fatalize Mar 15 at 13:24

HTML + CSS, 310 307 bytes

<b style=background:red><b style=background:#ff7f00><b style=background:#ff0><b style=background:lime><b style=background:blue><b style=background:indigo><b style=background:#8f00ff><b style=background:#fff;width:260px;height:130px><style>b{float:left;padding:10px 10px 0 10px;border-radius:300px 300px 0 0}

Super-duper invalid markup (may or may not look correct in your browser). Just wanted to see if it was even possible.

share|improve this answer
You can cut two bytes by using #FF0 instead of yellow. You might be able to use the bgcolor attribute instead of style attributes too. – curiousdannii Mar 13 at 4:59
@curiousdannii You're right about the colors (white could also be shortened) of course - don't know why I didn't see that. I did try bgcolor before posting though, but unfortunately it's no longer supported (here in Chrome anyway) – Flambino Mar 13 at 9:47

PHP, 285 bytes

<?php $a=imagecreate(400,200);define("b",255);$c=array(b,b,b,b,0,0,b,127,0,b,b,0,0,b,0,0,0,b,75,0,130,143,0,b,b,b,b);for($i=0;$i<9;$i++){imagefilledellipse($a,200,200,420-$i*20,420-$i*20,imagecolorallocate($a,$c[$i*3],$c[$i*3+1],$c[$i*3+2]));}header("Content-type:png");imagepng($a);?>


Taste the rainbow!

share|improve this answer
Nice effort. But please note that closing PHP tag at the end of file is considered bad habit even when not golfing. It would be shorter as CLI script, that way you can spare that header() call and even the opening PHP tag. On Linux the simplest is to run php -r '$a=imagecreate(400,200);const b=255;for($c=[b,b,b,b,0,0,b,127,0,b,b,0,0,b,0,0,0,b,75,0,130,143,0,b,b,b,b];$i<9‌​;)imagefilledellipse($a,200,200,$r=420-$i*20,$r,imagecolorallocate($a,$c[$j=$i++*‌​3],$c[$j+1],$c[$j+2]));imagepng($a);' | display from command prompt and count it as 227 characters. (Using PHP 5.6.11.) – manatwork Mar 14 at 9:55

Bubblegum, 139 119 bytes


00000000: b329 2e4b 5728 cb4c 2d77 caaf b035 d031  .).KW(.L-w...5.1
00000010: d031 3130 d031 3230 b0e3 b249 ce2c 4ace  .110.120...I.,J.
00000020: 4955 48ae b005 f215 922b c154 1198 4ccb  IUH......+.T..L.
00000030: ccc9 b12d 4a4d 51d0 c7ad ced0 12aa 4e39  ...-JMQ.......N9
00000040: 2dcd 3c0d 2884 4fad 0542 2d7e 85e6 3085  -.<.(.O..B-~..0.
00000050: 0604 149a c115 1aa4 e155 680a 5598 9997  .........Uh.U...
00000060: 9299 9e8f 57a9 09cc 4c0b a07f d2f0 1b6b  ....W...L......k
00000070: 8cf0 1148 2100 0a                        ...H!..

Sadly, this is shorter than my Pyth answer. :(

Generates the same SVG file.

share|improve this answer

R, 184 170 bytes

Making an image with fixed pixel dimensions turns out to be surprisingly tricky with R, whose plotting functions are mostly intended for statisticians. In particular R leaves extra space for labels and coordinate axes unless you explicitly set margins as zero-width by calling par.

On the other hand some of the required colours (specifically red, yellow and blue) are found in the default palette, and can be referenced simply by integer indices.

share|improve this answer

Google Blockly, 48 blocks, 75 bytes

Click the gif below to navigate to the solution, where you can get a closer look at how it works.
As for an explanation, I think an image is worth a thousand words, and thus a gif is worth a thousand images.

link to big readable gif

Note: I'm unsure how to count in Blockly, so I counted every block as 1 byte, and every variable the regular way, so that 0 == 1 byte, 530 == 3 bytes, Arial == 5 bytes and bold == 4 bytes.
I counted the special character I used to cut off the rainbow as 2 bytes. Please report any mistakes or suggestions of the byte count in the comments

share|improve this answer

Processing, 196 186 181 179 bytes

int d=400;size(d,d/2);background(255);noStroke();int[] c={#ff0000,#ff7f00,#ffff00,#00ff00,#0000ff,#4b0082,#8f00ff,255};for(int i=0;i<8;i++){fill(c[i]);ellipse(200,200,d,d);d-=20;}


share|improve this answer
Can shave off one more byte by changing for(int i=0;i<8;i++) into for(int i=0;i++<8;) or similar – quat Jun 21 at 21:14

Perl, 175 + 1 = 176 bytes

perl -MSVG -E '$z=SVG->new(width=>4e2,height=>2e2);@x=qw/#fff #8f00ff indigo #00f #0f0 #ff0 #ff7f00 red/;$z->circle(cx=>200,cy=>200,r=>200-10*$a++,style=>{fill=>pop@x})for 1..8;say$z->xmlify'

enter image description here

share|improve this answer

PHP, 190 bytes


Run it like this:

php -r 'imagefill($a=imagecreatetruecolor($r=400,200),0,0,$w=0xffffff);foreach([255<<16,0xff7f00,$w-255,65280,255,4915330,9371903,$w]as$i)imagefilledellipse($a,200,200,$r,20+$r-=20,$i);imagepng($a);' | display

Resulting image 1

Also working in theory at 179 bytes (but the image looks a tad messed up, bad GD):

php -r '$r=410;imagesetthickness($a=imagecreatetruecolor(400,200),10);foreach([255<<16,0xff7f00,0xffff00,65280,255,4915330,9371903]as$i)imagearc($a,200,200,$r-=20,$r,1,0,$i);imagepng($a);' | display

Resulting image 2

Also not a perfect image, but much better than the above (and @166 bytes):

php -d error_reporting=30709 -r '$a=imagecreatetruecolor($r=400,200);foreach([255<<16,0xff7f00,0xffff00,65280,255,4915330,9371903]as$i)for(;++$$i<21;)imageellipse($a,200,200,$r,$r--,$i);imagepng($a);' | display

Resulting image 3

share|improve this answer

DIV Games Studio (184 bytes)

Not the shortest but quite simple. Uses the DIV default palette


Rainbow in div games studio


Define program start (named "r" to save space)


setup palette lookup


BEGIN program code


Set video mode to 400,200


loop x (predefined variable) from -80 (which bg hack) to 80 ( 7 colours + white centre)


define elipse constraints


draw elipse - on the first iteration this draws a circle larger than the screen in full white (index -8)

draw(type (5=filled elipse), colour, opacity, x0,y0,x1,y1)


once first is done, bump x up to zero to start drawing red band


end for loop


infinite loop, drawing screen.


end (matches BEGIN at top of program)

share|improve this answer

Forth Salon Haiku (184 bytes)

I can't satisfy the dimension constraints with this format, but I thought it worth sharing anyway.

: ^ 2 ** ;
: b 0.9 * dup x .5 - ^ y 2.01 / ^
+ sqrt dup rot > swap rot .045
+ < * * + ;
0 .56 .2 b .29 .25 b 1 .4 b
1 .45 b 1 .5 b 0 1 .35 b 1 .4 b
0.5 .45 b 0 1 .2 b .51 .25 b
1 .3 b

enter image description here

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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