diff --git a/db_graph.php b/db_graph.php
index 613e2891..2b058345 100644
--- a/db_graph.php
+++ b/db_graph.php
@@ -10,11 +10,6 @@
 
 require 'scripts/pi-hole/php/header_authenticated.php';
 ?>
-<!-- Sourceing CSS colors from stylesheet to be used in JS code -->
-<span class="queries-permitted"></span>
-<span class="queries-blocked"></span>
-<span class="graphs-grid"></span>
-<span class="graphs-ticks"></span>
 
 <div class="page-header">
     <h1>Compute graphical statistics from the Pi-hole query database</h1>
diff --git a/db_lists.php b/db_lists.php
index b8e17b76..e89801ae 100644
--- a/db_lists.php
+++ b/db_lists.php
@@ -11,10 +11,6 @@
 require 'scripts/pi-hole/php/header_authenticated.php';
 ?>
 
-<!-- Sourceing CSS colors from stylesheet to be used in JS code -->
-<span class="queries-permitted"></span>
-<span class="queries-blocked"></span>
-
 <!-- Title -->
 <div class="page-header">
     <h1>Compute Top Lists from the Pi-hole query database</h1>
diff --git a/index.php b/index.php
index 45482daa..ac58c1a8 100644
--- a/index.php
+++ b/index.php
@@ -11,11 +11,6 @@ $indexpage = true;
 require 'scripts/pi-hole/php/header_authenticated.php';
 require_once 'scripts/pi-hole/php/gravity.php';
 ?>
-<!-- Sourceing CSS colors from stylesheet to be used in JS code -->
-<span class="queries-permitted"></span>
-<span class="queries-blocked"></span>
-<span class="graphs-grid"></span>
-<span class="graphs-ticks"></span>
 <!-- Small boxes (Stat box) -->
 <div class="row">
     <div class="col-lg-3 col-sm-6">
diff --git a/scripts/pi-hole/js/db_graph.js b/scripts/pi-hole/js/db_graph.js
index 8fdeb122..1c02748a 100644
--- a/scripts/pi-hole/js/db_graph.js
+++ b/scripts/pi-hole/js/db_graph.js
@@ -208,10 +208,10 @@ function updateQueriesOverTime() {
 
 $(function () {
   var ctx = document.getElementById("queryOverTimeChart").getContext("2d");
-  var blockedColor = $(".queries-blocked").css("background-color");
-  var permittedColor = $(".queries-permitted").css("background-color");
-  var gridColor = $(".graphs-grid").css("background-color");
-  var ticksColor = $(".graphs-ticks").css("color");
+  var blockedColor = utils.getCSSval("queries-blocked", "background-color");
+  var permittedColor = utils.getCSSval("queries-permitted", "background-color");
+  var gridColor = utils.getCSSval("graphs-grid", "background-color");
+  var ticksColor = utils.getCSSval("graphs-ticks", "color");
 
   timeLineChart = new Chart(ctx, {
     type: utils.getGraphType(),
diff --git a/scripts/pi-hole/js/index.js b/scripts/pi-hole/js/index.js
index 9c02b906..a1b84e60 100644
--- a/scripts/pi-hole/js/index.js
+++ b/scripts/pi-hole/js/index.js
@@ -232,8 +232,8 @@ function updateQueriesOverTime() {
     timeLineChart.data.datasets = [];
 
     var labels = ["Blocked DNS Queries", "Permitted DNS Queries"];
-    var blockedColor = $(".queries-blocked").css("background-color");
-    var permittedColor = $(".queries-permitted").css("background-color");
+    var blockedColor = utils.getCSSval("queries-blocked", "background-color");
+    var permittedColor = utils.getCSSval("queries-permitted", "background-color");
     var colors = [blockedColor, permittedColor];
 
     // Collect values and colors, and labels
@@ -862,8 +862,8 @@ $(function () {
   getMaxlogage();
   updateSummaryData();
 
-  var gridColor = $(".graphs-grid").css("background-color");
-  var ticksColor = $(".graphs-ticks").css("color");
+  var gridColor = utils.getCSSval("graphs-grid", "background-color");
+  var ticksColor = utils.getCSSval("graphs-ticks", "color");
   var ctx = document.getElementById("queryOverTimeChart").getContext("2d");
   timeLineChart = new Chart(ctx, {
     type: utils.getGraphType(),
diff --git a/scripts/pi-hole/js/utils.js b/scripts/pi-hole/js/utils.js
index f81bb5a4..9d84116a 100644
--- a/scripts/pi-hole/js/utils.js
+++ b/scripts/pi-hole/js/utils.js
@@ -408,6 +408,13 @@ function changeBulkDeleteStates(table) {
   }
 }
 
+function getCSSval(cssclass, cssproperty) {
+  var elem = $("<div class='" + cssclass + "'></div>"),
+    val = elem.appendTo("body").css(cssproperty);
+  elem.remove();
+  return val;
+}
+
 window.utils = (function () {
   return {
     escapeHtml: escapeHtml,
@@ -432,5 +439,6 @@ window.utils = (function () {
     colorBar: colorBar,
     checkMessages: checkMessages,
     changeBulkDeleteStates: changeBulkDeleteStates,
+    getCSSval: getCSSval,
   };
 })();