the image required for the challenge

Above, you can see an image full of different colours.

Click here for a hex-dump.

One possible way to generate this image is by using a linear gradient rotated 90 degrees, however, this may not be the only way.

Your task is to create a self-contained program that takes no input, and outputs an image with the same RGBA pixels as the above image, and in the exact same location, with the output image being in a file format that was created before this challenge, with the dimensions of the image being 4096x4096px, same as the original.

The shortest such program, scored in bytes, is the winner.

Cheating and standard loopholes are not allowed.

  • 2
    \$\begingroup\$ Related \$\endgroup\$ Commented Dec 27, 2016 at 20:34
  • 1
    \$\begingroup\$ Earlier versions of this challenge in the sandbox weren't code-golf, but this version is. I'll go fix the tags for the OP. \$\endgroup\$
    – user62131
    Commented Dec 28, 2016 at 7:55
  • \$\begingroup\$ What should the dimensions of the image be? \$\endgroup\$
    – user41805
    Commented Dec 28, 2016 at 8:36
  • 1
    \$\begingroup\$ I have already checked. Using 'save image' in the browser, the saved png file has no alpha channel. Probably the PPCG site modified your original image. But in fact there is no image to compare with (and I will not parse the hex dump to get the image back) \$\endgroup\$
    – edc65
    Commented Dec 28, 2016 at 21:30
  • 2
    \$\begingroup\$ How is this thing generated, please properly define this better. \$\endgroup\$ Commented Dec 29, 2016 at 19:47

4 Answers 4


Processing, 197 195 bytes

void setup(){size(255,255);int r=255,a=r,g=0,b=0,i,j,k;background(a);for(i=0;i<a;k=i<43?g+=6:i<85?r-=6:i<a/2?b+=6:i<170?g-=6:i<213?r+=6:a>1?b-=6:0,i++)for(j=0;j<a;point(i,j++))stroke(r,g,b,a-j);}

This outputs the image in a 255x255 sized window


void setup(){            //this is required
  size(255,255);         //size of sketch
  int r=255,a=r,g=0,b=0,i,j,k; //declaring our vars
  background(a);         //set the background colour as white
  //for-loop for the x-coordinates, it also increments/decrements rgb values
  //  based on the x-coordinate
    //for-loop for the y-coordinate (alpha)
    for(j=0;j<a;point(i,j++))   //2) then draw the point at the location
      stroke(r,g,b,a-j);        //1) set the colour of point

enter image description here


  • Used int instead of float
  • 3
    \$\begingroup\$ Where is update? \$\endgroup\$
    – Pavel
    Commented Jan 8, 2017 at 8:00

Python, 407 404 381

I just golfed the svg

d='<svg HBdefsTg"BS G"N:redM0YyellowM0.17Y#00ff00M0.33YcyanM0.5YblueM0.67Y#ff00ffM0.83YredM1"/B/LTw" x1Ex2Ey1Ey2="1"BS G"N:white;F:0" O"0YwhiteM1"/B/LB/defsUgVUwVB/svg>'
for R in zip("VTBUEYMNFGOHSLX",')" xEyEH/|BL id="|><|><rect fill="url(#|="0" |"/><S G"N:|;F:1" O"|S-color|S-opacity|style=|offset=|widthXheightX|stop|linearGradient|="4096" '.split('|')):d=d.replace(*R)
print d

A raster image can be generated using imagemagick :

~$ python snippet.py |convert svg:- hue.png
~$ file hue.png 
hue.png: PNG image data, 4096 x 4096, 8-bit/color RGBA, non-interlaced
  • 1
    \$\begingroup\$ @TheBitByte the generated SVG starts with, <svg width="4096" height="4096" > so yes \$\endgroup\$
    – dieter
    Commented Dec 29, 2016 at 10:40

HTML/CSS, 166 bytes

p{width:4096px;height:4096px;background:linear-gradient(0deg,#FFF,#FFF0),linear-gradient(90deg,red,#FF0 18.513%,lime 34.256%,aqua 50%,blue 65.43%,#F0F 81.199%,red)

Requires a browser that supports #RGBA colours, such as Firefox 49, Chrome 52 or Safari 9.1. I've taken the stops from the original SVG and rounded them to 5sf as that shouldn't make any difference on a 4096 pixel image, but if it does, they could be restored at a small cost. On the other hand, if rounding to either 4sf or whole pixels is OK, then that saves me a further 4 bytes.

  • 1
    \$\begingroup\$ @TheBitByte Sorry I didn't actually try it on Chrome or Safari, I just looked up the compatibility info which suggested that Chrome 52 should work. \$\endgroup\$
    – Neil
    Commented Jan 4, 2017 at 20:16

R, 95 91 88 bytes

frame();n=4096;for(i in 1:n){l=matrix(NA,n,n);l[,i]=1:n;image(l,a=T,c=rainbow(n,s=i/n))}

When creating plots in while running an R script, by default they are saved to file, either as PNG or PDF. My PC struggles creating the 4096x4096 pixel plot taking up gigs of RAM, but if I change n to 256 it matches the correct output.

There are probably some bytes to be saved by making the arguments of image shorter, but I'll look at that when I get the supposed output.

enter image description here


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