diff --git a/frontend/src/lib/components/AnnotationLayer.svelte b/frontend/src/lib/components/AnnotationLayer.svelte
index aa9831cb..3a8cfae6 100644
--- a/frontend/src/lib/components/AnnotationLayer.svelte
+++ b/frontend/src/lib/components/AnnotationLayer.svelte
@@ -35,6 +35,13 @@ let {
 let drawStart = $state<{ x: number; y: number } | null>(null);
 let drawRect = $state<DrawRect | null>(null);
 
+function hexToRgba(hex: string, alpha: number): string {
+	const r = parseInt(hex.slice(1, 3), 16);
+	const g = parseInt(hex.slice(3, 5), 16);
+	const b = parseInt(hex.slice(5, 7), 16);
+	return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
 function getNormalizedCoords(event: PointerEvent, element: HTMLElement): { x: number; y: number } {
 	const rect = element.getBoundingClientRect();
 	return {
@@ -111,8 +118,7 @@ const containerStyle = $derived(
 				top: {annotation.y * 100}%;
 				width: {annotation.width * 100}%;
 				height: {annotation.height * 100}%;
-				background-color: {annotation.color};
-				opacity: 0.3;
+				background-color: {hexToRgba(annotation.color, 0.3)};
 				pointer-events: {canAnnotate ? 'auto' : 'none'};
 			"
 		>