diff --git a/public/app/plugins/panel/timeseries/__snapshots__/migrations.test.ts.snap b/public/app/plugins/panel/timeseries/__snapshots__/migrations.test.ts.snap
index ec5e1cc683d..180a898127b 100644
--- a/public/app/plugins/panel/timeseries/__snapshots__/migrations.test.ts.snap
+++ b/public/app/plugins/panel/timeseries/__snapshots__/migrations.test.ts.snap
@@ -101,6 +101,60 @@ Object {
 }
 `;
 
+exports[`Graph Migrations preserves colors from series overrides 1`] = `
+Object {
+  "fieldConfig": Object {
+    "defaults": Object {
+      "custom": Object {
+        "axisPlacement": "hidden",
+        "drawStyle": "line",
+        "fillOpacity": 60,
+        "gradientMode": "opacity",
+        "lineInterpolation": "stepAfter",
+        "lineWidth": 1,
+        "showPoints": "never",
+        "spanNulls": true,
+      },
+      "nullValueMode": "null",
+      "unit": "short",
+    },
+    "overrides": Array [
+      Object {
+        "matcher": Object {
+          "id": "byName",
+          "options": "A-series",
+        },
+        "properties": Array [
+          Object {
+            "id": "color",
+            "value": Object {
+              "fixedColor": "rgba(165, 72, 170, 0.77)",
+              "mode": "fixed",
+            },
+          },
+        ],
+      },
+    ],
+  },
+  "options": Object {
+    "legend": Object {
+      "calcs": Array [
+        "mean",
+        "lastNotNull",
+        "max",
+        "min",
+        "sum",
+      ],
+      "displayMode": "table",
+      "placement": "bottom",
+    },
+    "tooltip": Object {
+      "mode": "single",
+    },
+  },
+}
+`;
+
 exports[`Graph Migrations simple bars 1`] = `
 Object {
   "fieldConfig": Object {
diff --git a/public/app/plugins/panel/timeseries/migrations.test.ts b/public/app/plugins/panel/timeseries/migrations.test.ts
index 5086a53ffca..289fa80d7a3 100644
--- a/public/app/plugins/panel/timeseries/migrations.test.ts
+++ b/public/app/plugins/panel/timeseries/migrations.test.ts
@@ -1,7 +1,16 @@
-import { PanelModel } from '@grafana/data';
+import { PanelModel, FieldConfigSource } from '@grafana/data';
 import { graphPanelChangedHandler } from './migrations';
 
 describe('Graph Migrations', () => {
+  let prevFieldConfig: FieldConfigSource;
+
+  beforeEach(() => {
+    prevFieldConfig = {
+      defaults: {},
+      overrides: [],
+    };
+  });
+
   it('simple bars', () => {
     const old: any = {
       angular: {
@@ -9,7 +18,7 @@ describe('Graph Migrations', () => {
       },
     };
     const panel = {} as PanelModel;
-    panel.options = graphPanelChangedHandler(panel, 'graph', old);
+    panel.options = graphPanelChangedHandler(panel, 'graph', old, prevFieldConfig);
     expect(panel).toMatchSnapshot();
   });
 
@@ -18,7 +27,16 @@ describe('Graph Migrations', () => {
       angular: stairscase,
     };
     const panel = {} as PanelModel;
-    panel.options = graphPanelChangedHandler(panel, 'graph', old);
+
+    prevFieldConfig = {
+      defaults: {
+        custom: {},
+        unit: 'areaF2',
+        displayName: 'DISPLAY NAME',
+      },
+      overrides: [],
+    };
+    panel.options = graphPanelChangedHandler(panel, 'graph', old, prevFieldConfig);
     expect(panel).toMatchSnapshot();
   });
 
@@ -27,7 +45,7 @@ describe('Graph Migrations', () => {
       angular: twoYAxis,
     };
     const panel = {} as PanelModel;
-    panel.options = graphPanelChangedHandler(panel, 'graph', old);
+    panel.options = graphPanelChangedHandler(panel, 'graph', old, prevFieldConfig);
     expect(panel).toMatchSnapshot();
   });
 
@@ -36,7 +54,16 @@ describe('Graph Migrations', () => {
       angular: stepedColordLine,
     };
     const panel = {} as PanelModel;
-    panel.options = graphPanelChangedHandler(panel, 'graph', old);
+    panel.options = graphPanelChangedHandler(panel, 'graph', old, prevFieldConfig);
+    expect(panel).toMatchSnapshot();
+  });
+
+  it('preserves colors from series overrides', () => {
+    const old: any = {
+      angular: customColor,
+    };
+    const panel = {} as PanelModel;
+    panel.options = graphPanelChangedHandler(panel, 'graph', old, prevFieldConfig);
     expect(panel).toMatchSnapshot();
   });
 
@@ -56,7 +83,7 @@ describe('Graph Migrations', () => {
         },
       };
       const panel = {} as PanelModel;
-      panel.options = graphPanelChangedHandler(panel, 'graph', old);
+      panel.options = graphPanelChangedHandler(panel, 'graph', old, prevFieldConfig);
       expect(panel).toMatchSnapshot();
     });
     test('with single value', () => {
@@ -74,7 +101,7 @@ describe('Graph Migrations', () => {
         },
       };
       const panel = {} as PanelModel;
-      panel.options = graphPanelChangedHandler(panel, 'graph', old);
+      panel.options = graphPanelChangedHandler(panel, 'graph', old, prevFieldConfig);
       expect(panel).toMatchSnapshot();
     });
     test('with multiple values', () => {
@@ -82,7 +109,7 @@ describe('Graph Migrations', () => {
         angular: legend,
       };
       const panel = {} as PanelModel;
-      panel.options = graphPanelChangedHandler(panel, 'graph', old);
+      panel.options = graphPanelChangedHandler(panel, 'graph', old, prevFieldConfig);
       expect(panel).toMatchSnapshot();
     });
   });
