diff --git a/app/css/custom.php b/app/css/custom.php
index 6f4db818..9113ef39 100644
--- a/app/css/custom.php
+++ b/app/css/custom.php
@@ -14,9 +14,9 @@ License: GNU General Public License v3.0
 @import url('all.css');
 
 :root {
-  --raspap-theme-color: <?php echo $color; ?>;
-  --raspap-theme-lighter: <?php echo lightenColor($color, 20); ?>;
-  --raspap-theme-darker: <?php echo darkenColor($color, 20); ?>;
+  --raspap-theme-color: <?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;
+  --raspap-theme-lighter: <?php echo htmlspecialchars(lightenColor($color, 20), ENT_QUOTES, 'UTF-8'); ?>;
+  --raspap-theme-darker: <?php echo htmlspecialchars(darkenColor($color, 20), ENT_QUOTES, 'UTF-8'); ?>;
 }
 
 body {
diff --git a/app/img/devices/default.php b/app/img/devices/default.php
index 9311b504..71ea0703 100644
--- a/app/img/devices/default.php
+++ b/app/img/devices/default.php
@@ -7,9 +7,9 @@ $color = getColorOpt();
 	 viewBox="0 0 431 321" style="enable-background:new 0 0 431 321;" xml:space="preserve">
 <style type="text/css">
 	.st0{fill:none;enable-background:new;}
-	.st1{fill:none;stroke:<?php echo $color; ?>;stroke-width:0.9453;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:13.3333;}
+	.st1{fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.9453;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:13.3333;}
 	
-		.st2{fill:none;stroke:<?php echo $color; ?>;stroke-width:0.9453;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:13.3333;enable-background:new    ;}
+		.st2{fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.9453;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:13.3333;enable-background:new    ;}
 </style>
 <path class="st0" d="M0,0"/>
 <g id="g20028">
diff --git a/app/img/devices/zero.php b/app/img/devices/zero.php
index 68c17007..4e688ad7 100644
--- a/app/img/devices/zero.php
+++ b/app/img/devices/zero.php
@@ -7,7 +7,7 @@ $color = getColorOpt();
 <svg version="1.1" id="Zero_BLANK" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 218.03 144.11" style="enable-background:new 0 0 218.03 144.11;" xml:space="preserve">
 <style type="text/css">
-	.st0{fill:none;stroke:<?php echo $color; ?>;stroke-width:0.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+	.st0{fill:none;stroke:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;stroke-width:0.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
 </style>
 <g id="LINE_1238_">
 	<line class="st0" x1="96.57" y1="105.12" x2="97.06" y2="105.29"/>
diff --git a/app/img/raspAP-logo.php b/app/img/raspAP-logo.php
index c23399ab..c8115634 100755
--- a/app/img/raspAP-logo.php
+++ b/app/img/raspAP-logo.php
@@ -32,20 +32,20 @@ $color = getColorOpt();
            transform="translate(192.6768,123.4365)"
            id="g20"><path
              id="path22"
-             style="fill:<?php echo $color; ?>;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             style="fill:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;fill-opacity:1;fill-rule:nonzero;stroke:none"
              d="m 0,0 c 0,-37.169 -30.128,-67.3 -67.296,-67.3 -37.167,0 -67.294,30.131 -67.294,67.3 0,37.165 30.127,67.296 67.294,67.296 C -30.128,67.296 0,37.165 0,0" /></g><g
            transform="translate(125.3823,219.0791)"
            id="g24"><path
              id="path26"
-             style="fill:<?php echo $color; ?>;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             style="fill:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;fill-opacity:1;fill-rule:nonzero;stroke:none"
              d="m 0,0 c -52.737,0 -95.641,-42.905 -95.641,-95.643 0,-52.74 42.904,-95.647 95.641,-95.647 52.737,0 95.642,42.907 95.642,95.647 C 95.642,-42.905 52.737,0 0,0 m 0,-217.29 c -67.073,0 -121.641,54.571 -121.641,121.647 C -121.641,-28.569 -67.073,26 0,26 67.074,26 121.642,-28.569 121.642,-95.643 121.642,-162.719 67.074,-217.29 0,-217.29" /></g><g
            transform="translate(144.4277,271.9385)"
            id="g28"><path
              id="path30"
-             style="fill:<?php echo $color; ?>;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             style="fill:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;fill-opacity:1;fill-rule:nonzero;stroke:none"
              d="m 0,0 c 66.188,0 121.118,-49.055 130.392,-112.714 l 28.259,-1.874 C 150.044,-34.655 82.181,27.791 0,27.791 c -3.892,0 -7.75,-0.147 -11.571,-0.423 L -9.73,-0.397 C -6.513,-0.161 -3.275,0 0,0" /></g><g
            transform="translate(144.4883,334.7588)"
            id="g32"><path
              id="path34"
-             style="fill:<?php echo $color; ?>;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             style="fill:<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>;fill-opacity:1;fill-rule:nonzero;stroke:none"
              d="m 0,0 c 101.94,0 185.667,-79.438 192.56,-179.664 l 27.962,-1.857 C 214.513,-65.087 117.899,27.791 0,27.791 c -5.31,0 -10.576,-0.2 -15.792,-0.571 l 1.84,-27.728 C -9.343,-0.177 -4.691,0 0,0" /></g></g></g></g></svg>
diff --git a/app/img/solid.php b/app/img/solid.php
index 9952e7fa..23bd418a 100644
--- a/app/img/solid.php
+++ b/app/img/solid.php
@@ -42,24 +42,24 @@ if ($showJoint) {
     for ($i = 1; $i < count($activeYs); $i++) {
         $y1 = $activeYs[$i-1];
         $y2 = $activeYs[$i];
-        echo "<line x1='112.75' y1='$y1' x2='112.75' y2='$y2' stroke='$color' stroke-width='4'/>";
+        echo "<line x1='112.75' y1='$y1' x2='112.75' y2='$y2' stroke='" . htmlspecialchars($color, ENT_QUOTES, 'UTF-8') . "' stroke-width='4'/>";
     }
 }
 ?>
 
 <?php if ($showDevice1): ?>
-<line x1="113.231" y1="0.75" x2="7.69496e-06" y2="0.75001" stroke="<?php echo $color; ?>" stroke-width="6" id="device-1"/>
+<line x1="113.231" y1="0.75" x2="7.69496e-06" y2="0.75001" stroke="<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>" stroke-width="6" id="device-1"/>
 <?php endif; ?>
 <?php if ($showOut): ?>
-<line x1="226.231" y1="297.75" x2="113" y2="297.75" stroke="<?php echo $color; ?>" stroke-width="4" id="out"/>
+<line x1="226.231" y1="297.75" x2="113" y2="297.75" stroke="<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>" stroke-width="4" id="out"/>
 <?php endif; ?>
 <?php if ($showDevice2): ?>
-<line x1="113.231" y1="198.75" x2="7.69496e-06" y2="198.75" stroke="<?php echo $color; ?>" stroke-width="4" id="device-2"/>
+<line x1="113.231" y1="198.75" x2="7.69496e-06" y2="198.75" stroke="<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>" stroke-width="4" id="device-2"/>
 <?php endif; ?>
 <?php if ($showDevice3): ?>
-<line x1="113.231" y1="397.058" x2="7.69496e-06" y2="397.058" stroke="<?php echo $color; ?>" stroke-width="4" id="device-3"/>
+<line x1="113.231" y1="397.058" x2="7.69496e-06" y2="397.058" stroke="<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>" stroke-width="4" id="device-3"/>
 <?php endif; ?>
 <?php if ($showDevice4): ?>
-<line x1="113.231" y1="595.211" x2="7.69496e-06" y2="595.211" stroke="<?php echo $color; ?>" stroke-width="4" id="device-4"/>
+<line x1="113.231" y1="595.211" x2="7.69496e-06" y2="595.211" stroke="<?php echo htmlspecialchars($color, ENT_QUOTES, 'UTF-8'); ?>" stroke-width="4" id="device-4"/>
 <?php endif; ?>
 </svg>