diff --git a/misc/pinout-gen/style.css b/misc/pinout-gen/style.css
index cc4b9a7ab6..66dc447528 100644
--- a/misc/pinout-gen/style.css
+++ b/misc/pinout-gen/style.css
@@ -3,26 +3,103 @@
   z-index: 1;
   border-radius: 50%;
   background-color: white;
-  border: 2px blue solid;
+  border: 3px black solid;
   cursor: pointer;
   color: black;
   text-align: center;
   line-height: 200%;
 }
 
+[data-type="12v"],
+[data-type="12V"] {
+  border-color: yellow;
+}
+
+[data-type="5v"],
+[data-type="5V"] {
+  border-color: red;
+}
+
+[data-type="at"] {
+  border-color: green;
+}
+
+[data-type="av"] {
+  border-color: brown;
+}
+
+[data-type="can"] {
+  border-color: blue;
+}
+
+[data-type="din"] {
+  border-color: lime;
+}
+
+[data-type="etb"] {
+  border-color: darkcyan;
+}
+
+[data-type="gnd"] {
+  border-color: darkgreen;
+}
+
+[data-type="gp_high"] {
+  border-color: aqua;
+}
+
+[data-type="gp_low"] {
+  border-color: aquamarine;
+}
+
+[data-type="gp_pp"] {
+  border-color: cyan;
+}
+
+[data-type="hall"] {
+  border-color: darkolivegreen;
+}
+
+[data-type="hl"] {
+  border-color: gold;
+}
+
+[data-type="hs"] {
+  border-color: indigo;
+}
+
+[data-type="ign"] {
+  border-color: majenta;
+}
+
+[data-type="inj"] {
+  border-color: maroon;
+}
+
+[data-type="ls"] {
+  border-color: lightgreen;
+}
+
+[data-type="sgnd"] {
+  border-color: olive;
+}
+
+[data-type="vr"] {
+  border-color: sienna;
+}
+
 .pin-marker:hover {
-  background-color: #f15a24;
-  color: white;
   transform: scale(2);
   z-index: 2;
 }
 
 .pin-marker.highlight {
-  border: 2px #f15a24 solid;
+  background-color: #fc935a;
 }
 
 .pin-marker.selected {
-  background-color: #fc935a;
+  background-color: #f15a24;
+  color: white;
 }
 
 .connector-container {