diff --git a/app/modules/history/history/history-templates/history-color.jade b/app/modules/history/history/history-templates/history-color.jade
index d97314bb..89b69d87 100644
--- a/app/modules/history/history/history-templates/history-color.jade
+++ b/app/modules/history/history/history-templates/history-color.jade
@@ -1,9 +1,17 @@
-.diff-status-wrapper
+.diff-color-wrapper
     span.key(
         translate="ACTIVITY.FIELDS.COLOR"
     )
-    span.diff(ng-if="vm.diff[0]") {{vm.diff[0]}}
+    span.diff(
+        ng-if="vm.diff[0]"
+        ng-style="{background: vm.diff[0]}"
+        title="{{vm.diff[0]}}"
+    )
     tg-svg(
         svg-icon="icon-arrow-right"
     )
-    span.diff(ng-if="vm.diff[1]") {{vm.diff[1]}}
+    span.diff(
+        ng-if="vm.diff[1]"
+        ng-style="{background: vm.diff[1]}"
+        title="{{vm.diff[1]}}"
+    )
diff --git a/app/modules/history/history/history-templates/history-templates.scss b/app/modules/history/history/history-templates/history-templates.scss
index 77d5d7ed..504bd69a 100644
--- a/app/modules/history/history/history-templates/history-templates.scss
+++ b/app/modules/history/history/history-templates/history-templates.scss
@@ -25,4 +25,13 @@
             background: rgba($red-light, .3);
         }
     }
+    .diff-color-wrapper {
+        align-items: center;
+        display: flex;
+        .diff {
+            display: inline-block;
+            height: 1.2rem;
+            width: 1.2rem;
+        }
+    }
 }