diff --git a/css/style.scss b/css/style.scss
index 30e518921..4245715f7 100644
--- a/css/style.scss
+++ b/css/style.scss
@@ -973,8 +973,8 @@ input.input-inline {
 		}
 	}
 
-	.colorselect-label {
-		background-image: url('../img/color_picker.svg');
+	.colorselect-label, .colorselect-label-white {
+		background-image: url('../img/color_picker-dark.svg');
 		background-position: center center;
 		background-repeat: no-repeat;
 		opacity: 1;
@@ -985,6 +985,9 @@ input.input-inline {
 			width: 40px;
 		}
 	}
+	.colorselect-label-white {
+		background-image: url('../img/color_picker.svg');
+  }
 }
 
 .labels {
diff --git a/img/color_picker.svg b/img/color_picker.svg
index acd651fbb..f4b23e3f6 100644
--- a/img/color_picker.svg
+++ b/img/color_picker.svg
@@ -1,5 +1 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg id="Layer_1" width="15" height="15" enable-background="new 0 0 100 100" version="1.1" viewBox="0 0 100 100" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://web.resource.org/cc/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
-		<path d="m91.645 8.355c-4.474-4.474-11.727-4.474-16.2 0l-13.5 13.501-3.727-3.727c-1.959-1.959-5.134-1.959-7.093 0s-1.959 5.134 0 7.093l3.727 3.727-41.51 41.508c-2.039 2.039-3.149 4.656-3.329 7.324-0.073 1.087-0.347 3.105-0.675 5.292-0.053 0.359-0.212 0.706-0.487 0.983l-3.105 3.106c-0.994 0.994-0.994 2.606 0 3.6l3.493 3.493c0.994 0.994 2.606 0.994 3.6 0l3.106-3.105c0.277-0.275 0.622-0.433 0.981-0.486 2.187-0.329 4.205-0.602 5.293-0.675 2.668-0.18 5.285-1.29 7.325-3.33l41.508-41.508 3.727 3.727c1.959 1.959 5.134 1.959 7.093 0s1.959-5.134 0-7.093l-12.365-12.366 9.697 7.577 12.44-12.441c4.475-4.473 4.474-11.726 1e-3 -16.2zm-26.594 34.394l-20.53 20.53c-0.994 0.994-2.606 0.994-3.6 0l-3.27-3.27c-0.994-0.993-2.605-0.993-3.599 1e-3l-0.616 0.616-2e-3 -2e-3 -14.728 14.727c-0.337 0.337-0.819 0.401-1.076 0.143s-0.194-0.74 0.143-1.076l23.841-23.841 4e-3 4e-3 15.633-15.633c0.994-0.994 2.606-0.994 3.6 0l4.2 4.201c0.994 0.994 0.994 2.606 0 3.6z" fill="#fff"/>
-<metadata><rdf:RDF><cc:Work><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/><cc:license rdf:resource="http://creativecommons.org/licenses/publicdomain/"/><dc:publisher><cc:Agent rdf:about="http://openclipart.org/"><dc:title>Openclipart</dc:title></cc:Agent></dc:publisher></cc:Work><cc:License rdf:about="http://creativecommons.org/licenses/publicdomain/"><cc:permits rdf:resource="http://creativecommons.org/ns#Reproduction"/><cc:permits rdf:resource="http://creativecommons.org/ns#Distribution"/><cc:permits rdf:resource="http://creativecommons.org/ns#DerivativeWorks"/></cc:License></rdf:RDF></metadata></svg>
+<svg width="15" height="15" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="M91.645 8.355c-4.474-4.474-11.727-4.474-16.2 0l-13.5 13.501-3.727-3.727a5.015 5.015 0 1 0-7.093 7.093l3.727 3.727-41.51 41.508a11.411 11.411 0 0 0-3.329 7.324c-.073 1.087-.347 3.105-.675 5.292a1.748 1.748 0 0 1-.487.983l-3.105 3.106a2.546 2.546 0 0 0 0 3.6l3.493 3.493a2.546 2.546 0 0 0 3.6 0l3.106-3.105c.277-.275.622-.433.981-.486 2.187-.329 4.205-.602 5.293-.675a11.412 11.412 0 0 0 7.325-3.33l41.508-41.508 3.727 3.727a5.015 5.015 0 1 0 7.093-7.093L69.507 29.419l9.697 7.577 12.44-12.441c4.475-4.473 4.474-11.726.001-16.2zM65.051 42.749l-20.53 20.53a2.546 2.546 0 0 1-3.6 0l-3.27-3.27a2.545 2.545 0 0 0-3.599.001l-.616.616-.002-.002-14.728 14.727c-.337.337-.819.401-1.076.143s-.194-.74.143-1.076l23.841-23.841.004.004 15.633-15.633a2.546 2.546 0 0 1 3.6 0l4.2 4.201a2.546 2.546 0 0 1 0 3.6z" fill="#fff"/></svg>
diff --git a/templates/part.board.sidebarView.php b/templates/part.board.sidebarView.php
index d51852f2c..7229af2dd 100644
--- a/templates/part.board.sidebarView.php
+++ b/templates/part.board.sidebarView.php
@@ -86,7 +86,7 @@
                         </div>
                         <div class="colorselect" ng-controller="ColorPickerController">
                             <div class="color" ng-repeat="c in defaultColors" ng-style="{'background-color':'#{{ c }}'}" ng-click="label=setColor(label,c);" ng-class="{'selected': (c == label.color) }"><br /></div>
-                            <label class="colorselect-label color" ng-style="getCustomBackground(label.hashedColor)" ng-init="label.hashedColor='#' + label.color">
+                            <label class="colorselect-label{{ label.color | iconWhiteFilter }} color" ng-style="getCustomBackground(label.hashedColor)" ng-init="label.hashedColor='#' + label.color">
                                 <input class="color" type="color" ng-model="label.hashedColor" value="#{{label.color}}" ng-change="label=setHashedColor(label)"/>
                             </label>
                         </div>
@@ -104,7 +104,7 @@
                         </div>
                         <div class="colorselect" ng-controller="ColorPickerController">
                             <div class="color" ng-repeat="c in defaultColors" ng-style="{'background-color':'#{{ c }}'}" ng-click="newLabel=setColor(newLabel,c)" ng-class="{'selected': (c == newLabel.color), 'dark': (newBoard.color | textColorFilter) === '#ffffff' }"><br /></div>
-                            <label class="colorselect-label color" ng-style="getCustomBackground(newLabel.hashedColor)" ng-init="newLabel.hashedColor='#' + newLabel.color">
+                            <label class="colorselect-label{{ newLabel.color | iconWhiteFilter }} color" ng-style="getCustomBackground(newLabel.hashedColor)" ng-init="newLabel.hashedColor='#' + newLabel.color">
                                 <input class="color" type="color" ng-model="newLabel.hashedColor" value="#{{newLabel.color}}" ng-change="newLabel=setHashedColor(newLabel)"/>
                             </label>
                         </div>
diff --git a/templates/part.boardlist.php b/templates/part.boardlist.php
index 5025fd80b..f7043b51f 100644
--- a/templates/part.boardlist.php
+++ b/templates/part.boardlist.php
@@ -35,7 +35,7 @@
 						<input class="edit ng-valid ng-empty" type="text" autofocus-on-insert ng-model="b.title" maxlength="100" ng-model-options="{ debounce: 250 }">
 						<div class="colorselect" ng-controller="ColorPickerController">
                             <div class="color" ng-repeat="c in ::colors" ng-style="{'background-color':'#{{ c }}'}" ng-click="b=setColor(b,c)" ng-class="{'selected': (c == b.color) }"></div>
-                            <label class="colorselect-label color" ng-style="getCustomBackground(b.hashedColor)" ng-init="b.hashedColor='#' + b.color">
+                            <label class="colorselect-label{{ b.color | iconWhiteFilter }} color" ng-style="getCustomBackground(b.hashedColor)" ng-init="b.hashedColor='#' + b.color">
                                 <input class="color" type="color" ng-model="b.hashedColor" value="#{{b.color}}" ng-change="b=setHashedColor(b)"/>
                             </label>
                         </div>
@@ -107,7 +107,7 @@ class="ng-pristine ng-valid" ng-submit="boardCreate()">
 						   autofocus-on-insert ng-model="newBoard.title" maxlength="100" ng-model-options="{ debounce: 250 }">
                     <div class="colorselect" ng-controller="ColorPickerController">
                         <div class="color" ng-repeat="c in ::colors" ng-style="{'background-color':'#{{ c }}'}" ng-click="selectColor(c);b=setColor(b,c);"ng-class="{'selected': (c == newBoard.color), 'dark': (newBoard.color | textColorFilter) === '#ffffff' }"></div>
-                        <label class="colorselect-label color" ng-style="getCustomBackground(newBoard.hashedColor)" ng-init="newBoard.hashedColor='#' + newBoard.color">
+                        <label class="colorselect-label{{ newBoard.color | iconWhiteFilter }} color" ng-style="getCustomBackground(newBoard.hashedColor)" ng-init="newBoard.hashedColor='#' + newBoard.color">
                             <input class="color" type="color" ng-model="newBoard.hashedColor" value="#{{newBoard.color}}" ng-change="newBoard=setHashedColor(newBoard)"/>
                         </label>
                     </div>
diff --git a/templates/part.navigation.php b/templates/part.navigation.php
index 53dfa592d..bc4095863 100644
--- a/templates/part.navigation.php
+++ b/templates/part.navigation.php
@@ -40,7 +40,7 @@
 			</form>
 			<div class="colorselect" ng-controller="ColorPickerController">
 				<div class="color" ng-repeat="c in ::colors" ng-style="{'background-color':'#{{ c }}'}" ng-click="b=setColor(b,c)" ng-class="{'selected': (c == b.color) }"></div>
-                <label class="colorselect-label color" ng-style="getCustomBackground(b.hashedColor)" ng-init="b.hashedColor='#' + b.color">
+                <label class="colorselect-label{{ b.color | iconWhiteFilter }} color" ng-style="getCustomBackground(b.hashedColor)" ng-init="b.hashedColor='#' + b.color">
                     <input class="color" type="color" ng-model="b.hashedColor" value="#{{b.color}}" ng-change="b=setHashedColor(b)"/>
                 </label>
 			</div>
@@ -58,7 +58,7 @@
 			</form>
 			<div class="colorselect" ng-controller="ColorPickerController">
 				<div class="color" ng-repeat="c in ::colors" ng-style="{'background-color':'#{{ c }}'}" ng-click="selectColor(c);newBoard=setColor(newBoard,c)" ng-class="{'selected': (c == newBoard.color), 'dark': (newBoard.color | textColorFilter) === '#ffffff' }"><br /></div>
-                <label class="colorselect-label color" ng-style="getCustomBackground(newBoard.hashedColor)" ng-init="newBoard.hashedColor='#' + newBoard.color">
+                <label class="colorselect-label{{ newBoard.color | iconWhiteFilter }} color" ng-style="getCustomBackground(newBoard.hashedColor)" ng-init="newBoard.hashedColor='#' + newBoard.color">
                     <input class="color" type="color" ng-model="newBoard.hashedColor" value="#{{newBoard.color}}" ng-change="newBoard=setHashedColor(newBoard)"/>
                 </label>
 			</div>