diff --git a/packages/renderer/src/utils/get-header-color.ts b/packages/renderer/src/utils/get-header-color.ts
new file mode 100644
index 000000000..9e54489a3
--- /dev/null
+++ b/packages/renderer/src/utils/get-header-color.ts
@@ -0,0 +1,3 @@
+export const getHeaderColor = (rgbColor: string, opacity?: number) => {
+  return rgbColor.replace('rgb', 'rgba').replace(')', `, ${opacity || 0.8})`);
+};
diff --git a/packages/renderer/src/utils/index.ts b/packages/renderer/src/utils/index.ts
index 85a115248..bbd5e34fd 100644
--- a/packages/renderer/src/utils/index.ts
+++ b/packages/renderer/src/utils/index.ts
@@ -3,3 +3,4 @@ export * from './normalize-server-url';
 export * from './set-local-storage-setttings';
 export * from './constrain-sidebar-width';
 export * from './title-case';
+export * from './get-header-color';