# Draw the rainbow

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!

Example:

Related, but different!

-
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

# MATL, 10795928784 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). ### Explanation 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.  % STEP 1: CREATE MATRIX DEFINING THE RAINBOW BANDS -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 % STEP 2: CREATE MATRIX DEFINING THE COLORMAP 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

-

# Piet, 838 codels, several thousand pixels

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:

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!

-
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: mediafire.com/download/0isocsb81n7r2cv/piet.py (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, 150149 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!

-
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 152144 126 bytes

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


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

-
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, 165142 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!

-
You could shave off 2 bytes (or keystrokes) if you replace your last ex command with kv3G:norm A'/><cr> – Dr Green Eggs and Ham DJ 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 Ham DJ Mar 12 at 1:17

# JavaScript (ES6), 171 158 bytes

document.write<svg width=400 height=200>${f00 ff7f00 ff0 0f0 00f 4b0082 8f00ff fff.replace(/.+/g,c=><circle cx=200 cy=200 r=${i--}0 fill=#${c} />,i=20)}  Credit to @edc65 for the idea to convert [...].map((c,i)=>...)  to ....replace(/.+/g,c=>...,i=20)  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) ## Demo document.write<svg width=400 height=200>${f00
ff7f00
ff0
0f0
00f
4b0082
8f00ff
fff.replace(/.+/g,c=><circle cx=200 cy=200 r=${i--}0 fill=#${c} />,i=20)}

-

# HTML+SVG+ES6, 169

<svg width=400 viewBox=0,0,40,20 onload="this.innerHTML=f00
ff7f00
ff0
0f0
00f
4b0082
8f00ff
fff.replace(/.+/g,c=><circle cx=20 cy=20 r=${--r} fill=#${c} />,r=21)"/>

-
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> - ## 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")); }  - 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. - # JavaScript 271 251 c=document.body.appendChild(document.createElement('canvas')) x=c.getContext('2d') c.width=400 r=c.height=200 for(i=0;i<8;x.beginPath(),x.arc(r,r,r-i*10,0,7),x.fillStyle="#"+"FF0000FF7F00FFFF0000FF000000FF4B00828F00FFFFFFFF".substr(i++*6,6),x.fill()); - 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 – Upgoat 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 Shoes.app(width:400,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: - # 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) - ## CSS, 244242 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%); } <div> - 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, 220217 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. - 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:

-

# 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}


### Explanations

\documentclass{proc}
\input tikz
\begin{document}

%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

\def\z#1!#2!#3!#4!
{\definecolor{t}{rgb}{#1,#2,#3}
\fill[color=t](200pt,0)circle(#4pt);}

% Start a Tikz figure

\tikz{

% We only draw the top half of the circle

\clip(0,0)rectangle(400pt,200pt);

% Draw each circle from biggest to smallest

\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!

% Draw a white circle last

\z1!1!1!130!
}
\end{document}

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

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


Outputs:

-
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

Hexdump:

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


Generates the same SVG file.

-

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

png(,400,200)
par(mar=0*1:4)
plot(as.raster(outer(199:0,-199.5:200,function(y,x)c(rep("white",13),"#8F00FF","#4B0082",4,"green",7,"#FF7F00",2)[1+(x^2+y^2)^.5%%200/10])))

-

# Processing, 196186181 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;}


-

## 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'


-

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

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

-

# PHP, 190 bytes

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


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


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


-

# DIV Games Studio (184 bytes)

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

PROGRAM r;
local
c[]=22,26,235,41,54,82,249,15,15;
BEGIN
set_mode(400200);
for(x=-80;x<80;x+=10)
y=399-x;
draw(5,c[abs(x)/10],15,0,x,x,y,y);
x+=70*(x<0);END
LOOP;FRAME;END
END


## Explanation

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

PROGRAM r;


setup palette lookup

local
c[]=22,26,235,41,54,82,249,15,15;


BEGIN program code

BEGIN


Set video mode to 400,200

set_mode(400200);


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

for(x=-80;x<80;x+=10)


define elipse constraints

y=399-x;


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)

draw(5,c[abs(x)/10],15,0,x,x,y,y);


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

x+=70*(x<0);


end for loop

END


infinite loop, drawing screen.

LOOP;FRAME;END


end (matches BEGIN at top of program)

END

-

# 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


-