diff --git a/MMM-ScreenLogic.js b/MMM-ScreenLogic.js
index 43111f6..a0ef46a 100644
--- a/MMM-ScreenLogic.js
+++ b/MMM-ScreenLogic.js
@@ -86,8 +86,18 @@ Module.register('MMM-ScreenLogic',{
                 let dataStr = poolData.status.pH
                 if (this.config.showPHTankLevel) {
                     let percent = Math.round(((poolData.status.pHTank - 1) / this.config.pHTankLevelMax) * 100)
+                    let cls = ""
+                    if (this.config.colored) {
+                        if (percent <= 50 && percent > 33) {
+                            cls = "progress-bar-warning"
+                        } else if (percent <= 33) {
+                            cls = "progress-bar-danger"
+                        } else {
+                            cls = "progress-bar-success"
+                        }
+                    }
                     let progBarDiv = `<div class="progress vertical">
-                        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="${percent}" aria-valuemin="0" aria-valuemax="100" style="width: ${percent}%;">
+                        <div class="progress-bar ${cls}" role="progressbar" aria-valuenow="${percent}" aria-valuemin="0" aria-valuemax="100" style="width: ${percent}%;">
                         </div>
                     </div>`
 
diff --git a/screenlogic.css b/screenlogic.css
index 422a24c..875211b 100644
--- a/screenlogic.css
+++ b/screenlogic.css
@@ -118,7 +118,7 @@
     line-height: 20px;
     color: #fff;
     text-align: center;
-    background-color: #337ab7;
+    background-color: #fff;
     -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
     box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
     -webkit-transition: width .6s ease;
@@ -128,4 +128,12 @@
 
 .MMM-ScreenLogic .progress-bar-success {
     background-color: #5cb85c;
+}
+
+.MMM-ScreenLogic .progress-bar-warning {
+    background-color: #ffc107;
+}
+
+.MMM-ScreenLogic .progress-bar-danger {
+    background-color: #dc3545;
 }
\ No newline at end of file