diff --git a/packages/client/src/tiptap/editor/menus/background-color/index.tsx b/packages/client/src/tiptap/editor/menus/background-color/index.tsx
index 7d04ed21..5a1d374a 100644
--- a/packages/client/src/tiptap/editor/menus/background-color/index.tsx
+++ b/packages/client/src/tiptap/editor/menus/background-color/index.tsx
@@ -18,7 +18,7 @@ export const BackgroundColor: React.FC<{ editor: Editor }> = ({ editor }) => {
   const backgroundColor = useAttributes(
     editor,
     'textStyle',
-    { backgroundColor: 'transparent' },
+    { backgroundColor: null },
     (attrs) => attrs.backgroundColor
   );
   const isTitleActive = useActive(editor, Title.name);
diff --git a/packages/client/src/tiptap/editor/menus/text-color/index.tsx b/packages/client/src/tiptap/editor/menus/text-color/index.tsx
index 4be8d016..e98fcc62 100644
--- a/packages/client/src/tiptap/editor/menus/text-color/index.tsx
+++ b/packages/client/src/tiptap/editor/menus/text-color/index.tsx
@@ -20,12 +20,7 @@ const FlexStyle = {
 export const TextColor: React.FC<{ editor: Editor }> = ({ editor }) => {
   const isTitleActive = useActive(editor, Title.name);
   const isTextStyleActive = useActive(editor, TextStyle.name);
-  const color = useAttributes<Color, Color['color']>(
-    editor,
-    'textStyle',
-    { color: 'transparent' },
-    (attrs) => attrs.color
-  );
+  const color = useAttributes<Color, Color['color']>(editor, 'textStyle', { color: null }, (attrs) => attrs.color);
 
   const setColor = useCallback(
     (color) => {