diff --git a/Layout/default/Workflow/items/color.php b/Layout/default/Workflow/items/color.php
index e5cec043f..094803bf5 100644
--- a/Layout/default/Workflow/items/color.php
+++ b/Layout/default/Workflow/items/color.php
@@ -11,14 +11,29 @@ if(preg_match('/^(.+)-1R$/', $color_name, $cmatch)) {
 <select class="form-control selectpicker show-tick" name="wfitem_<?=$item->name?>" id="wfitem_<?=$item->name?>_<?=$$wftype->id?>" title="Farbe wählen" data-style="btn-outline-<?=$color_name?>">
   <option></option>
   <?php foreach(TT_CABLE_COLORS as $name => $color): ?>
-  <option 
-    style="background-color: rgba(<?=$color["r"]?>,<?=$color["g"]?>,<?=$color["b"]?>, .5); color: #<?=$color["hexfg"]?>" 
-    value="<?=$name?>" 
-    data-bg-color="#<?=$color["hex"]?>" <?=($color['mark']) ? "data-icon='fa-ellipsis-h'" : ""?>
-    <?=($name == $item->value->value_string) ? "selected='selected'" : ""?>
-  >
-    <?=ucfirst($name)?>
-  </option>
+  <?php if($color['two-color']): ?>
+    <option 
+      style="color: #<?=$color["hexfg"]?>;
+        background: rgb(<?=$color["r"]?>,<?=$color["g"]?>,<?=$color["b"]?>);
+        background: linear-gradient(90deg, rgba(<?=$color["r"]?>,<?=$color["g"]?>,<?=$color["b"]?>,.5) 0%, rgba(<?=$color["r"]?>,<?=$color["g"]?>,<?=$color["b"]?>,.5) 50%, rgba(<?=$color["r2"]?>,<?=$color["g2"]?>,<?=$color["b2"]?>,.5) 50%, rgba(<?=$color["r2"]?>,<?=$color["g2"]?>,<?=$color["b2"]?>,.5) 100%);
+        text-shadow: 1px 1px 2px #<?=$color["hex"]?>;
+        
+        "
+      value="<?=$name?>" 
+      data-bg-color="#<?=$color["hex"]?>" <?=($color['mark']) ? "data-icon='fa-ellipsis-h'" : ""?>
+      <?=($name == $item->value->value_string) ? "selected='selected'" : ""?>
+    >
+      <?=ucfirst($name)?>
+    </option>
+  <?php else: ?>
+    <option 
+      style="background-color: rgba(<?=$color["r"]?>,<?=$color["g"]?>,<?=$color["b"]?>, .5); color: #<?=$color["hexfg"]?>" 
+      value="<?=$name?>" 
+      data-bg-color="#<?=$color["hex"]?>" <?=($color['mark']) ? "data-icon='fa-ellipsis-h'" : ""?>
+      <?=($name == $item->value->value_string) ? "selected='selected'" : ""?>
+    >
+      <?=ucfirst($name)?>
+  <?php endif; ?>
   <?php endforeach; ?>
 </select>
 
diff --git a/Layout/default/footer.php b/Layout/default/footer.php
index c2286a7b0..8727d9f2c 100644
--- a/Layout/default/footer.php
+++ b/Layout/default/footer.php
@@ -19,7 +19,8 @@
         <script type="text/javascript">
             $(".selectpicker").selectpicker({
               iconBase: "fas",
-              tickIcon: "check"
+              tickIcon: "check",
+              sanitize: false
             });
         </script>
     </body>
diff --git a/application/Dashboard/DashboardController.php b/application/Dashboard/DashboardController.php
index a71a17d88..d9f7f03ad 100644
--- a/application/Dashboard/DashboardController.php
+++ b/application/Dashboard/DashboardController.php
@@ -29,6 +29,35 @@ class DashboardController extends mfBaseController {
     }
   }
   
