diff --git a/src/wireviz/templates/colors_macro.html b/src/wireviz/templates/colors_macro.html
new file mode 100644
index 0000000..2961386
--- /dev/null
+++ b/src/wireviz/templates/colors_macro.html
@@ -0,0 +1,47 @@
+{% macro colorbar_cell(color, is_first, is_last, port_last, mini=false) -%}
+  {% if is_first%}
+    {% set side_l = "L" %}
+  {% else %}
+    {% set side_l = "" %}
+  {% endif %}
+  {% if is_last%}
+    {% set side_r = "R" %}
+  {% else %}
+    {% set side_r = "" %}
+  {% endif %}
+  {% if mini %}
+    {% set mini_params = 'height="8" width="8" fixedsize="true"' %}
+  {% else %}
+    {% set mini_params = "" %}
+  {% endif %}
+
+  {% if is_last and port_last %}
+  <td port="{{port_last}}" bgcolor="{{color.html}}" sides="TB{{side_l}}{{side_r}}" {{mini_params}}> </td>
+  {% else %}
+  <td bgcolor="{{color.html}}" sides="TB{{side_l}}{{side_r}}" {{mini_params}}> </td>
+  {% endif %}
+{%- endmacro %}
+
+{% macro colorbar_cells(color, color_len, port_last, mini=false) -%}
+  {% for subcolor in color.colors %}
+    {% if loop.index == 1 %}
+      {%set is_first = "true" %}
+    {% else %}
+      {%set is_first = "false" %}
+    {% endif %}
+    {% if loop.index == color_len %}
+      {%set is_last = "true" %}
+    {% else %}
+      {%set is_last = "false" %}
+    {% endif %}
+    {{ colorbar_cell(subcolor, is_first, is_last, port_last, mini) }}
+  {% endfor %}
+{%- endmacro %}
+
+{% macro color_minitable(color, color_len) -%}
+  <table border="0" cellborder="1" cellspacing="0" cellpadding="0" height="8" width="{{ color_len * 8 }}">
+    <tr>
+      {{ colorbar_cells(color, color_len, port_last="", mini="true") }}
+    </tr>
+  </table>
+{%- endmacro %}
diff --git a/src/wireviz/templates/connector.html b/src/wireviz/templates/connector.html
index a68b3bd..0230f7a 100644
--- a/src/wireviz/templates/connector.html
+++ b/src/wireviz/templates/connector.html
@@ -1,26 +1,48 @@
+{% import 'colors_macro.html' as colors %}
 <!-- Connector definition Table !-->
-<!-- Has 3 columns !-->
-<table border="0" cellborder="1" cellspacing="0" cellpadding="3" bgcolor="#FFFFFF">
-
+<table border="0" cellborder="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF">
   <!-- Header !-->
   <tr>
-    <td colspan="{{ columns }}">
-      <b> {{ designator }} </b>
+    <td>
+      <table border="0" cellborder="1" cellspacing="0" cellpadding="3" bgcolor="#FFFFFF">
+        <tr>
+          <td>
+            <b> {{ designator }} </b>
+          </td>
+        </tr>
+      </table>
     </td>
   </tr>
   <tr>
-    <td> {{ type }} </td>
-    <td> {{ subtype }} </td>
-    {% if show_pincount %} <td > {{ pincount }}-pin </td> {% endif %}
+    <td>
+      <table border="0" cellborder="1" cellpadding="3" cellspacing="0">
+        <tr>
+          <td> {{ type }} </td>
+          <td> {{ subtype }} </td>
+          {% if show_pincount %} <td > {{ pincount }}-pin </td> {% endif %}
+          {% if color %} <td > {{ color }} </td> {% endif %}
+        </tr>
+      </table>
+    </td>
   </tr>
   <!-- Pins !-->
-  {% for pin in pins  %}
-    <tr>
-      {% if use_left %}  <td port="p{{ pin.index + 1 }}l"> {{ pin.id }} </td> {% endif %}
-      <td colspan="2"> {{ pin.label }} </td>
-      {% if use_right %} <td port="p{{ pin.index + 1 }}r"> {{ pin.id }} </td> {% endif %}
-    </tr>
-  {% endfor %}
+  <tr>
+    <td>
+      <table border="0" cellborder="1" cellpadding="3" cellspacing="0">
+        {% for pin in pins  %}
+          <tr>
+            {% if use_left %}  <td port="p{{ pin.index + 1 }}l"> {{ pin.id }} </td> {% endif %}
+            <td colspan="2"> {{ pin.label }} </td>
+            {% if has_pincolors %}
+            <td sides="TBL"> {{ pin.color }} </td>
+            <td sides="TBR"> { colors.color_minitable(pin.color, pin.color_len) } </td>
+            {% endif %}
+            {% if use_right %} <td port="p{{ pin.index + 1 }}r"> {{ pin.id }} </td> {% endif %}
+          </tr>
+        {% endfor %}
+      </table>
+    </td>
+  </tr>
   <!-- Additional Components !-->
 </table>
 
diff --git a/src/wireviz/templates/simple-connector.html b/src/wireviz/templates/simple-connector.html
new file mode 100644
index 0000000..5bcd0c0
--- /dev/null
+++ b/src/wireviz/templates/simple-connector.html
@@ -0,0 +1,20 @@
+{% import 'colors_macro.html' as colors %}
+{% set pin = pins[0] %}
+<!-- Connector definition Table !-->
+<table border="0" cellborder="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF">
+  <!-- Header !-->
+  <tr>
+    <td>
+      <table border="0" cellborder="1" cellpadding="3" cellspacing="0">
+        <tr>
+          <td port="p1l"> {{ type }} </td>
+          <td > {{ subtype }} </td>
+          {% if show_pincount %} <td> {{ pincount }}-pin </td> {% endif %}
+          {% if color %} <td > {{ color }} </td> {% endif %}
+          {% if color %} {{ colors.colorbar_cells(color, color_len, "p1r") }} {% endif %}
+        </tr>
+      </table>
+    </td>
+  </tr>
+</table>
+