diff --git a/public/app/core/components/colorpicker/spectrum_picker.ts b/public/app/core/components/colorpicker/spectrum_picker.ts
new file mode 100644
index 00000000000..c262eaac326
--- /dev/null
+++ b/public/app/core/components/colorpicker/spectrum_picker.ts
@@ -0,0 +1,23 @@
+/**
+ * Wrapper for the new ngReact <color-picker> directive for backward compatibility.
+ * Allows remaining <spectrum-picker> untouched in outdated plugins.
+ * Technically, it's just a wrapper for react component with two-way data binding support.
+ */
+import coreModule from '../../core_module';
+
+export function spectrumPicker() {
+  return {
+    restrict: 'E',
+    require: 'ngModel',
+    scope: true,
+    replace: true,
+    template: '<color-picker color="ngModel.$viewValue" onChange="onColorChange"></color-picker>',
+    link: function(scope, element, attrs, ngModel) {
+      scope.ngModel = ngModel;
+      scope.onColorChange = (color) => {
+        ngModel.$setViewValue(color);
+      };
+    }
+  };
+}
+coreModule.directive('spectrumPicker', spectrumPicker);
diff --git a/public/app/core/core.ts b/public/app/core/core.ts
index 3b4fdd68611..e28f8d2d7eb 100644
--- a/public/app/core/core.ts
+++ b/public/app/core/core.ts
@@ -17,6 +17,7 @@ import './components/code_editor/code_editor';
 import './utils/outline';
 import './components/colorpicker/ColorPicker';
 import './components/colorpicker/SeriesColorPicker';
+import './components/colorpicker/spectrum_picker';
 
 import {grafanaAppDirective} from './components/grafana_app';
 import {sideMenuDirective} from './components/sidemenu/sidemenu';