+  protected function colorAction() {
+    
+    foreach(TT_CABLE_COLORS as $name => $color) {
+      if(!$color['two-color']) continue;
+      $hex = $color['hex'];
+      $hexfg = $color['hexfg'];
+      $hex2 = $color['hex2'];
+      $hexfg2 = $color['hexfg2'];
+      $r = $color['r'];
+      $g = $color['g'];
+      $b = $color['b'];
+      $r2 = $color['r2'];
+      $g2 = $color['g2'];
+      $b2 = $color['b2'];
+      
+      
+      $class = ".btn-outline-".$name." {
+  color: #$hexfg;
+  border-left-color: #$hex;
+  border-top-color: #$hex;
+  border-right-color: #$hex2;
+  border-bottom-color: #$hex2;
+  background: linear-gradient(90deg, rgba($r,$g,$b,.5) 0%, rgba($r,$g,$b,.5) 50%, rgba($r2,$g2,$b2,.5) 50%, rgba($r2,$g2,$b2,.5) 100%);
+}";
+      echo "<pre>$class</pre>\n";
+    }
+    exit;
+  }
+  
   protected function pdfAction() {
     $order = new Order(7);
     $owner = new Address(1);
diff --git a/public/assets/css/thetool.css b/public/assets/css/thetool.css
index 3722094ce..136d94c5e 100644
--- a/public/assets/css/thetool.css
+++ b/public/assets/css/thetool.css
@@ -220,6 +220,14 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 
+.color-shadow-b {
+  text-shadow: 1px 1px 2px black;
+}
+.color-shadow-2 {
+  text-shadow: 1px 1px 2px white;
+}
+
+
 .pagination a {
   color: #007bff;
 }
@@ -373,6 +381,226 @@ td.controls {
   border-color: #FF0088;
 }
 
+.btn-outline-Rot-Gelb {
+  color: #FFFFFF;
+  border-left-color: #FF0000;
+  border-top-color: #FF0000;
+  border-right-color: #FFFF00;
+  border-bottom-color: #FFFF00;
+  background: linear-gradient(90deg, rgba(255,0,0,.5) 0%, rgba(255,0,0,.5) 50%, rgba(255,255,0,.5) 50%, rgba(255,255,0,.5) 100%);
+}
+
+.btn-outline-Rot-Gruen {
+  color: #FFFFFF;
+  border-left-color: #FF0000;
+  border-top-color: #FF0000;
+  border-right-color: #00FF00;
+  border-bottom-color: #00FF00;
+  background: linear-gradient(90deg, rgba(255,0,0,.5) 0%, rgba(255,0,0,.5) 50%, rgba(0,255,0,.5) 50%, rgba(0,255,0,.5) 100%);
+}
+
+.btn-outline-Rot-Blau {
+  color: #FFFFFF;
+  border-left-color: #FF0000;
+  border-top-color: #FF0000;
+  border-right-color: #0000FF;
+  border-bottom-color: #0000FF;
+  background: linear-gradient(90deg, rgba(255,0,0,.5) 0%, rgba(255,0,0,.5) 50%, rgba(0,0,255,.5) 50%, rgba(0,0,255,.5) 100%);
+}
+
+.btn-outline-Rot-Violett {
+  color: #FFFFFF;
+  border-left-color: #FF0000;
+  border-top-color: #FF0000;
+  border-right-color: #8800FF;
+  border-bottom-color: #8800FF;
+  background: linear-gradient(90deg, rgba(255,0,0,.5) 0%, rgba(255,0,0,.5) 50%, rgba(136,0,255,.5) 50%, rgba(136,0,255,.5) 100%);
+}
+
+.btn-outline-Rot-Grau {
+  color: #FFFFFF;
+  border-left-color: #FF0000;
+  border-top-color: #FF0000;
+  border-right-color: #888888;
+  border-bottom-color: #888888;
+  background: linear-gradient(90deg, rgba(255,0,0,.5) 0%, rgba(255,0,0,.5) 50%, rgba(136,136,136,.5) 50%, rgba(136,136,136,.5) 100%);
+}
+
+.btn-outline-Gelb-Blau {
+  color: #000000;
+  border-left-color: #FFFF00;
+  border-top-color: #FFFF00;
+  border-right-color: #0000FF;
+  border-bottom-color: #0000FF;
+  background: linear-gradient(90deg, rgba(255,255,0,.5) 0%, rgba(255,255,0,.5) 50%, rgba(0,0,255,.5) 50%, rgba(0,0,255,.5) 100%);
+}
+
+.btn-outline-Gelb-Violett {
+  color: #000000;
+  border-left-color: #FFFF00;
+  border-top-color: #FFFF00;
+  border-right-color: #8800FF;
+  border-bottom-color: #8800FF;
+  background: linear-gradient(90deg, rgba(255,255,0,.5) 0%, rgba(255,255,0,.5) 50%, rgba(136,0,255,.5) 50%, rgba(136,0,255,.5) 100%);
+}
+
+.btn-outline-Gelb-Grau {
+  color: #000000;
+  border-left-color: #FFFF00;
+  border-top-color: #FFFF00;
+  border-right-color: #888888;
+  border-bottom-color: #888888;
+  background: linear-gradient(90deg, rgba(255,255,0,.5) 0%, rgba(255,255,0,.5) 50%, rgba(136,136,136,.5) 50%, rgba(136,136,136,.5) 100%);
+}
+
+.btn-outline-Gruen-Blau {
+  color: #000000;
+  border-left-color: #00FF00;
+  border-top-color: #00FF00;
+  border-right-color: #0000FF;
+  border-bottom-color: #0000FF;
+  background: linear-gradient(90deg, rgba(0,255,0,.5) 0%, rgba(0,255,0,.5) 50%, rgba(0,0,255,.5) 50%, rgba(0,0,255,.5) 100%);
+}
+
+.btn-outline-Gruen-Violett {
+  color: #000000;
+  border-left-color: #00FF00;
+  border-top-color: #00FF00;
+  border-right-color: #8800FF;
+  border-bottom-color: #8800FF;
+  background: linear-gradient(90deg, rgba(0,255,0,.5) 0%, rgba(0,255,0,.5) 50%, rgba(136,0,255,.5) 50%, rgba(136,0,255,.5) 100%);
+}
+
+.btn-outline-Gruen-Grau {
+  color: #000000;
+  border-left-color: #00FF00;
+  border-top-color: #00FF00;
+  border-right-color: #888888;
+  border-bottom-color: #888888;
+  background: linear-gradient(90deg, rgba(0,255,0,.5) 0%, rgba(0,255,0,.5) 50%, rgba(136,136,136,.5) 50%, rgba(136,136,136,.5) 100%);
+}
+
+.btn-outline-Braun-Blau {
+  color: #FFFFFF;
+  border-left-color: #A52A2A;
+  border-top-color: #A52A2A;
+  border-right-color: #0000FF;
+  border-bottom-color: #0000FF;
+  background: linear-gradient(90deg, rgba(165,42,42,.5) 0%, rgba(165,42,42,.5) 50%, rgba(0,0,255,.5) 50%, rgba(0,0,255,.5) 100%);
+}
+
+.btn-outline-Braun-Violett {
+  color: #FFFFFF;
+  border-left-color: #A52A2A;
+  border-top-color: #A52A2A;
+  border-right-color: #8800FF;
+  border-bottom-color: #8800FF;
+  background: linear-gradient(90deg, rgba(165,42,42,.5) 0%, rgba(165,42,42,.5) 50%, rgba(136,0,255,.5) 50%, rgba(136,0,255,.5) 100%);
+}
+
+.btn-outline-Braun-Grau {
+  color: #FFFFFF;
+  border-left-color: #A52A2A;
+  border-top-color: #A52A2A;
+  border-right-color: #888888;
+  border-bottom-color: #888888;
+  background: linear-gradient(90deg, rgba(165,42,42,.5) 0%, rgba(165,42,42,.5) 50%, rgba(136,136,136,.5) 50%, rgba(136,136,136,.5) 100%);
+}
+
+.btn-outline-Braun-Gruen {
+  color: #FFFFFF;
+  border-left-color: #A52A2A;
+  border-top-color: #A52A2A;
+  border-right-color: #00FF00;
+  border-bottom-color: #00FF00;
+  background: linear-gradient(90deg, rgba(165,42,42,.5) 0%, rgba(165,42,42,.5) 50%, rgba(0,255,0,.5) 50%, rgba(0,255,0,.5) 100%);
+}
+
+.btn-outline-Braun-Gelb {
+  color: #FFFFFF;
+  border-left-color: #A52A2A;
+  border-top-color: #A52A2A;
+  border-right-color: #FFFF00;
+  border-bottom-color: #FFFF00;
+  background: linear-gradient(90deg, rgba(165,42,42,.5) 0%, rgba(165,42,42,.5) 50%, rgba(255,255,0,.5) 50%, rgba(255,255,0,.5) 100%);
+}
+
+.btn-outline-Braun-Rot {
+  color: #FFFFFF;
+  border-left-color: #A52A2A;
+  border-top-color: #A52A2A;
+  border-right-color: #FF0000;
+  border-bottom-color: #FF0000;
+  background: linear-gradient(90deg, rgba(165,42,42,.5) 0%, rgba(165,42,42,.5) 50%, rgba(255,0,0,.5) 50%, rgba(255,0,0,.5) 100%);
+}
+
+.btn-outline-Schwarz-Rot {
+  color: #FFFFFF;
+  border-left-color: #000000;
+  border-top-color: #000000;
+  border-right-color: #FF0000;
+  border-bottom-color: #FF0000;
+  background: linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.5) 50%, rgba(255,0,0,.5) 50%, rgba(255,0,0,.5) 100%);
+}
+
+.btn-outline-Schwarz-Gelb {
+  color: #FFFFFF;
+  border-left-color: #000000;
+  border-top-color: #000000;
+  border-right-color: #FFFF00;
+  border-bottom-color: #FFFF00;
+  background: linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.5) 50%, rgba(255,255,0,.5) 50%, rgba(255,255,0,.5) 100%);
+}
+
+.btn-outline-Schwarz-Gruen {
+  color: #FFFFFF;
+  border-left-color: #000000;
+  border-top-color: #000000;
+  border-right-color: #00FF00;
+  border-bottom-color: #00FF00;
+  background: linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.5) 50%, rgba(0,255,0,.5) 50%, rgba(0,255,0,.5) 100%);
+}
+
+.btn-outline-Schwarz-Blau {
+  color: #FFFFFF;
+  border-left-color: #000000;
+  border-top-color: #000000;
+  border-right-color: #0000FF;
+  border-bottom-color: #0000FF;
+  background: linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.5) 50%, rgba(0,0,255,.5) 50%, rgba(0,0,255,.5) 100%);
+}
+
+.btn-outline-Schwarz-Violett {
+  color: #FFFFFF;
+  border-left-color: #000000;
+  border-top-color: #000000;
+  border-right-color: #8800FF;
+  border-bottom-color: #8800FF;
+  background: linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.5) 50%, rgba(136,0,255,.5) 50%, rgba(136,0,255,.5) 100%);
+}
+
+.btn-outline-Schwarz-Grau {
+  color: #FFFFFF;
+  border-left-color: #000000;
+  border-top-color: #000000;
+  border-right-color: #888888;
+  border-bottom-color: #888888;
+  background: linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.5) 50%, rgba(136,136,136,.5) 50%, rgba(136,136,136,.5) 100%);
+}
+
+.btn-outline-Schwarz-Braun {
+  color: #FFFFFF;
+  border-left-color: #000000;
+  border-top-color: #000000;
+  border-right-color: #A52A2A;
+  border-bottom-color: #A52A2A;
+  background: linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.5) 50%, rgba(165,42,42,.5) 50%, rgba(165,42,42,.5) 100%);
+}
+
+
+
+
+
 
 .text-white {
   color: #f00;