# Challenge

Create the image of a pride flag (rainbow flag), i.e. a six coloured striped flag (from top to bottom): red, orange, yellow, green, blue, and violet.

# Example (R)

barplot(rep(1, 6), horiz = TRUE, axes = FALSE, space = 0, border = NA, col = c("darkviolet", "blue", "darkgreen", "yellow", "orange", "red"))


# Rules

• The algo should actually create the image, not just load an existing one.
• You may use any colors reasonably recognizable as "red", "orange", "yellow, "green", "blue", and "violet".
• The flag may either be scalable (such as an SVG, or output that scales to window size) or at least size 200px by 300px.
• All coloured areas should be of the same size.

Every answer must include the resulting picture!

Credits: this post was inspired by the following post: Draw the flag of Tennessee.

• OK I have reopened this and cleared the comments. I would still personally prefer if both this question and the linked question actually gave guidelines for colors beyond it just looks right. But since there is a precedent I think we will just see how it plays out. Jun 26, 2021 at 15:29
• "All coloured areas should be of the same size." What about if the image isn't a multiple of 6 pixels tall? Jun 26, 2021 at 19:00

# Red, 73 bytes

view/tight[style s: box 315x35 below s red s#fa0 s#ff0 s#0f0 s#00f s#808]


Works in Red console. To run as a standalone program, we must add in front:

Red[needs view]


I don't know, whether this has to be counted.

• I don't think the Red[] header has to be counted.
– user
Jun 26, 2021 at 17:53

# VyxalsḢ, 49 bytes

<hr «⟇=øḢ-÷¥:#%7;¨→:14vh;₃ṁ:0;¤¯:0>»‡Ė\Tµi»Hǒv%


Try it Online!

Stuff Vyxal isn't meant to do! This took far too long. The Ḣ flag renders stdout as HTML.

               v  # Over each element of...
»‡Ė\Tµi»     # A compressed integer
Hǒ   # Split into chunks of two...
% # Insert that into...
...             # Compresssed string <hr style=background-color:#%7;height:14vh;margin:0;border:0>
# (s flag) turn the result into something HTML understands
# (Ḣ flag) render the output as HTML


For compression purposes, all the character codes end in 7.

## Postscript, 42 bytes

Hand tokenised (42 bytes including showpage, 40 bytes without).

00000000: 36 88 09 32 5b 30 20 2e 31 92 38 30 88 f7 88 f7  6..2[0 .1.80....
00000010: 5d 7b 8e 05 88 33 3c e3 00 7d 8d 00 33 20 63 6f  ]{...3<..}..3 co
00000020: 6c 6f 72 69 6d 61 67 65 92 a1                    lorimage..


No tokenisation (62 bytes including showpage, 53 bytes without):

6 9 2[0 .1 .1 0 -9 -9]{<88333ce30>}false 3 colorimage
showpage


This renders to about 3.2 by 2.1 cm (0.8" by 1.25"). The size is limited by the constants '.1'. Making the flag bigger requires a smaller number which will need one extra byte (two bytes in the untokenised version).

The tokenised version is the same as the untokenised version except the ".1 .1" is encoded as ".1 dup" to save a byte.

• Welcome to Code Golf! Nice first answer. Jul 1, 2021 at 2:10

# DOS 80186 .COM executable, 31 30 bytes

xxd:

00000000: b0 13 cd 10 68 00 a0 07 31 ff be 18 01 ac b9 80  ....h...1.......
00000010: 2a f3 aa 3c 05 75 f6 c3 28 2a 2c 02 20 05        *..<.u..(*,. .


Commented assembly:

        ; NASM syntax
[cpu 186]
[org 0x100]
start:
; Set DOS to mode 13h for 320x200, 256 colors
; Since we know the DOS startup state, we can just set AL.
mov     al, 0x13 ; 0x0013
int     0x10
; Set ES to point to the video ram segment
push    0xa000
pop     es
; Set DI to point to the start of video ram
xor     di, di
; Set SI to our lookup table
mov     si, colors
.loop:
; Load color from lookup table
lodsb
; Roughly 1/6 of the screen
; ceil(200 / 6) * 320
mov     cx, 10880
; For all CX iterations, store byte to video ram
rep     stosb
; Check for last byte in lut and loop if it is not
; that.
cmp     al, 5
jnz     .loop
.ret:
; the screen that requires a manual mode reset.
ret

; Lookup table for the default 256 color palette.
colors:
;   R   O   Y   G   B   P
db 40, 42, 44,  2, 32,  5


I'm not sure if this is valid, as the last stripe is technically a bit shorter than the others, but 200 is not a multiple of 6 so it is unavoidable at this size.

Screenshot (the C:\CODE> part is simply the DOS prompt overwriting it after exiting)

• 1 byte: stosb already stores to the es segment. What a dummy.

# Nim, 862274 246 bytes

var
y=33.0
m=newImage(297,198)
c=newContext(m)
r=y/2
for i in 0..5:c.strokeStyle="#FF5C00#FF8C00#FFE900#006400#00008B#4B0082"[i*7..i*7+6];c.lineWidth=y;c.strokeSegment(segment(vec2(0,r),vec2(y*9,r)));r+=y;m.writeFile("l.png")


Using the Nim library pixie. If you have Nim and Nimble installed, a quick nimble install pixie should let you run it perfectly! It outputs to l.png. I am inexperienced with Pixie and Nim, so if I did anything wrong, please let me know. This answer has gone through a lot of revisions, from totally un-golfy to fairly golfed. Bytes were counted using wc -c.

• Welcome to Code Golf! Nice first answer. Jun 27, 2021 at 19:43
• I'm guessing that the 4 space indent on each line is a formatting error, not part of the code, so I've removed it. Feel free to rollback if this is in error :) Jun 27, 2021 at 21:24
• Yes, the indent was accidental. I will edit it. Jun 27, 2021 at 21:49

# SVG, 254 bytes HTML, 181173 165 bytes

By moving from SVG to HTML, I can get away with not specifying a bunch of things and leaving some tags open.

• Saved ~ 70 bytes thanks to Wheat Wizard.
• Saved 8 + 8 bytes thanks to pxeger.

<svg><rect y=0 fill=red /><rect y=1 fill=#fa0 /><rect y=2 fill=#ff0 /><rect y=3 fill=#4f0 /><rect y=4 fill=blue /><rect y=5 fill=#808><style>rect{width:8px;height:1px

After zooming in a lot, you can see

• I don't think you need the xmlns. There should be a tips for golfing in SVG somewhere. Jun 26, 2021 at 16:30
• And technically speaking since SVG is scalable you shouldn't need the viewbox either. It will just look really tiny, but you can scale it up. Jun 26, 2021 at 16:32
• Well, you are more or less right, I guess. If I remove the xmlns, then I think the SVG no longer works as a standalone SVG file (at least not on my browsers) but I can change the file to an HTML file, and then removing xmlns and viewBox are just fine.
– RGS
Jun 26, 2021 at 16:34
• And I don't think you need quotes for a lot of things. The numbers at least you can get by with the quotes removed. I'd have to check on colors. Jun 26, 2021 at 16:34
• I meant fill, not color then. This works for me though (Firefox 90.0b6). Also you can remove the last } in the CSS Jun 26, 2021 at 18:28

