Carpet an Airport

Question

In 2015 the Portland International Airport began the replacement of their iconic carpet. I want you to write a program to draw their old carpet in as few bytes as possible.

The carpet:

Specifications

• Here is a link to a scalable pdf image of one tile. Your output should match the relative dimensions and placement of that image.

• All colors in your final image should be within 15 of every RGB value in the specified image. These are listed below for your convenience.

              Red   Green Blue
  Teal:       0,    168,  142
  Magenta:    168,  108,  185
  Orange:     247,  58,   58
  Light Blue: 90,   166,  216
  Dark Blue:  0,    77,   117
  

• Your output must be at least 150x150 pixels and should be square. If you choose to output in a scalable format like a vector image you should match the image exactly.

• You may output the image in any preexisting image format.

• This is code-golf so you should aim to minimize the number of bytes in your code.

Answer 1

Tikz, 725 693 681 671 bytes

Some significant improvements can be made to this answer. If you would like to make major golfs then you should post your own answer with your modified version. For minor improvements that I just missed, and don't require large explanation, feel free to comment them. I would like to reward major improvements, and I will definitely upvote any answer that beats this.

---

\documentclass{standalone}\usepackage{xcolor,tikz}\begin{document}\tikz[line width=20,every node/.style={minimum size=20}]{\definecolor{t}{RGB}{0,168,142}\definecolor{m}{RGB}{168,99,185}\definecolor{o}{RGB}{247,58,58}\definecolor{b}{RGB}{90,166,216}\definecolor{d}{RGB}{40,77,117}\fill[t](-7.5,-7.5)rectangle(7.5,7.5);\draw(-1,0)node[fill=o]{};\foreach\x in{1,...,7}{\draw(-\x,-1)node[fill=m]{};\draw(0,\x)node[fill=b]{};}\foreach\x in{1,...,3}{\draw(\x,\x)node[fill=d]{};\draw(3+\x,-3-\x)node[fill=d]{};\draw(-3-\x,3+\x)node[fill=d]{};\draw(4+\x,1)node[fill=o]{};}\draw[d](.65,0)--(7.35,0);\draw[d,dash pattern=on20off8.5on162.5off8.5](0,-7.35)--(0,3.35);}\end{document}

Try it Online!

Explanation

A good deal of the code is a wrapper:

\documentclass{standalone}\usepackage{xcolor,tikz}\begin{document}\tikz{...}\end{document}

This is a slight variation on the standard Tikz wrapper in that it also has the line \usepackage{xcolor} so that we can create the colors properly.

The first thing that is done is line width=20,every node/.style={minimum size=20}] which sets the lines and nodes to be the proper size.

Once that is done we define the colors we will be using for the various parts of the image:

\definecolor{t}{RGB}{0,168,142}\definecolor{m}{RGB}{168,99,185}\definecolor{o}{RGB}{247,58,58}\definecolor{b}{RGB}{90,166,216}\definecolor{d}{RGB}{40,77,117}

Now that everything is set up we paint the background to our canvas teal:

\fill[t](-7.5,-7.5)rectangle(7.5,7.5);

(I wont include an image of this because it is just a teal square, but I will be including images of each other step)

The first node we add is the orange node just left of the center of the canvas.

\draw(-1,0)node[fill=o]{};

Now we will draw the light blue and magenta nodes. There are 7 blue nodes and 4 blue nodes, but we can draw extra nodes that will be covered up by lines later on so we will draw 7 of each.

\foreach\x in{1,...,7}{
    \draw(-\x,-1)node[fill=m]{};
    \draw(0,\x)node[fill=b]{};
}

Now we will draw all the groups of 3 dots using a single \foreach loop

\foreach\x in{1,...,3}{\draw(\x,\x)node[fill=d]{};\draw(3+\x,-3-\x)node[fill=d]{};\draw(-3-\x,3+\x)node[fill=d]{};\draw(4+\x,1)node[fill=o]{};}

Now we draw the right line. This line will be a simple line with offsets of .35 in each direction to match the size of a node.

