diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/home/recent_folder/mobile_recent_view.dart b/frontend/appflowy_flutter/lib/mobile/presentation/home/recent_folder/mobile_recent_view.dart
index 53f592f89d..18a0338fbb 100644
--- a/frontend/appflowy_flutter/lib/mobile/presentation/home/recent_folder/mobile_recent_view.dart
+++ b/frontend/appflowy_flutter/lib/mobile/presentation/home/recent_folder/mobile_recent_view.dart
@@ -7,11 +7,11 @@ import 'package:appflowy/plugins/base/emoji/emoji_text.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart';
 import 'package:appflowy/shared/appflowy_network_image.dart';
 import 'package:appflowy/shared/flowy_gradient_colors.dart';
+import 'package:appflowy/util/string_extension.dart';
 import 'package:appflowy/workspace/application/view/view_ext.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
 import 'package:appflowy_backend/protobuf/flowy-user/protobuf.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
-import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
@@ -171,9 +171,12 @@ class _RecentCover extends StatelessWidget {
     }
 
     if (type == PageStyleCoverImageType.pureColor) {
-      return ColoredBox(
-        color: FlowyTint.fromId(value).color(context),
-      );
+      final color = value.coverColor(context);
+      if (color != null) {
+        return ColoredBox(
+          color: color,
+        );
+      }
     }
 
     if (type == PageStyleCoverImageType.gradientColor) {
diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/cover/document_immersive_cover.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/cover/document_immersive_cover.dart
index a003b8f4c2..fd0a5a4885 100644
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/cover/document_immersive_cover.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/cover/document_immersive_cover.dart
@@ -10,12 +10,12 @@ import 'package:appflowy/plugins/document/presentation/editor_plugins/header/emo
 import 'package:appflowy/shared/appflowy_network_image.dart';
 import 'package:appflowy/shared/flowy_gradient_colors.dart';
 import 'package:appflowy/shared/google_fonts_extension.dart';
+import 'package:appflowy/util/string_extension.dart';
 import 'package:appflowy/workspace/application/settings/appearance/base_appearance.dart';
 import 'package:appflowy/workspace/application/view/view_bloc.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
 import 'package:appflowy_backend/protobuf/flowy-user/protobuf.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
-import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flowy_infra_ui/widget/ignore_parent_gesture.dart';
 import 'package:flutter/material.dart';
@@ -210,7 +210,7 @@ class _DocumentImmersiveCoverState extends State<DocumentImmersiveCover> {
       return Container(
         height: height,
         width: double.infinity,
-        color: FlowyTint.fromId(cover.value).color(context),
+        color: cover.value.coverColor(context),
       );
     }
 
diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/desktop_cover.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/desktop_cover.dart
index 10f644d7cc..7e576363cd 100644
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/desktop_cover.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/desktop_cover.dart
@@ -89,10 +89,14 @@ class _DesktopCoverState extends State<DesktopCover> {
           }
 
           if (type == PageStyleCoverImageType.pureColor) {
+            // try to parse the color from the tint id,
+            //  if it fails, try to parse the color as a hex string
+            final color = FlowyTint.fromId(cover.value)?.color(context) ??
+                cover.value.tryToColor();
             return Container(
               height: height,
               width: double.infinity,
-              color: FlowyTint.fromId(cover.value).color(context),
+              color: color,
             );
           }
 
diff --git a/frontend/appflowy_flutter/lib/util/string_extension.dart b/frontend/appflowy_flutter/lib/util/string_extension.dart
index 3db25f7885..cadd27fe80 100644
--- a/frontend/appflowy_flutter/lib/util/string_extension.dart
+++ b/frontend/appflowy_flutter/lib/util/string_extension.dart
@@ -1,8 +1,9 @@
 import 'dart:io';
 
-import 'package:flutter/material.dart';
-
 import 'package:appflowy/shared/patterns/common_patterns.dart';
+import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:flowy_infra/theme_extension.dart';
+import 'package:flutter/material.dart';
 
 extension StringExtension on String {
   static const _specialCharacters = r'\/:*?"<>| ';
@@ -35,4 +36,13 @@ extension StringExtension on String {
 
   /// Returns true if the string is a appflowy cloud url.
   bool get isAppFlowyCloudUrl => appflowyCloudUrlRegex.hasMatch(this);
+
+  /// Returns the color of the string.
+  ///
+  /// ONLY used for the cover.
+  Color? coverColor(BuildContext context) {
+    // try to parse the color from the tint id,
+    //  if it fails, try to parse the color as a hex string
+    return FlowyTint.fromId(this)?.color(context) ?? tryToColor();
+  }
 }
diff --git a/frontend/appflowy_flutter/packages/flowy_infra/lib/theme_extension.dart b/frontend/appflowy_flutter/packages/flowy_infra/lib/theme_extension.dart
index 7ee3c77a01..2eeb901ef4 100644
--- a/frontend/appflowy_flutter/packages/flowy_infra/lib/theme_extension.dart
+++ b/frontend/appflowy_flutter/packages/flowy_infra/lib/theme_extension.dart
@@ -189,13 +189,15 @@ enum FlowyTint {
     }
   }
 
-  static FlowyTint fromId(String id) {
-    return FlowyTint.values.firstWhere(
-      (element) => element.id == id,
-      orElse: () => FlowyTint.tint1,
-    );
+  static FlowyTint? fromId(String id) {
+    for (final value in FlowyTint.values) {
+      if (value.id == id) {
+        return value;
+      }
+    }
+    return null;
   }
-  
+
   Color color(BuildContext context) => switch (this) {
         FlowyTint.tint1 => AFThemeExtension.of(context).tint1,
         FlowyTint.tint2 => AFThemeExtension.of(context).tint2,