# TikZ, 164 bytes

\documentclass[tikz]{standalone}\begin{document}\tikz{\foreach\u\c in{1/purple,2/blue,3/green,4/yellow,5/orange,6/red}{\fill[\c](,\u)rectangle(9,7);}}\end{document}


Pretty simple.

\documentclass[tikz]{standalone}\begin{document}\tikz{ % boilerplate
% For every color and index ascending from the bottom.
\foreach\u\c in{1/purple,2/blue,3/green,4/yellow,5/orange,6/red}{
% Draw a filled rectangle in that color from (0,u) to the upper right corner
\fill[\c](,\u)rectangle(9,7);
}
}\end{document} %boilerplate


• I think the last color should be "violet". While I agree that the OP does not properly specify how the colors should be displayed, it looks more reddish to me.
– user100690
Jun 26, 2021 at 16:11
• @RecursiveCo. tikz calls that color purple, so IMO it's purple. It looks different from the flag, but it definitely still looks purple. Jun 26, 2021 at 16:12
• I would say the green on my flag looks even more different from the provided flag, than the difference between the purples. Jun 26, 2021 at 16:14
• Ok, that's fine! Also note your PFP looks like the pride flag. ;)
– user100690
Jun 26, 2021 at 16:19
• @RecursiveCo. Hmm, it does look somewhat like the pride flag, what a coincidence. Definitely couldn't be because it's June. :P
– user
Jun 26, 2021 at 16:30

