diff --git a/.changeset/metal-parrots-destroy.md b/.changeset/metal-parrots-destroy.md
new file mode 100644
index 00000000..f9c65c08
--- /dev/null
+++ b/.changeset/metal-parrots-destroy.md
@@ -0,0 +1,6 @@
+---
+"@example/ui-playground": patch
+"@genseki/react": patch
+---
+
+feat: auto text color richtext
diff --git a/examples/ui-playground/src/components/slot-before.tsx b/examples/ui-playground/src/components/slot-before.tsx
index 29c3f786..a1ea6e04 100644
--- a/examples/ui-playground/src/components/slot-before.tsx
+++ b/examples/ui-playground/src/components/slot-before.tsx
@@ -14,6 +14,7 @@ import {
   ToolbarSeparator,
 } from '@genseki/react'
 import {
+  AutoTextColorButton,
   BackColorExtension,
   CustomLinkExtension,
   EditorBar,
@@ -43,6 +44,7 @@ export const EditorSlotBefore = () => {
       <ToolbarSeparator className="h-auto" />
       <EditorTextColorPicker />
       <EditorBgColorPicker />
+      <AutoTextColorButton />
       <ToolbarSeparator className="h-auto" />
       <ToolbarGroup className="items-center">
         <TextAlignButtonsGroup>
diff --git a/legacies/react/v2/components/compound/editor/components/auto-text-color-button.tsx b/legacies/react/v2/components/compound/editor/components/auto-text-color-button.tsx
new file mode 100644
index 00000000..b5572d4f
--- /dev/null
+++ b/legacies/react/v2/components/compound/editor/components/auto-text-color-button.tsx
@@ -0,0 +1,27 @@
+'use client'
+
+import { DropSlashIcon } from '@phosphor-icons/react'
+import { useCurrentEditor } from '@tiptap/react'
+
+import { Button } from '../../../../components/primitives/button'
+
+export const AutoTextColorButton = () => {
+  const { editor } = useCurrentEditor()
+
+  if (!editor) throw new Error('Editor provider is missing')
+
+  return (
+    <Button
+      size="md"
+      variant="ghost"
+      className="toolbar-item spaced"
+      onClick={() => {
+        editor.chain().focus().unsetColor().run()
+      }}
+      disabled={!editor.can().unsetColor()}
+      title="Reset text color"
+    >
+      <DropSlashIcon className="size-8" />
+    </Button>
+  )
+}
diff --git a/legacies/react/v2/components/compound/editor/components/index.ts b/legacies/react/v2/components/compound/editor/components/index.ts
index 0561b084..ebac27ec 100644
--- a/legacies/react/v2/components/compound/editor/components/index.ts
+++ b/legacies/react/v2/components/compound/editor/components/index.ts
@@ -1,3 +1,4 @@
+export * from './auto-text-color-button'
 export * from './editor-bar'
 export * from './editor-color-picker'
 export * from './link-button'