@@ -93,7 +120,7 @@ describe('Graph Migrations', () => {
         angular: stacking,
       };
       const panel = {} as PanelModel;
-      panel.options = graphPanelChangedHandler(panel, 'graph', old);
+      panel.options = graphPanelChangedHandler(panel, 'graph', old, prevFieldConfig);
       expect(panel).toMatchSnapshot();
     });
     test('groups', () => {
@@ -101,7 +128,7 @@ describe('Graph Migrations', () => {
         angular: stackingGroups,
       };
       const panel = {} as PanelModel;
-      panel.options = graphPanelChangedHandler(panel, 'graph', old);
+      panel.options = graphPanelChangedHandler(panel, 'graph', old, prevFieldConfig);
       expect(panel).toMatchSnapshot();
     });
   });
@@ -131,7 +158,7 @@ describe('Graph Migrations', () => {
         },
       };
       const panel = {} as PanelModel;
-      panel.options = graphPanelChangedHandler(panel, 'graph', old);
+      panel.options = graphPanelChangedHandler(panel, 'graph', old, prevFieldConfig);
       expect(panel.fieldConfig.defaults.custom.thresholdsStyle.mode).toBe('area');
       expect(panel.fieldConfig.defaults.thresholds?.steps).toMatchInlineSnapshot(`
         Array [
@@ -176,7 +203,7 @@ describe('Graph Migrations', () => {
       };
 
       const panel = {} as PanelModel;
-      panel.options = graphPanelChangedHandler(panel, 'graph', old);
+      panel.options = graphPanelChangedHandler(panel, 'graph', old, prevFieldConfig);
       expect(panel.fieldConfig.defaults.custom.thresholdsStyle.mode).toBe('line+area');
       expect(panel.fieldConfig.defaults.thresholds?.steps).toMatchInlineSnapshot(`
         Array [
@@ -213,7 +240,7 @@ describe('Graph Migrations', () => {
       };
 
       const panel = {} as PanelModel;
-      panel.options = graphPanelChangedHandler(panel, 'graph', old);
+      panel.options = graphPanelChangedHandler(panel, 'graph', old, prevFieldConfig);
       expect(panel.fieldConfig.defaults.custom.thresholdsStyle.mode).toBe('line+area');
       expect(panel.fieldConfig.defaults.thresholds?.steps).toMatchInlineSnapshot(`
         Array [
@@ -266,22 +293,97 @@ describe('Graph Migrations', () => {
         ],
       };
 
-      panel.options = graphPanelChangedHandler(panel, 'graph', {});
+      panel.options = graphPanelChangedHandler(panel, 'graph', {}, prevFieldConfig);
       expect(panel.fieldConfig.defaults.custom.hideFrom).toEqual({ viz: false, legend: false, tooltip: false });
       expect(panel.fieldConfig.overrides[0].properties[0].value).toEqual({ viz: true, legend: false, tooltip: false });
     });
   });
 });
 
-const stairscase = {
-  fieldConfig: {
-    defaults: {
-      custom: {},
-      unit: 'areaF2',
-      displayName: 'DISPLAY NAME',
-    },
-    overrides: [],
+const customColor = {
+  aliasColors: {},
+  dashLength: 10,
+  fill: 5,
+  fillGradient: 6,
+  legend: {
+    avg: true,
+    current: true,
+    max: true,
+    min: true,
+    show: true,
+    total: true,
+    values: true,
+    alignAsTable: true,
   },
+  lines: true,
+  linewidth: 1,
+  nullPointMode: 'null',
+  options: {
+    alertThreshold: true,
+  },
+  pointradius: 2,
+  seriesOverrides: [
+    {
+      $$hashKey: 'object:12',
+      alias: 'A-series',
+      color: 'rgba(165, 72, 170, 0.77)',
+    },
+  ],
+  spaceLength: 10,
+  steppedLine: true,
+  thresholds: [],
+  timeRegions: [],
+  title: 'Panel Title',
+  tooltip: {
+    shared: true,
+    sort: 0,
+    value_type: 'individual',
+  },
+  type: 'graph',
+  xaxis: {
+    buckets: null,
+    mode: 'time',
+    name: null,
+    show: true,
+    values: [],
+  },
+  yaxes: [
+    {
+      $$hashKey: 'object:42',
+      format: 'short',
+      label: null,
+      logBase: 1,
+      max: null,
+      min: null,
+      show: false,
+    },
+    {
+      $$hashKey: 'object:43',
+      format: 'short',
+      label: null,
+      logBase: 1,
+      max: null,
+      min: null,
+      show: true,
+    },
+  ],
+  yaxis: {
+    align: false,
+    alignLevel: null,
+  },
+  timeFrom: null,
+  timeShift: null,
+  bars: false,
+  dashes: false,
+  hiddenSeries: false,
+  percentage: false,
+  points: false,
+  stack: false,
+  decimals: 1,
+  datasource: null,
+};
+
+const stairscase = {
   aliasColors: {},
   dashLength: 10,
   fill: 5,
diff --git a/public/app/plugins/panel/timeseries/migrations.ts b/public/app/plugins/panel/timeseries/migrations.ts
index 48f96b20261..3fc27251446 100644
--- a/public/app/plugins/panel/timeseries/migrations.ts
+++ b/public/app/plugins/panel/timeseries/migrations.ts
@@ -8,7 +8,7 @@ import {
   FieldMatcherID,
   fieldReducers,
   NullValueMode,
-  PanelModel,
+  PanelTypeChangedHandler,
   Threshold,
   ThresholdsMode,
 } from '@grafana/data';
@@ -32,14 +32,18 @@ import { defaultGraphConfig } from './config';
 /**
  * This is called when the panel changes from another panel
  */
-export const graphPanelChangedHandler = (
-  panel: PanelModel<Partial<TimeSeriesOptions>> | any,
-  prevPluginId: string,
-  prevOptions: any
+export const graphPanelChangedHandler: PanelTypeChangedHandler = (
+  panel,
+  prevPluginId,
+  prevOptions,
+  prevFieldConfig
 ) => {
   // Changing from angular/flot panel to react/uPlot
   if (prevPluginId === 'graph' && prevOptions.angular) {
-    const { fieldConfig, options } = flotToGraphOptions(prevOptions.angular);
+    const { fieldConfig, options } = flotToGraphOptions({
+      ...prevOptions.angular,
+      fieldConfig: prevFieldConfig,
+    });
     panel.fieldConfig = fieldConfig; // Mutates the incoming panel
     return options;
   }
@@ -224,6 +228,15 @@ export function flotToGraphOptions(angular: any): { fieldConfig: FieldConfigSour
               value: { mode: StackingMode.Normal, group: v },
             });
             break;
+          case 'color':
+            rule.properties.push({
+              id: 'color',
+              value: {
+                fixedColor: v,
+                mode: FieldColorModeId.Fixed,
+              },
+            });
+            break;
           default:
             console.log('Ignore override migration:', seriesOverride.alias, p, v);
         }