# QBasic, 78 bytes

SCREEN 9
FOR i=0TO 5
LINE(0,i*40)-(400,239),c,BF
NEXT
DATA 4,6,14,2,9,5


The orange looks more like brown, in my opinion, but it's the closest QBasic has (it's the dark version of yellow). Here's the output when run on DOSBox at Archive.org:

# Wolfram Language (Mathematica), 142 139 bytes

BarChart[1~Table~6,BarOrigin->Left,ChartStyle->{Purple,Blue,Green,Yellow,Orange,Red},BarSpacing->0,Axes->0>1,ChartBaseStyle->EdgeForm@None]


ChartBaseStyle->EdgeForm@None removes the faint black lines that would normally separate each bar.

-3 bytes thanks to att.

• False->0>1, EdgeForm[None]->EdgeForm@None
– att
Jun 27, 2021 at 23:15
• @att Thanks, appreciate the assist. I've admired many of your clever MMA golfs. Jun 27, 2021 at 23:42

# Python 3, 1088985 80 bytes

print("P3 300 204 9")
for x in range(6):print(*"900960990070009707"[x::6]*10200)


Try it online!

Huge change (-22 chars) thanks to ovs, and -5 more from Wheat Wizard!

The output is an ASCII PPM image file, which is easy to generate but incredibly inefficient space-wise. So even at 300x204 pixels it's too larger for TIO, so it's truncated if you run the code there.

Here's an explanation.

print("P3 300 204 9")                        # Print the PPM header (1)
for x in range(6): ...                       # For each distinct color
... print(*"900960990070009707"[x::6]*10200) # Print 10200 copies of the RGB value (2)


(1) - P3 means it's an RGB image, 300 204 are the dimensions and the last number if the max RGB value 9 in this case so that we can use single digit values.

(2) - The RGB values are single byte since the color depth in the header is given as 9. The string 900960990070009707 holds the 3 digit RGB values for each of the 6 rows.

The image uploader won't accept a PPM file so I loaded it into GIMP and exported it as a PNG to include it.

