diff --git a/NEWS b/NEWS
index 31c1d2f62..3a6501718 100644
--- a/NEWS
+++ b/NEWS
@@ -20,6 +20,7 @@ Enhancements
  - [web] list search now displays a warning regarding the minlength constraint
  - [web] loading an LDAP-based addressbook is now instantaneous when listRequiresDot is disabled (#438, #3464)
  - [web] improve display of messages with many recipients
+ - [web] colorize categories chips in event and task viewers
  - [web] initial stylesheet for printing
  - [eas] now support EAS MIME truncation
 
diff --git a/UI/Templates/SchedulerUI/UIxAppointmentViewTemplate.wox b/UI/Templates/SchedulerUI/UIxAppointmentViewTemplate.wox
index 6f2bb09a6..82e05b960 100644
--- a/UI/Templates/SchedulerUI/UIxAppointmentViewTemplate.wox
+++ b/UI/Templates/SchedulerUI/UIxAppointmentViewTemplate.wox
@@ -41,6 +41,9 @@
         <md-list-item ng-show="editor.component.categories.length > 0">
           <md-chips class="sg-readonly" ng-model="::editor.component.categories" readonly="true">
             <md-chip-template>
+              <span class="sg-chip-color" style="z-index: 1">
+                <span ng-style="{ 'background-color': editor.service.$categories[$chip] }"><!-- color --></span>
+              </span>
               <span>{{$chip}}</span>
             </md-chip-template>
           </md-chips>
diff --git a/UI/Templates/SchedulerUI/UIxTaskViewTemplate.wox b/UI/Templates/SchedulerUI/UIxTaskViewTemplate.wox
index 88c845f3f..cc9b03ee6 100644
--- a/UI/Templates/SchedulerUI/UIxTaskViewTemplate.wox
+++ b/UI/Templates/SchedulerUI/UIxTaskViewTemplate.wox
@@ -41,6 +41,9 @@
         <md-list-item ng-show="editor.component.categories.length > 0">
           <md-chips class="sg-readonly" ng-model="::editor.component.categories" readonly="true">
             <md-chip-template>
+              <span class="sg-chip-color" style="z-index: 1">
+                <span ng-style="{ 'background-color': editor.service.$categories[$chip] }"><!-- color --></span>
+              </span>
               <span>{{$chip}}</span>
             </md-chip-template>
           </md-chips>
diff --git a/UI/WebServerResources/js/Scheduler/ComponentController.js b/UI/WebServerResources/js/Scheduler/ComponentController.js
index 69a1b533d..d57443d54 100644
--- a/UI/WebServerResources/js/Scheduler/ComponentController.js
+++ b/UI/WebServerResources/js/Scheduler/ComponentController.js
@@ -6,10 +6,11 @@
   /**
    * @ngInject
    */
-  ComponentController.$inject = ['$rootScope', '$mdDialog', 'Calendar', 'AddressBook', 'Alarm', 'stateComponent'];
-  function ComponentController($rootScope, $mdDialog, Calendar, AddressBook, Alarm, stateComponent) {
+  ComponentController.$inject = ['$rootScope', '$mdDialog', 'Calendar', 'Component', 'AddressBook', 'Alarm', 'stateComponent'];
+  function ComponentController($rootScope, $mdDialog, Calendar, Component, AddressBook, Alarm, stateComponent) {
     var vm = this, component;
 
+    vm.service = Component;
     vm.component = stateComponent;
     vm.close = close;
     vm.cardFilter = cardFilter;