Create a Pride Flag

Question

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.

Output

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.

Answer 1

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.

Answer 2

Vyxal sḢ, 36 bytes

`<p «⟇=øḢ-÷¥:#%7;₃ṁ: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 `<p style=background-color:#%7;margin: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.

Answer 3

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:
        ; Return to DOS, leaving a pretty but annoying flag on
        ; 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.

Answer 4

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.

Answer 5

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

Answer 6

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

---

Bonus Answer, 5 bytes

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:

Answer 7

QBasic, 78 bytes

SCREEN 9
FOR i=0TO 5
READ c
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:

Answer 8

SVG, 254 bytes HTML, 181 173 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

Answer 9

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.

Answer 10

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:

Answer 11

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:

Answer 12

Nim, 862 274 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.

Answer 13

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

Answer 14

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 4^th quadrant.

Answer 15

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.

Answer 16

Python 3, 108 89 85 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.

Answer 17

C, 171 bytes 118 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.

Answer 18

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.

Answer 19

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ÇÛÆèÆǾb`roT ò3 Ëi`padÜA:2%26%;baå®":#

Test it (Open your browser's console. Only tested in Chrome.)

Original solution

$flags$
`fÇÛÆèÆǾb`roT ò3 £$V.before(V.cloneNode(),V.style.border=V.style.background='#'+X

Test it

Answer 20

Uiua, 52 bytes

⍉⍉↯400⍉⬚50▽[]÷4[4_0_0 4_2_0 4_4_0 0_4_0 0_0_4 3_0_4]

Try it online!

               ÷4[4_0_0 4_2_0 4_4_0 0_4_0 0_0_4 3_0_4]   # Set up the colours 
                                                           (RGB values between 0 and 1)
         ⬚50▽[]                                          # Make an array of 50 of each RGB value
       ⍉                                                # Transpose the array
   ↯400                                                  # Repeat each element 400 times 
⍉⍉                                                     # Transpose to the correct format
                                                          (300x400x3)

A couple of bytes can be saved by making the image 40px by 30px. This can be done by removing a zero from each of "400" and "50" in the code above.

However, the result is not great:

Answer 21

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:

Answer 22

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

Answer 23

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

Answer 24

Big Unicorn, 54 bytes

C1P9T1P2T1C7P9T3P2C2T3P9T1P2T1C9P9T3P2T3C3P9T1P2T1C8P9

Unicorns sure do love rainbows...

Answer 25

dc + QOI, 116 bytes

16i[qoif]P0dPP1P32P0ddPPPCCP3P0P5AP[A7[FDP1-d0<R]dsRxF0Pk]ddddddxFEPFFP80P0PxFEPFFdPP0Px7APx6DPx5APx0ddddddPPPPPPP1P

Outputs a 306x204 image to stdout in the Quite OK Image Format (shown here converted to png):

QOI images can be viewed with ImageMagick, among other software:

dc -e"16i[qoif]P0dPP1P32P0ddPPPCCP3P0P5AP[A7[FDP1-d0<R]dsRxF0Pk]ddddddxFEPFFP80P0PxFEPFFdPP0Px7APx6DPx5APx0ddddddPPPPPPP1P" | magick display 

Answer 26

GameBoy Color machine code, 323 bytes

00000000  22 0d 20 fc c9 1f 00 1f  02 ff 03 e0 03 00 7c 10  |". ...........|.|
00000010  40 00 00 00 00 00 00 00  00 00 00 00 00 00 00 00  |@...............|
00000020  00 00 00 00 00 00 00 00  00 00 00 00 00 00 00 00  |................|
*
00000100  3e 88 e0 68 1e 06 2e 05  2a e0 69 2a e0 69 f0 68  |>..h....*.i*.i.h|
00000110  c6 06 e0 68 1d 20 f1 3e  01 e0 4f 11 06 20 21 00  |...h. .>..O.. !.|
00000120  98 4a c7 3c 1d 20 fa 76  00 00 00 00 00 00 00 00  |.J.<. .v........|
00000130  00 00 00 00 00 00 00 00  00 00 00 00 00 00 00 00  |................|
00000140  00 00 00 c0                                       |....|
00000144

The code could be a lot shorter, but a Gameboy ROM needs the value 0xC0 at byte 0x143 to indicate it's a GameBoy Color ROM. The ROM only works on Gearboy.

While the GBC only had screen resolution of 160 x 144 pixels, Gearboy quadruples it by default, so that each pixel is 4 times as large.

The binary was generated from this assembler code:

; ONLY WORKS ON GEARBOY

DEF rVBK EQU $ff4f
DEF rBCPS EQU $ff68
DEF rBCPD EQU $ff69

SECTION "Rst $0", ROM0[$0]

; @param a value
; @param hl pointer
; @param c count
MemsetSmall::
    ld [hli], a
    dec c
    jr nz, MemsetSmall
    ret

SECTION "Data", ROM0[$5]
Colors:
    ; 15-bit RGB values
    ;   BBBBB GGGGG RRRRR
    DW %00000_00000_11111
    DW %00000_10000_11111
    DW %00000_11111_11111
    DW %00000_11111_00000
    DW %11111_00000_00000
    DW %10000_00000_10000


SECTION "Entrypoint",ROM0[$100]
Entrypoint:
    ; set background palette
    ld a, %10001000
    ldh [rBCPS], a

    ld e, 6
    ld l, LOW(Colors)
.load_color
    ld a, [hli]
    ldh [rBCPD], a
    ld a, [hli]
    ldh [rBCPD], a
    ; skip other 3 colors of this palette
    ldh a, [rBCPS]
    add 6
    ldh [rBCPS], a
    
    dec e
    jr nz, .load_color

    ld a, 1
    ldh [rVBK], a

    ld de, (32 << 8) | 6
    ld hl, $9800

.draw_stripe
    ld c, d
    rst MemsetSmall
    inc a

    dec e
    jr nz, .draw_stripe

    halt


SECTION "HEADER", ROM0[$0143]
    DB $c0

Answer 27

Uiua, 34 33 bytes

/⊂≡↯34≡↯300÷2°⋯↯6_3_2⋯35972489602

Try it!

I noticed that the existing Uiua solution used a lot of bytes storing the RGB values of the 6 colors, so I decided to compress those, which is the main reason this is shorter. I chose a color palette that uses the digits 0, 1, and 2 to make the colors:

       red        orange       yellow     green      blue       purple
color  [2 0 0]    [2 1 0]      [2 2 0]    [0 2 0]    [0 0 2]    [1 0 2]
half   [1 0 0]    [1 0.5 0]    [1 1 0]    [0 1 0]    [0 0 1]    [0.5 0 1]
hex    #ff0000    #ff8000      #ffff00    #00ff00    #0000ff    #8000ff

Using the 0/1/2-triplet representation of each color, I converted each digit to binary, padded to 2 digits, flattened everything, and converted back to decimal, yielding 35,972,489,602.

This is not the most optimal encoding possible by a long shot, but I believe it is the most viable for Uiua because it makes the decoding very simple. If Uiua had base-conversion for non-binary bases built-in, I could use base-3, yielding 269,917,418, which would save two bytes on the integer but cost three on the decoding, so even in that hypothetical binary would still be a byte shorter.

To generate the actual image from the 6 colors, the program goes through each color and for each makes a length-34 list of length-300 lists of that color. It then flattens everything by 1 level, yielding a matrix of triplets, which is how Uiua does RGB images.

Here's the output: (resized to take up less space on the page)

Answer 28

Python 3, 172 160 bytes

from curses import*
s=initscr();start_color();y=1
for x in[9,208,11,10,12,13,0]:w=newwin(2,35,y*2,0);init_pair(y,1,x);w.bkgd(' ',color_pair(y));w.refresh();y+=1

This code uses the Python curses library to display the flag. It loops through XTerm colour values ([9,208,11,10,12,13,0]), creating a new curses window for each band of the flag. The trailing 0 is to ensure the flag displays properly when it is run.

Some optimisations:

• Tabs instead of spaces for indents
• Making use of the semi-colon for combining multiple lines into one
• Uses curses imports directly

I still feel there are some slight improvements to be made here, especially with y.

Previous version

import curses as c
s=c.initscr();c.start_color();y=1
for x in [9,208,11,10,12,13,0]:
    w=c.newwin(2,35,y*2,0);c.init_pair(y,1,x);w.bkgd(' ',c.color_pair(y));w.refresh();y+=1

Answer 29

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>

Answer 30

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