• And if you reorder the color string, [x//10200*3:][:3] can be shortened to [x//10200::6]
– ovs
Jun 27, 2021 at 22:32
• Nice idea to use the * unpacking in the print line. I never thought of that... Jun 27, 2021 at 22:43
• This should save 5 bytes. Jun 28, 2021 at 7:31
• Great idea to make the loop print all the RGB's for a given color and not just one pixel, thanks! Jun 28, 2021 at 7:42

# JavaScript - 165 bytes

The snippet works in the console.

console.log(...["red","orange","#ff0","green","#00f","violet"].reduce((a,c)=>{a[0]=a[0]+'%c0';return [...a,background:${c};color:${c};padding:35px 400px;];},['']))

### EDIT:

Used Chrome Version 91.0.4472.114 (Official Build) (x86_64) for creating the image.

• Is this browser/version dependent? If yes, better specify it. In Firefox 88.0 looks a bit different: i.stack.imgur.com/aQnLo.png Jun 28, 2021 at 21:02
• @manatwork thanks for drawing my attention to this. I wasn't expecting browser dependency. Jun 28, 2021 at 21:06
• After some investigation, it looks like Firefox defaults to display:inline and Chrome/Edge forces inline-block (ignoring any display we specify). Putting display:inline-block makes both the same (but for golf, display:block is shorter). After some experimentation, my best cross-browser is then console.log(...["f00","f80","ff0","0f0","00f","808"].reduce((a,c)=>{a[0]+='%c ';return[...a,background:#${c};display:block;padding:2%26%]},[''])) For just Firefox we can remove the padding, for just Chrome/Edge we can remove the display. Jun 30, 2021 at 22:43 # Japt, 91 57 bytes The latest entry in my series of making Japt do things it shouldn't be able to do! Ol"%c "²³$,...$fÇÛÆèÆÇ¾broT ò3 ËipadÜA:2%26%;baå®":#  Test it (Open your browser's console. Only tested in Chrome.) ## Original solution $flags$fÇÛÆèÆÇ¾broT ò3 £$V.before(V.cloneNode(),V.style.border=V.style.background='#'+X


Test it

• +1 for putting the flag in Flags. Jun 28, 2021 at 20:56

# C, 69 bytes

I don't have comment privileges yet, so I'm adding this as another answer. This is an improvement on @weirdsmiley's answer.

#define p(s)puts("\e["#s"m█");
main(){p(91)p(31)p(93)p(32)p(34)p(35)}


Try it on godbolt

I added the the \e[ and m to the p macro because it was used 6 times in each macro invocation. Also the \e[0m (which resets the color) can be removed because the color is overwritten again before each puts.

If there was a way to make the 91 and 93 start with a 3, then it might save a few bytes by being able to remove the 3 from the 30s.

I'm new to codegolf, so I'm sure if this is 69 or more bytes (because of the █ character).

# Python 3 with pygame, 166 152 bytes

I wrote this before realizing there was another pygame answer here, but I'm still posting it because I wrote it independently, and it does use a rather different method for getting the colors.

from pygame import*
d=display
s=d.set_mode()
for i in range(6):
draw.rect(s,("red","orange","yellow","green","blue","purple")[i],(0,i*3,32,3))
d.flip()


Edit -14 bytes: Some golfing I did on another pygame answer I just posted helped me golf this one too.

New output:

As the size makes this almost illegible, here's a scaled up version (from the older code, hence the window bar at the top) for better viewing:

# Python 3 + Turtle, 183 bytes

from turtle import*
for x in "red orange yellow green blue violet".split():fillcolor(x);begin_fill();exec("fd(200);lt(90);fd(20);lt(90);"*2);end_fill();rt(90);fd(20);lt(90)
mainloop()


The turtle pointer by default starts at cartesian coordinates (0,0) so the image is in the 4th quadrant.

– user100690
Jun 26, 2021 at 16:51
• @RecursiveCo. never mind. Go post it! Jun 26, 2021 at 16:51
– user100690
Jun 26, 2021 at 16:53
• @RecursiveCo. is not ready yet Jun 26, 2021 at 16:54
• Save yourself some bytes by using "f00 fa0 ff0 4f0 00f 808".split():fillcolor("#"+x) instead of "red orange yellow green blue violet".split():fillcolor(x)
– RGS
Jun 26, 2021 at 18:05

# Pygame, 171 bytes

from pygame import*
d=display
e=99
s=d.set_mode((e*9,e*6))
m=[255]
l=[0]
i=0
for c in[m+l*2,m+[e]+l,m*2+l,l+m+l,l+l+m,[e,0,e]]:draw.rect(s,c,(0,i*e,e*9,e));i+=1
d.update()


Here's the flag generated:

• l=[0];i=0 can be l=i,=[0] (and possibly you can use 255, 0, (e,) instead of [255] [0] [e], but I can't test that easily atm) Jun 26, 2021 at 17:26
• @pxeger Thanks! How does the ,= trick work? And also (e,) should be placed where?
– user100690
Jun 28, 2021 at 7:57
• It's l = (i,) = [0]; the i is unpacked from the list. The (e,) should go in place of [e] in m+[e]+l Jun 28, 2021 at 11:12

# K (oK) + iKe, 79 bytes

w:300
h:200
{(0,x*34;,("red";"#fa0";"#ff0";"#0f0";"#00f";"#808")x;(34;w)#0)}'!6


Try it online!

Draws a static bitmap with 300x200px area.

# C, 171 bytes118 bytes 100 bytes

EDIT: Saved 53 bytes thanks to Wheat Wizard and 14 bytes thanks to ceilingcat

#define p(s) printf(#s"█\e[0m\n");
main(){p(\e[91m)p(\e[31m)p(\e[93m)p(\e[32m)p(\e[34m)p(\e[35m)}


Try on godbolt!

NOTE: Output differs a little according to Godbolt's UI.

Here is the output from my native machine.

• Since the challenge has no required aspect ration you can save length by just using 1 █. Jun 28, 2021 at 14:08
• Ahh! That's good news! Jun 28, 2021 at 14:15
• I also got to learn that having a return type is not necessary in --C90! Jun 28, 2021 at 16:55
• Suggest p(s)puts(#s"█\e[0m") instead of p(s) printf(#s"█\e[0m\n") Jul 1, 2021 at 2:31

# R + ggplot2,150 bytes - https://cran.r-project.org/web/packages/ggplot2/index.html

library(ggplot2);ggplot(data.frame(y=1:6),aes(y=y))+theme_void()+geom_bar(fill=c("#9400D3","#0000FF","#006400","#FFFF00","#FFA500","#FF0000"),width=1)


the output image

# JavaScript, 107 bytes

console.log(%c .repeat(6),...f00fa0ff00f000fb0b.match(/.../g).map(c=>background:#${c};padding:2%26%))  Open your browser's console and run the snippet below. console.clear() console.log(%c .repeat(6),...f00fa0ff00f000fb0b.match(/.../g).map(c=>background:#${c};padding:2%26%))

• console.log(\n%c.padEnd(99).repeat(6),...f00fa0ff00f000fb0b.match(/.../g).map(c=>background:#${c}))? – l4m2 Mar 22 at 5:42 # Swift + UIKit, 216 bytes A function that returns a UIView. func f()->UIView{let v=UIStackView(arrangedSubviews:[UIColor]([.red,.orange,.yellow,.green,.blue,.purple]).map{let v=UIView() v.backgroundColor=$0
return v})
v.axis = .vertical
v.distribution = .fillEqually
return v}


You can't remove the whitespace around the last two = operators.

Result when displayed at full screen on iPhone Xʀ:

# Swift + SwiftUI, 90 bytes

A View. Not a function that returns one -- you could say let prideFlag = /* the answer */, or include the answer directly in a ViewBuilder.

VStack(spacing:0){Color.red
Color.orange
Color.yellow
Color.green
Color.blue
Color.purple}


This is why everyone prefers SwiftUI.

The colors are slightly different, and it doesn't let itself extend into the margins at the top/bottom of the screen, but the result is very similar:

# Desmos, 75 bytes

k=255
C=rgb([k,k,k,0,0,75],[0,165,k,k,0,0],[0,0,0,0,k,k])
[5...0]<y<[6...1]


Result:

Technically, each colored bar has the same area of infinity, but if that's not allowed, then you can simply add a domain restriction at the end of the inequality with the cost of some additional bytes.

Try It On Desmos!

Try It On Desmos! - Prettified

There must be some way to golf that huge rgb() expression, but I don't see a way at the moment...

pride


If you paste pride into an empty expression, Desmos will automatically redirect you to a graph of the pride flag.

You have a chance of getting this graph:

Or this graph:

# Big Unicorn, 54 bytes

C1P9T1P2T1C7P9T3P2C2T3P9T1P2T1C9P9T3P2T3C3P9T1P2T1C8P9


Unicorns sure do love rainbows...

# HTML, 330 245 bytes

Saved 7 bytes thanks to Wheat Wizard!

Saved 78 bytes thanks to Recursive Co.!

<div style="background:red">&nbsp;</div><div style="background:#F60">&nbsp;</div><div style="background:#CF0">&nbsp;</div><div style="background:#0F0">&nbsp;</div><div style="background:blue">&nbsp;</div><div style="background:#C0F">&nbsp;</div>

• For basically every color other than red and blue the hex is going to be shorter. e.g. #f80 is shorter than orange Jun 26, 2021 at 16:19
• @WheatWizard Thanks, I didn't realize you could use 3 character hex codes!
– user
Jun 26, 2021 at 16:20
• Bytesavings: remove doctype, all &nbsp;s, shortening background-colors to background, using hex codes with single letters, removing quotes and using /> to close tags, and no need for the html and body tags.
– user100690
Jun 26, 2021 at 16:21
• @RecursiveCo. Thanks! I tried making the divs empty before, but they don't show up without text inside them, for some reason.
– user
Jun 26, 2021 at 16:27
• @vonjd just click "run code snippet" Jun 26, 2021 at 17:29

# ConTeXt, 112 bytes

It produces PDF, hence scalable, output:

\startMPpage for i=0upto5:draw(0,-i)--(5,-i)withcolor hsvtorgb(i*(25+6i),1,1)withpen pensquare;endfor\stopMPpage


# HTML & CSS — 207 bytes

hr{height:30px;margin:0;border:0}hr{background:red}*+hr{background:orange}*+*+hr{background:yellow}*+*+*+hr{background:green}*+*+*+*+hr{background:blue}*+*+*+*+*+hr{background:violet}
<hr><hr><hr><hr><hr><hr>

• You can change all but last hr in each sequence with *, like *+*+*+*+*+hr{background:violet}. You can save some bytes by writing the entire CSS in one line. Jul 1, 2021 at 22:02
• @manatwork Wow... Didn't know that ;) You helped me saved 15 bytes! Thanks! Jul 1, 2021 at 22:10
• You can change all the hrs in the CSS to *. Also, other than red & blue, using 3 digit hex values for the colours will be shorter. Jul 8, 2021 at 11:17

# R, 8065 45 bytes

image(t(1:6),c=rainbow(12)[c(10,8,4:1)],ax=F)


Try it at rdrr.io!

Original 80-byte version

plot(0,,,1:2,c(1,7),,,,"","",,F);rect(1,7:2,2,6:1,,,rainbow(12)[c(1:4,8,10)],NA)


Try it at rdrr.io!

# Java 8, 191 187 bytes

import java.awt.*;v->new Frame(){public void paint(Graphics g){for(int i=0;i<6;g.fillRect(0,i++*35+30,300,35))g.setColor(new Color(i<3?255:i/5*143,i==1?200:i/2%2*255,i/4*255));}{show();}}


Result:

Explanation:

import java.awt.*;        // Required import for Frame/Graphics/Color
v->                       // Method with empty unused parameter and Frame return
new Frame(){            //  Create a Frame (window for graphical output)
public void paint(Graphics g){
//   Overwrite its default paint method:
for(int i=0;i<6     //    Loop i in the range [0,6):
;               //      After every iteration:
g.fillRect(    //       Draw the rectangle
0,i++*35+30, //       at x,y position 0,35i+30, where the +30 is
//       to account for the title-bar
300,35))     //       of 300 pixels wide and 35 pixels high
//       (so the entire flag is 300x210)
g.setColor(new Color(i<3?255:i/5*143,i==1?200:i/2%2*255,i/4*255));}
//     Change the RGB-color based on i:
//      i=0 (red):    255,  0,  0
//      i=1 (orange): 255,200,  0
//      i=2 (yellow): 255,255,  0
//      i=3 (green):    0,255,  0
//      i=4 (blue):     0,  0,255
//      i=5 (violet): 143,  0,255
{                       //   And in an inner initializer block:
show();}}              //    Show the frame


# Batch, 71 bytes

@set n=m█^&@echo ␛[m
@echo ␛[31%n%␛[33%n%␛[93%n%␛[32%n%␛[34%n%␛[35%n%


␛` represents the nonprintable character.