diff --git a/src/ui/public/directives/rows.js b/src/ui/public/directives/rows.js
index 83a38ac1592ab1f..b9bab0cdeb7c2fb 100644
--- a/src/ui/public/directives/rows.js
+++ b/src/ui/public/directives/rows.js
@@ -35,11 +35,7 @@ module.directive('kbnRows', function ($compile, $rootScope, getAppState, Private
           if (contents.type === 'bucket' && contents.aggConfig.getField() && contents.aggConfig.getField().filterable) {
             $cell = createAggConfigResultCell(contents);
           }
-
-          let formatter = contents.aggConfig.fieldFormatter('html');
-          contents = formatter(contents.value,
-            contents.aggConfig.params && contents.aggConfig.params.field && contents.aggConfig.params.field.type);
-
+          contents = contents.toString('html');
         }
 
         if (_.isObject(contents)) {
diff --git a/src/ui/public/stringify/editors/color.html b/src/ui/public/stringify/editors/color.html
index e3ed63b50d5d792..23ab3bd92fb0212 100644
--- a/src/ui/public/stringify/editors/color.html
+++ b/src/ui/public/stringify/editors/color.html
@@ -4,18 +4,14 @@
       <button ng-if="editor.formatParams.colors.length > 1" aria-label="Remove Color" ng-click="removeColor($index)" tooltip="Remove Color" tooltip-append-to-body="true" type="button" class="btn btn-xs btn-danger editor-color-remove">
         <i aria-hidden="true" class="fa fa-times"></i>
       </button>
-      <div class="form-group" ng-if="'number' === editor.field.type ">
-        <label>Range
-          <small>
-            (min:max)
-          </small>
-      </label>
+      <div class="form-group" ng-if="editor.formatParams.fieldType === 'number'">
+        <label>Range <small>(min:max)</small></label>
         <input
           ng-model="color.range"
           class="form-control">
       </div>
-      <div class="form-group" ng-if="'string' === editor.field.type">
-        <label>Regex</label>
+      <div class="form-group" ng-if="editor.formatParams.fieldType === 'string'">
+        <label>Pattern <small>(regular expression)</small></label>
         <input
             ng-model="color.regex"
             class="form-control">
diff --git a/src/ui/public/stringify/types/color.js b/src/ui/public/stringify/types/color.js
index c1ef6caf18de1a2..6e501e232a50b50 100644
--- a/src/ui/public/stringify/types/color.js
+++ b/src/ui/public/stringify/types/color.js
@@ -7,6 +7,7 @@ export default function ColorFormatProvider(Private) {
   const FieldFormat = Private(IndexPatternsFieldFormatProvider);
   const convertTemplate = _.template('<span style="<%- style %>"><%- val %></span>');
   const DEFAULT_COLOR = {
+    fieldType: null, // populated by editor, see controller below
     range: `${Number.NEGATIVE_INFINITY}:${Number.POSITIVE_INFINITY}`,
     regex: '<insert regex>',
     text: '#000000',
@@ -21,12 +22,17 @@ export default function ColorFormatProvider(Private) {
   _Color.id = 'color';
   _Color.title = 'Color';
   _Color.fieldType = [
-    'number', 'string'
+    'number',
+    'string'
   ];
 
   _Color.editor = {
     template: colorTemplate,
     controller($scope) {
+      $scope.$watch('editor.field.type', type => {
+        $scope.editor.formatParams.fieldType = type;
+      });
+
       $scope.addColor = function () {
         $scope.editor.formatParams.colors.push(_.cloneDeep(DEFAULT_COLOR));
       };
@@ -42,24 +48,28 @@ export default function ColorFormatProvider(Private) {
     colors: [_.cloneDeep(DEFAULT_COLOR)]
   };
 
-  _Color.prototype._convert = {
-    html(val, field) {
-
-      var color;
-      if (field.type === 'string' || field === 'string') {
-        color = _.findLast(this.param('colors'), (colorParam) => {
+  _Color.prototype.findColorRuleForVal = function (val) {
+    switch (this.param('fieldType')) {
+      case 'string':
+        return _.findLast(this.param('colors'), (colorParam) => {
           return new RegExp(colorParam.regex).test(val);
         });
-      }
 
-      else {
-        color = _.findLast(this.param('colors'), ({ range }) => {
+      case 'number':
+        return _.findLast(this.param('colors'), ({ range }) => {
           if (!range) return;
           const [start, end] = range.split(':');
           return val >= Number(start) && val <= Number(end);
         });
-      }
 
+      default:
+        return null;
+    }
+  };
+
+  _Color.prototype._convert = {
+    html(val) {
+      const color = this.findColorRuleForVal(val);
       if (!color) return _.asPrettyString(val);
 
       let style = '';