\draw[d](.65,0)--(7.35,0);

Now we must draw in the dark blue lines and squares on the x-axis. We will draw them with one line using a custom dash pattern.

This pattern is [dash pattern=on20off8.5on162.5off8.5] This creates a square with a long solid tail. Our line will start from the bottom and will not quite cover 2 cycles of the pattern.

\draw[d,dash pattern=on20off8.5on162.5off8.5](0,-7.35)--(0,3.35);

And now we are done.

Answer 2

Pure HTML, 873 bytes

<table width=152 height=152 bgcolor=#0a8><tr><td colspan=7><td bgcolor=#5AD><tr><td><td bgcolor=#057><td colspan=5><td bgcolor=#5AD><tr><td><td><td bgcolor=#057><td colspan=4><td bgcolor=#5AD><tr><td><td><td><td bgcolor=#057><td><td><td><td bgcolor=#5AD><tr><td colspan=7><td bgcolor=#057><td><td><td bgcolor=#057><tr><td colspan=7><td bgcolor=#057><td><td bgcolor=#057><tr><td colspan=7><td bgcolor=#057><td bgcolor=#057><td><td><td><td bgcolor=#F33><td bgcolor=#F33><td bgcolor=#F33><tr><td colspan=6><td bgcolor=#F33><td bgcolor=#057><td colspan=7 bgcolor=#057><tr><td bgcolor=#A6B><td bgcolor=#A6B><td bgcolor=#A6B><td bgcolor=#A6B><td bgcolor=#A6B><td bgcolor=#A6B><td bgcolor=#A6B><td rowspan=6 bgcolor=#057><tr><td><tr><td><tr><td colspan=11><td bgcolor=#057><tr><td colspan=12><td bgcolor=#057><tr><td colspan=13><td bgcolor=#057><tr><td colspan=7><td bgcolor=#057>

HTML + CSS, 625 bytes

#l{background:#5AD}th{background:#057}#o{background:#F33}#m>td{background:#A6B

<table width=152 height=152 bgcolor=#0A8><tr><td colspan=7><td id=l><tr><td><th><td colspan=5><td id=l><tr><td><td><th><td colspan=4><td id=l><tr><td><td><td><th><td><td><td><td id=l><tr><td colspan=7><th><td><td><th><tr><td colspan=7><th><td><th><tr><td colspan=7><th><th><td><td><td><td bgcolor=#F33><td bgcolor=#F33><td bgcolor=#F33><tr><td colspan=6><td bgcolor=#F33><th><th colspan=7><tr id=m><td><td><td><td><td><td><td><th rowspan=6><tr><td><tr><td><tr><td colspan=11><th><tr><td colspan=12><th><tr><td colspan=13><th><tr><td colspan=7><th>

Answer 3

literal PNG file, 283, 234 227 bytes

EDIT: Using online image compression service https://compress-or-die.com/, this went down another 7 bytes.

albn@alexhij:~/tmp$ ls -l carpet3.png
-rw-r--r-- 1 albn albn 227 15. Feb 12:01 carpet3.png
albn@alexhij:~/tmp$ base64 carpet3.png 
iVBORw0KGgoAAAANSUhEUgAAAJgAAACYBAMAAADq7D0SAAAAD1BMVEUAqI4ATXWobLn3Ojpapthl
S7nNAAAAj0lEQVR4Ae3ThRHCQBQGYVqgBVq4Fui/Jt4ILks8/80uLvkyOTlkd67EILHojtWEyxQT
Sw6uFS5TTCw/uFa+TDGx/PjS3z+KiS2GcRtgzIqJdboDPomteniCxMTyatXtMiExMcB22amCJ7wG
MbHpBWBiYmJiYmJwAjGx/ncAn0VMrP8dwL+KieXHFyImltoF6oWZiblRTNQAAAAASUVORK5CYII=

The 227 bytes are the actual size of the binary file carpet.png. When encoded in base64, as displayed in the quoted block above, it is a few bytes longer (308 bytes). Encapsulating that in an html snippet that renders the image rightaway will add another few bytes:

