diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/pdf-viewer/pdf-viewer.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/pdf-viewer/pdf-viewer.component.ts
index c489cb7ed..b9f9e816b 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/pdf-viewer/pdf-viewer.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/pdf-viewer/pdf-viewer.component.ts
@@ -437,8 +437,8 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha
 
         this.documentViewer.getTool('AnnotationCreateRectangle').setStyles({
             StrokeThickness: 2,
-            StrokeColor: this._annotationDrawService.getColor(this.instance, dossierTemplateId, 'manual'),
-            FillColor: this._annotationDrawService.getColor(this.instance, dossierTemplateId, 'manual'),
+            StrokeColor: this._annotationDrawService.getAndConvertColor(this.instance, dossierTemplateId, 'manual'),
+            FillColor: this._annotationDrawService.getAndConvertColor(this.instance, dossierTemplateId, 'manual'),
             Opacity: 0.6,
         });
     }
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts
index e78c87c5f..145405297 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts
@@ -693,9 +693,9 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
         this._instance.Core.annotationManager.showAnnotations(annotations);
     }
 
-    private _setAnnotationsColor(annotations, customData: string) {
+    private async _setAnnotationsColor(annotations: Annotation[], customData: string) {
         annotations.forEach(annotation => {
-            annotation['StrokeColor'] = annotation.getCustomData(customData);
+            annotation['StrokeColor'] = this._annotationDrawService.convertColor(this._instance, annotation.getCustomData(customData));
         });
     }
 }
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/services/annotation-draw.service.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/services/annotation-draw.service.ts
index 29a8f96af..304972eb5 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/services/annotation-draw.service.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/services/annotation-draw.service.ts
@@ -59,7 +59,15 @@ export class AnnotationDrawService {
                 color = this._appStateService.getDictionaryColor(superType, dossierTemplateId);
                 break;
         }
-        const rgbColor = hexToRgb(color);
+        return color;
+    }
+
+    public getAndConvertColor(activeViewer: WebViewerInstance, dossierTemplateId: string, superType: string, dictionary?: string) {
+        return this.convertColor(activeViewer, this.getColor(activeViewer, dossierTemplateId, superType, dictionary));
+    }
+
+    public convertColor(activeViewer: WebViewerInstance, hexColor: string) {
+        const rgbColor = hexToRgb(hexColor);
         return new activeViewer.Core.Annotations.Color(rgbColor.r, rgbColor.g, rgbColor.b);
     }
 
@@ -131,7 +139,7 @@ export class AnnotationDrawService {
         rectangleAnnot.Width = rectangle.width + 2;
         rectangleAnnot.Height = rectangle.height + 2;
         rectangleAnnot.ReadOnly = true;
-        rectangleAnnot.StrokeColor = this.getColor(activeViewer, dossierTemplateId, 'analysis', 'analysis');
+        rectangleAnnot.StrokeColor = this.getAndConvertColor(activeViewer, dossierTemplateId, 'analysis', 'analysis');
         rectangleAnnot.StrokeThickness = 1;
 
         return rectangleAnnot;
@@ -154,7 +162,12 @@ export class AnnotationDrawService {
             annotation.X = firstPosition.topLeft.x;
             annotation.Y = pageHeight - (firstPosition.topLeft.y + firstPosition.height);
             annotation.Width = firstPosition.width;
-            annotation.FillColor = this.getColor(activeViewer, dossierTemplateId, annotationWrapper.superType, annotationWrapper.type);
+            annotation.FillColor = this.getAndConvertColor(
+                activeViewer,
+                dossierTemplateId,
+                annotationWrapper.superType,
+                annotationWrapper.type,
+            );
             annotation.Opacity = annotationWrapper.isChangeLogRemoved ? 0.2 : 0.6;
             annotation.Height = firstPosition.height;
             annotation.Intensity = 100;
@@ -167,7 +180,12 @@ export class AnnotationDrawService {
         annotation.setContents(annotationWrapper.content);
 
         annotation.PageNumber = pageNumber;
-        annotation.StrokeColor = this.getColor(activeViewer, dossierTemplateId, annotationWrapper.superType, annotationWrapper.type);
+        annotation.StrokeColor = this.getAndConvertColor(
+            activeViewer,
+            dossierTemplateId,
+            annotationWrapper.superType,
+            annotationWrapper.type,
+        );
         annotation.Id = annotationWrapper.id;
         annotation.ReadOnly = true;
         // change log entries are drawn lighter