diff --git a/public/app/features/annotations/event_manager.ts b/public/app/features/annotations/event_manager.ts
index 67cd8bdd386..2fbc011c1fe 100644
--- a/public/app/features/annotations/event_manager.ts
+++ b/public/app/features/annotations/event_manager.ts
@@ -160,7 +160,7 @@ function addRegionMarking(regions: any[], flotOptions: { grid: { markings: any }
 
   each(regions, (region) => {
     if (region.source) {
-      fillColor = region.source.iconColor || defaultColor;
+      fillColor = region.color || defaultColor;
     } else {
       fillColor = defaultColor;
     }
diff --git a/public/app/features/query/state/DashboardQueryRunner/AnnotationsWorker.test.ts b/public/app/features/query/state/DashboardQueryRunner/AnnotationsWorker.test.ts
index 60042baccb3..cf6736dc11c 100644
--- a/public/app/features/query/state/DashboardQueryRunner/AnnotationsWorker.test.ts
+++ b/public/app/features/query/state/DashboardQueryRunner/AnnotationsWorker.test.ts
@@ -119,7 +119,7 @@ describe('AnnotationsWorker', () => {
                 snapshotData: undefined,
                 datasource: 'Legacy',
               },
-              color: 'pink',
+              color: '#ffc0cb',
               type: 'Test',
               isRegion: false,
             },
@@ -133,7 +133,7 @@ describe('AnnotationsWorker', () => {
                 snapshotData: undefined,
                 datasource: 'NextGen',
               },
-              color: 'pink',
+              color: '#ffc0cb',
               type: 'Test',
               isRegion: false,
             },
@@ -167,7 +167,7 @@ describe('AnnotationsWorker', () => {
                 snapshotData: undefined,
                 datasource: 'NextGen',
               },
-              color: 'pink',
+              color: '#ffc0cb',
               type: 'Test',
               isRegion: false,
             },
@@ -204,7 +204,7 @@ describe('AnnotationsWorker', () => {
                   snapshotData: undefined,
                   datasource: 'Legacy',
                 },
-                color: 'pink',
+                color: '#ffc0cb',
                 type: 'Test',
                 isRegion: false,
               },
@@ -244,7 +244,7 @@ describe('AnnotationsWorker', () => {
                 snapshotData: undefined,
                 datasource: 'Legacy',
               },
-              color: 'pink',
+              color: '#ffc0cb',
               type: 'Test',
               isRegion: false,
             },
diff --git a/public/app/features/query/state/DashboardQueryRunner/DashboardQueryRunner.test.ts b/public/app/features/query/state/DashboardQueryRunner/DashboardQueryRunner.test.ts
index 1e585cd89c9..3bd9fb77b19 100644
--- a/public/app/features/query/state/DashboardQueryRunner/DashboardQueryRunner.test.ts
+++ b/public/app/features/query/state/DashboardQueryRunner/DashboardQueryRunner.test.ts
@@ -247,7 +247,7 @@ function getExpectedForAllResult(): DashboardQueryRunnerResult {
     },
     annotations: [
       {
-        color: 'pink',
+        color: '#ffc0cb',
         id: 'Legacy',
         isRegion: false,
         source: {
@@ -262,7 +262,7 @@ function getExpectedForAllResult(): DashboardQueryRunnerResult {
         type: 'Test',
       },
       {
-        color: 'pink',
+        color: '#ffc0cb',
         id: 'NextGen',
         isRegion: false,
         source: {
@@ -285,7 +285,7 @@ function getExpectedForAllResult(): DashboardQueryRunnerResult {
           id: 'Snapshotted',
           name: 'Test',
         },
-        color: 'pink',
+        color: '#ffc0cb',
         isRegion: true,
         source: {
           datasource: 'Legacy',
diff --git a/public/app/features/query/state/DashboardQueryRunner/SnapshotWorker.test.ts b/public/app/features/query/state/DashboardQueryRunner/SnapshotWorker.test.ts
index 94ad7ad2fa6..e9f669a5ef1 100644
--- a/public/app/features/query/state/DashboardQueryRunner/SnapshotWorker.test.ts
+++ b/public/app/features/query/state/DashboardQueryRunner/SnapshotWorker.test.ts
@@ -77,7 +77,7 @@ describe('SnapshotWorker', () => {
           source: { enable: true, hide: false, name: 'Test', iconColor: 'pink' },
           timeEnd: undefined,
           time: 1,
-          color: 'pink',
+          color: '#ffc0cb',
           type: 'Test',
           isRegion: false,
         });
@@ -86,7 +86,7 @@ describe('SnapshotWorker', () => {
           source: { enable: true, hide: false, name: 'Test', iconColor: 'pink' },
           timeEnd: 2,
           time: 1,
-          color: 'pink',
+          color: '#ffc0cb',
           type: 'Test',
           isRegion: true,
         });
@@ -95,7 +95,7 @@ describe('SnapshotWorker', () => {
           source: { enable: true, hide: false, name: 'Test', iconColor: 'pink' },
           timeEnd: 1,
           time: 1,
-          color: 'pink',
+          color: '#ffc0cb',
           type: 'Test',
           isRegion: false,
         });
diff --git a/public/app/features/query/state/DashboardQueryRunner/utils.ts b/public/app/features/query/state/DashboardQueryRunner/utils.ts
index 0861bb8f383..f95d1dcf261 100644
--- a/public/app/features/query/state/DashboardQueryRunner/utils.ts
+++ b/public/app/features/query/state/DashboardQueryRunner/utils.ts
@@ -1,7 +1,7 @@
 import { cloneDeep } from 'lodash';
 import { Observable, of } from 'rxjs';
 import { AnnotationEvent, AnnotationQuery, DataFrame, DataFrameView } from '@grafana/data';
-import { toDataQueryError } from '@grafana/runtime';
+import { config, toDataQueryError } from '@grafana/runtime';
 
 import { dispatch } from 'app/store/store';
 import { createErrorNotification } from '../../../../core/copy/appNotification';
@@ -55,7 +55,7 @@ export function translateQueryResult(annotation: AnnotationQuery, results: Annot
 
   for (const item of results) {
     item.source = annotation;
-    item.color = annotation.iconColor;
+    item.color = config.theme2.visualization.getColorByName(annotation.iconColor);
     item.type = annotation.name;
     item.isRegion = Boolean(item.timeEnd && item.time !== item.timeEnd);