HTML, 414, 343, 336 bytes

<img src=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJgAAACYBAMAAADq7D0SAAAAD1BMVEUAqI4ATXWobLn3OjpapthlS7nNAAAAj0lEQVR4Ae3ThRHCQBQGYVqgBVq4Fui/Jt4ILks8/80uLvkyOTlkd67EILHojtWEyxQTSw6uFS5TTCw/uFa+TDGx/PjS3z+KiS2GcRtgzIqJdboDPomteniCxMTyatXtMiExMcB22amCJ7wGMbHpBWBiYmJiYmJwAjGx/ncAn0VMrP8dwL+KieXHFyImltoF6oWZiblRTNQAAAAASUVORK5CYII

Edit: I removed the quotes and closing > as Shaggy suggested. Also compressed the image down another 17, 24 bytes

Answer 4

Mathematica, 285 bytes

e={1,1};r=RGBColor["#"<>#]&;c=Cuboid;s=c[3#-e,3#+e]&;a=Array;b=a[s[{1,-1}#]&,3,#]&;Graphics@{r@"0a8",c[-23e,23e],r@"a6b",a[s@{-#,-1}&,7],r@"f33",a[s@{#,1}&,3,5],s@{-1,0},r@"5ad",a[s@{0,#}&,4,4],r@"057",a[s[e#]&,4,0],b@4,b[-6],s@{0,-7},{-1,2}~c~{1,10},{-1,-2}~c~{1,-19},{2,-1}~c~{22,1}}

Easier to read:

 1  c = Cuboid; e = {1, 1};
 2  s = c[3 # - e, 3 # + e] &;
 3  a = Array; b = a[s[{1, -1} #] &, 3, #] &;
 4  r = RGBColor["#" <> #] &; 
 5  Graphics@{
 6   r@"0a8", c[-23 e, 23 e],
 7   r@"a6b", a[s@{-#, -1} &, 7],
 8   r@"f33", a[s@{#, 1} &, 3, 5], s@{-1, 0},
 9   r@"5ad", a[s@{0, #} &, 4, 4],
10   r@"057",
11    a[s[e #] &, 4, 0], b@4, b[-6], s@{0, -7},
12    {-1, 2}~c~{1, 10}, {-1, -2}~c~{1, -19}, {2, -1}~c~{22, 1}
13  }

Lines 1–3 define short names for functions, the most important of which is s which draws a square centered at the coordinates it receives (really 3 times its coordinates, for appropriate scaling). Line 4 defines a color function using Mathematica's "shortcut" RGB system: RGBColor["#xyz"], where xyz are hexadecimal digits, stands for RGBColor[{17x, 17y, 17z}] (so that each coordinate has 16 equally spaced options running from 0 to 255). The first commands on lines 6–10 switch the current color, using the shortcut colors that are closest to the designated five colors (no value is off by more than 8 when we round to the nearest multiple of 17).

Line 6 draws the large teal square. Line 7 draws the line of magenta squares, Line 8 draws the line of orange squares and the single orange square. Line 9 draws the line of light blue squares. Line 11 draws the three diagonal lines of dark blue squares, as well as the single dark blue square at the bottom. Finally, line 12 draws the three long dark blue rectangles. The output is below:

(Golf tip: the command Cuboid, which is intended for 3d graphics objects, works just fine in 2d and is shorter than Rectangle.)

Answer 5

TikZ, 671>439>432>377>334>311 (282) bytes

My original answer started from the code that Ad Hoc Garf Hunter provided above, cf. Tikz, 671 bytes.
I took this code and my knowledge about general LaTeX to make some improvements to the length of it, saving a bit more than 1 out of every 3 bytes.
However, two years later, I returned to this problem and gave it another try by starting from scratch.

---

Here's my all new, personal solution. Note that the solution uses non-printable single-byte characters. In the depiction of this solution, they are replaced by circled characters. The circled characters can be mapped by 0x(circled character) with the help of an ASCII table.

\documentclass[tikz]{standalone}\begin{document}\tikz{\let~\def~Ⓒ{;\color[HTML]}~④{)rectangle++(.7}~Ⓕ{\fill(}~~#1#2{Ⓕ0x#1,0x#2④,.7);}Ⓒ{00a88e}Ⓕ.85,.85④+14.3,15)Ⓒ{004d75}~2E~3D~4C~BB~AA~99~88~C4~D3~E2~81Ⓕ8,2④,5.7)(8,9④,2.7)(9,8④+6,.7)Ⓒ{5aa6d8}~8F~8E~8D~8CⒸ{f73a3a}~D9~E9~F9~78Ⓒ{a86cb9}~17~27~37~47~57~67~77}\stop

Try it Online!

Output

Explanation

Here's a more readable version of my personal new solution.

01: \documentclass[tikz]{standalone}\begin{document}\tikz{
02: \let~\def~Ⓒ{;\color[HTML]}~④{)rectangle++(.7}~Ⓕ{\fill(}
03: ~~#1#2{Ⓕ0x#1,0x#2④,.7);}
04: Ⓒ{00a88e}Ⓕ.85,.85④+14.3,15)
05: Ⓒ{004d75}~2E~3D~4C~BB~AA~99~88~C4~D3~E2~81
06: Ⓕ8,2④,5.7)(8,9④,2.7)(9,8④+6,.7)
07: Ⓒ{5aa6d8}~8F~8E~8D~8C
08: Ⓒ{f73a3a}~D9~E9~F9~78
09: Ⓒ{a86cb9}~17~27~37~47~57~67~77
10: }\stop

Let's start with the wrapper in lines 1 and 10. This is basically the standard TikZ-wrapper.

In line 2, we assign a shorthand (~) to the command \def within the TikZ-scope. Note that the only available printable single-character command ~ (catcode=13) is now defined as a command within the \tikz{} scope. This helps us to define even more shorthands in a very compact way. We then assign a shorthand to \color that allows us to change the color that we use for \fill-commands later on. As we have five colors in total, we will use the command Ⓒ five times. Note that Ⓒ for \color is a mnemonic declaration. We assign a shorthand to a string that will be used quite a lot to draw rectangles. ④ for rectangle (with four sides) is a mnemonic assignment as well. It contains the closing bracket for the first and the opening bracket for the second coordinate as well as the most common value for the x-value of the second coordinate. In the end of the line, we define a shorthand for the \fill command. The assignment is again mnemonic: Ⓕ. Note that all of the three assignments to "circled characters" are really assignments to non-printable single-byte control characters (0xY, Y standing for the corresponding circled character, being interpreted as ASCII hex value). These characters are all active (catcode=13) characters. All those assignments are displayed as mid-dots in the "Try It Online"-version at Overleaf. This renders an actually sort of "unreadable" (but completely working!) code view that can be ameliorated if you just copy the code to another editor, e.g. here.

In line 3, we continue to redefine ~ and, from now on, use this command to draw little squares. We benefit from the fact that the whole tile can be divided in 15 by 15 squares which is less than 16 by 16. Therefore, we can use hexadecimal one-digit numbers to refer to a unique square with only two characters.

In lines 4 and 6, we draw a huge square in teal and some rectangles, more exactly: all those not being square, in dark blue. We don't need to pick the color dark blue, since this happens in line 5, see below.

Lines 5, 7, 8, and 9 draw all the squares in four different colors. As we pick dark blue as our color for the squares in line 5, we can keep it for the rectangles, see above. Thus, we only have to use the Ⓒ-command five times.

We can make it even shorter!

If you visited the "Try It Online"-link, you might have found a "hacky" version with 29 bytes less. This version produces the same output. However, it throws errors and has a white border. Therefore, the "hacky" version is non-competing. It differs from the version described above by two things: (A) We don't use \begin{document}. This produces errors, but we obtain an output nevertheless. We can save 16 bytes. (B) In the "hacky" definition of the final version of ~, ~ calls itself. This helps us to save a lot of ~ characters in lines 6, 7, 8, and 9 (10+3+3+6 = 22, to be exact). However, we will have to introduce the ~ character in line 3 and one pair of curly braces for each of the lines 6, 7, 8, and 9 to make this work, leaving us with a difference of 13 bytes.

Comments regarding Ad Hoc Garf Hunter's solution

I did not like the fact that I didn't fully understand the dash pattern that the other solution is using. Also, I tried to avoid nodes and lines by concentrating on rectangles. Furthermore, I believe in the metric system. Thus, I refrained from using other units than mm or cm. ;-) I believe that my second approach is much cleaner now.

Improvements

Please feel free to comment and help me save more bytes.

Literal PNG file, 223 bytes

I've created this PNG file from my TikZ output.

Answer 6

Python, 420

from PIL import Image,ImageDraw
B=0,77,117
I=Image.new('RGB',(300,300),(0,168,142))
r=ImageDraw.Draw(I).rectangle
for x,y,c in['7172737a98cde670123456bcd70112233456666778888888bcde23232323331111300000003333'[x::26]for x in range(26)]:exec'r([W,W,14+W,14+W],[(168,108,185),(247,58,58),(90,166,216),B][%s]);'.replace('W','2+20*0x%s')%(x,y,x,y,c)
r([162,142,296,156],B)
r([142,82,156,136],B)
r([142,162,156,276],B)
I.show()

Answer 7

T-SQL, 680 bytes

CREATE TABLE g(c INT,s geometry)
INSERT g SELECT c,geometry::Point(x,y,0).STBuffer(.4)
FROM(VALUES(1,7,8),(1,13,9),(1,14,9),(1,15,9),(2,2,14),(2,3,13),(2,4,12)
 ,(2,8,8),(2,9,9),(2,10,10),(2,11,11),(2,8,1),(2,12,4),(2,13,3),(2,14,2)
 ,(3,1,7),(3,2,7),(3,3,7),(3,4,7),(3,5,7),(3,6,7),(3,7,7)
 ,(35,8,12),(35,8,13),(35,8,14),(35,8,15))a(c,x,y)
INSERT g SELECT c,geometry::STLineFromText('LINESTRING('+v+')',0).STBuffer(.4)
FROM(VALUES(0,'.8 .8,15.2 15.2'),(2,'8 2,8 7'),(2,'8 9,8 11'),(2,'9 8,15 8'))a(c,v);
WITH t AS(SELECT 4n UNION ALL SELECT n+1FROM t WHERE n<34)
INSERT g SELECT n,geometry::Point(1,1,0).STBuffer(.01)FROM t;
SELECT c,geometry::UnionAggregate(s.STEnvelope())FROM g GROUP BY c

• Line breaks added for readability.
• Make sure to DROP TABLE g after you run it, I didn't include that in the byte total.
• Uses geospatial features supported in SQL 2008 and higher.

So, this doesn't entirely satisfy the color requirement, but as I explain below, that's not fully under my control. Let's call this the faded carpet version.

Formatted/commented code and output:

Notes:

• The points (and lines) in the table are expanded into a circle with STBuffer, then squared off with STEnvelope.
• The SQL spatial results pane has a fixed color palette, so I am limited in what colors I can display (no bright red, etc)
• To get the colors I want, I have to select them in the correct order. Column c in my table defines the grouping order; the large teal square is group 0, the 4 blue squares are group 35.
• To get multiple objects of the same color, I have to combine them into a single object, that's the purpose of the UnionAggregate() function at the end.
• To "skip ahead" through the color palette to get to the light blue, I have to insert 31 dummy objects that are big enough to get assigned a color, but small enough not to show.

To see more strange uses of SQL spatial features, see draw the biohazard symbol and draw the Easter Bunny.

Answer 8

HTML/SVG, 550 542 521 bytes

<svg><path fill=#0a8 d="M0 0h152v152H0z"/><path fill=#5ad d="M72 2h8v8h-8zm0 10h8v8h-8zm0 10h8v8h-8zm0 10h8v8h-8z"/><path fill=#057 d="M12 12h8v8h-8zm10 10h8v8h-8zm10 10h8v8h-8zm40 10h8v28h-8zm0 30h8v8h-8zm10-10h8v8h-8zm10-10h8v8h-8zm10-10h8v8h-8zM82 72h68v8H82zM72 82h8v58h-8zm0 60h8v8h-8zm40-30h8v8h-8zm10 10h8v8h-8zm10 10h8v8h-8z"/><path fill=#f33 d="M62 72h8v8h-8zm60-10h8v8h-8zm10 0h8v8h-8zm10 0h8v8h-8z"/><path fill=#a6b d="M2 82h8v8H2zm10 0h8v8h-8zm10 0h8v8h-8zm10 0h8v8h-8zm10 0h8v8h-8zm10 0h8v8h-8zm10 0h8v8h-8z"

Answer 9

HTML, 366 bytes

Sunday got a Base64 answer up while I was still working on this; if s/he chooses to use it then I'll delete this answer.

<img src=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJgAAACYBAMAAADq7D0SAAAAD1BMVEUAqI4ATXWobLlaptj3OjrqGXAuAAAAp0lEQVRo3u3YQQqFMAxFUbeQLbiFbsH9r8k3y8CmTiKm7b2Dwv/CgUAD4jF3TYGBRdgKmRqPCQa28gaMZ20KDGz5DQhnbQoMTG2wAcPR/ScY2HeYVw4zBQYWYDUvbRLWFS/lBxhYhM3bpXzMcWBgEVa5U70cpsDAnkf1FxcwMDAwMLBczP8DAwuwmpc2HzMFBhY8qHlp8zFTYGCdyn8GKrhOYBtjv3QDvf+Zic+8bOsAAAAASUVORK5CYII

If the Base64 string on it's own is a valid answer then that's just 335 bytes:

iVBORw0KGgoAAAANSUhEUgAAAJgAAACYBAMAAADq7D0SAAAAD1BMVEUAqI4ATXWobLlaptj3OjrqGXAuAAAAp0lEQVRo3u3YQQqFMAxFUbeQLbiFbsH9r8k3y8CmTiKm7b2Dwv/CgUAD4jF3TYGBRdgKmRqPCQa28gaMZ20KDGz5DQhnbQoMTG2wAcPR/ScY2HeYVw4zBQYWYDUvbRLWFS/lBxhYhM3bpXzMcWBgEVa5U70cpsDAnkf1FxcwMDAwMLBczP8DAwuwmpc2HzMFBhY8qHlp8zFTYGCdyn8GKrhOYBtjv3QDvf+Zic+8bOsAAAAASUVORK5CYII

Answer 10

HTML/SVG + JavaScript (ES6), 500 499 bytes

An extra > is required in order for this to function as a Snippet, see this Fiddle for actual code.

[[t="5ad",2],[t,o=12],[t,p=22],[t,q=32],[,o,o],[,p,p],[,q,q],[,42,,28],[],[,v=62,s=82],[,52,92],[,42,102],[,,s,,68],[,s,,58],[,142],[,112,112],[,122,122],[,132,132],[t="f33",,v],[t,v,122],[t,v,132],[t,v,142],[t="a6b",s,2],[t,s,o],[t,s,p],[t,s,q],[t,s,42],[t,s,52],[t,s,v],["0a8",0,0,152,152]].map(x=>a(x[0],x[1],x[2],x[3],x[4]),a=(f="057",y=72,x=72,h=8,w=8)=>(c.after(r=c.cloneNode()),r.id++,r[s="setAttribute"]("fill","#"+f),r[s]("x",x),r[s]("y",y),r[s]("width",w),r[s]("height",h)))

<svg><rect id=c>

---

Explanation

An array of arrays is mapped to function a, creating clones of the rect in the HTML, inserting them after the initial rect and setting their fill, x, y, width & height attributes. Each array contains values for those attributes, in that order, with any missing values being set by the default parameters of a. The seemingly unnecessary r.id++ allows the use of cloneNode() while ensuring there is only ever 1 rect with an id of c; this saves the need to use the ridiculously expensive document.createElementNS("http://www.w3.org/2000/svg","rect").

Answer 11

PHP+SVG, 425 Bytes

<svg><rect x=0 y=0 fill=#00a88e width=150 height=150 /><?foreach(["004d75"=>[[1,1],[2,2],[3,3],[7,14],[7,7],[8,6],[9,5],[10,4],[11,11],[12,12],[13,13],[7,4,0,2],[8,7,6,0],[7,8,0,5]],"5aa6d8"=>[[7,0],[7,1],[7,2],[7,3]],a86cb9=>[[0,8],[1,8],[2,8],[3,8],[4,8],[5,8],[6,8]],f73a3a=>[[6,7],[12,6],[13,6],[14,6]]]as$c=>$p)foreach($p as$v)echo"<rect x={$v[0]}1 y={$v[1]}1 width=".(8+10*$v[2])." height=".(8+10*$v[3])." fill=#$c />";

expanded

<svg><rect x=0 y=0 fill=#00a88e width=150 height=150 />
<?foreach([
"004d75"=>[[1,1],[2,2],[3,3],[7,14],[7,7],[8,6],[9,5],[10,4],[11,11],[12,12],[13,13],[7,4,0,2],[8,7,6,0],[7,8,0,5]]
,"5aa6d8"=>[[7,0],[7,1],[7,2],[7,3]]
,a86cb9=>[[0,8],[1,8],[2,8],[3,8],[4,8],[5,8],[6,8]]
,f73a3a=>[[6,7],[12,6],[13,6],[14,6]] # Array containing color and position ,width, height of each rect without the background
]as$c=>$p)
  foreach($p as$v)
    echo"<rect x={$v[0]}1 y={$v[1]}1 width=".(8+10*$v[2])." height=".(8+10*$v[3])." fill=#$c />"; # Output the rects

The result of the code in a HTML snippet

<svg><rect x=0 y=0 fill=#00a88e width=150 height=150 /><rect x=11 y=11 width=8 height=8 fill=#004d75 /><rect x=21 y=21 width=8 height=8 fill=#004d75 /><rect x=31 y=31 width=8 height=8 fill=#004d75 /><rect x=71 y=141 width=8 height=8 fill=#004d75 /><rect x=71 y=71 width=8 height=8 fill=#004d75 /><rect x=81 y=61 width=8 height=8 fill=#004d75 /><rect x=91 y=51 width=8 height=8 fill=#004d75 /><rect x=101 y=41 width=8 height=8 fill=#004d75 /><rect x=111 y=111 width=8 height=8 fill=#004d75 /><rect x=121 y=121 width=8 height=8 fill=#004d75 /><rect x=131 y=131 width=8 height=8 fill=#004d75 /><rect x=71 y=41 width=8 height=28 fill=#004d75 /><rect x=81 y=71 width=68 height=8 fill=#004d75 /><rect x=71 y=81 width=8 height=58 fill=#004d75 /><rect x=71 y=01 width=8 height=8 fill=#5aa6d8 /><rect x=71 y=11 width=8 height=8 fill=#5aa6d8 /><rect x=71 y=21 width=8 height=8 fill=#5aa6d8 /><rect x=71 y=31 width=8 height=8 fill=#5aa6d8 /><rect x=01 y=81 width=8 height=8 fill=#a86cb9 /><rect x=11 y=81 width=8 height=8 fill=#a86cb9 /><rect x=21 y=81 width=8 height=8 fill=#a86cb9 /><rect x=31 y=81 width=8 height=8 fill=#a86cb9 /><rect x=41 y=81 width=8 height=8 fill=#a86cb9 /><rect x=51 y=81 width=8 height=8 fill=#a86cb9 /><rect x=61 y=81 width=8 height=8 fill=#a86cb9 /><rect x=61 y=71 width=8 height=8 fill=#f73a3a /><rect x=121 y=61 width=8 height=8 fill=#f73a3a /><rect x=131 y=61 width=8 height=8 fill=#f73a3a /><rect x=141 y=61 width=8 height=8 fill=#f73a3a />

PHP+SVG, 375 Bytes

This Byte count can be reach with compressing the SVG

<?=bzdecompress(base64_decode("QlpoNDFBWSZTWY2177gAASSZgEgA/+c/5B3gMAE5TQVtQeig0AAACU0VNMAAAEYIlEnpMKNlGahso2plh0zoaSEpIkukINaC3RWRF74IvArdRF1FcBXrSTFWXTorp2xvpb3k7FbaV62syISgiBEweHhxtWUmgWCsqqaKSEARyAOAEZJJOwYBQqTAWotSrmEXJbBRTYNhCg4RPaKOUUbAX+Fr4VfIrzzIQQkkJCWfMEEOOISTuDkOzgQzDQDNQKu/4K7AZh8L41DddV8iv2LQOBXv+iugriHAr6sK/IrUV1FeRXMV3FdhW8V9KugrmK8CvOQin+LuSKcKEhG2vfcA"));

Answer 12

HTML + Javascript(jQuery) : 474(js)+ 22(HTML) => 496bytes

a=$("table"),a.append("<tr>".repeat(15)),$("tr").append("<td width='15' height='15'>".repeat(15)),o={g:"#0a8",b:"#057",c:"#5AD",r:"#F33",p:"#A6B"},z="14g,b,",s="7g,c,8g,b,5g,c,9g,b,4g,c,10g,b,3g,c,"+z+"2g,b,11g,b,g,b,12g,2b,3g,3r,6g,r,8b,7p,b,"+z+z+z+"3g,b,10g,b,4g,b,9g,b,5g,b,8g,b",m="",t=s.split(",");for(var i=0;i<t.length;i++)m+=t[i].length>1?t[i].charAt(1).repeat(t[i].match(/(\d+)/g)):t[i].charAt(0);for(i=0;i<225;i++)$("td:eq("+i+")").attr("bgcolor",o[m.charAt(i)]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<table bgcolor='#0A8'>

Answer 13

HTML + Javascript, 378 bytes

document.write`<canvas id=Y>`
c=Y.getContext`2d`
N=(w,o)=>[...w].map(d=>Number('0x'+d)*10+o)
S=f=>c.fillStyle='#'+f
T=(z,p,s)=>c.fillRect(...N(p,1),...N(s,8))
S('0a8');c.fillRect(0,0,150,150)
U=(f,s)=>{S(f);s.replace(/../g,w=>T(0,w,'00'))}
U('a6b','08182838485868')
U('f33','67c6d6e6')
U('5ad','70717273')
U('057','112233bbccdd778695a47e')
'740278058760'.replace(/(..)(..)/g,T)

Explanation

document.write`<canvas id=Y>`                   // draw a canvas element

c=Y.getContext`2d`                              // Canvas2DContext

N=(w,o)=>[...w].map(d=>Number('0x'+d)*10+o)     // take a string, interpret each letter
                                                // as a hex number and add an offset

S=f=>c.fillStyle='#'+f                          // set global fill color

T=(z,p,s)=>c.fillRect(...N(p,1),...N(s,8))      // fill a rect
                                                // each x and y is (hex digit)*10 + 1,
                                                // each w and h is (hex digit)*10 + 8

S('0a8');c.fillRect(0,0,150,150)                // draw background

U=(f,s)=>{S(f);s.replace(/../g,w=>T(0,w,'00'))} // draw 8x8 squares

U('a6b','08182838485868')                       // magenta squares,  each represented
                                                // as two digits in the string

U('f33','67c6d6e6')                             // orange squares

U('5ad','70717273')                             // light blue squares

U('057','112233bbccdd778695a47e')               // dark blue squares

'740278058760'.replace(/(..)(..)/g,T)           // dark blue rects, each represented
                                                // as four digits in the string