diff --git a/src/packages/animatingnumbers/countup.scss b/src/packages/animatingnumbers/countup.scss
index 9fc6dd20ce..c98a7b6c6c 100644
--- a/src/packages/animatingnumbers/countup.scss
+++ b/src/packages/animatingnumbers/countup.scss
@@ -25,7 +25,7 @@
     display: flex;
     height: 80%;
     align-items: flex-end;
-    color: $countup-bg-color;
+    color: $countup-separator-color;
   }
 
   &-number {
diff --git a/src/packages/animatingnumbers/demos/h5/demo2.tsx b/src/packages/animatingnumbers/demos/h5/demo2.tsx
index 324a8812e7..fe7dcf1399 100644
--- a/src/packages/animatingnumbers/demos/h5/demo2.tsx
+++ b/src/packages/animatingnumbers/demos/h5/demo2.tsx
@@ -7,6 +7,7 @@ const Demo2 = () => {
     nutuiCountupBgColor: `var(--nutui-color-primary)`,
     nutuiCountupColor: `#fff`,
     nutuiCountupLrMargin: `1px`,
+    nutuiCountupSeparatorColor: `var(--nutui-color-primary)`,
   }
   const [value, setEndNumer] = useState('1570.99')
   useEffect(() => {
diff --git a/src/packages/animatingnumbers/demos/taro/demo2.tsx b/src/packages/animatingnumbers/demos/taro/demo2.tsx
index a16bb9d4a5..caa6b8ac4a 100644
--- a/src/packages/animatingnumbers/demos/taro/demo2.tsx
+++ b/src/packages/animatingnumbers/demos/taro/demo2.tsx
@@ -7,6 +7,7 @@ const Demo2 = () => {
     nutuiCountupBgColor: `var(--nutui-color-primary)`,
     nutuiCountupColor: `#fff`,
     nutuiCountupLrMargin: `1px`,
+    nutuiCountupSeparatorColor: `var(--nutui-color-primary)`,
   }
   const [value, setEndNumer] = useState('1570.99')
   useEffect(() => {
diff --git a/src/packages/animatingnumbers/doc.en-US.md b/src/packages/animatingnumbers/doc.en-US.md
index da9320582e..f9fea38408 100644
--- a/src/packages/animatingnumbers/doc.en-US.md
+++ b/src/packages/animatingnumbers/doc.en-US.md
@@ -53,3 +53,4 @@ The component provides the following CSS variables, which can be used to customi
 | \--nutui-countup-lr-margin | margin of item | `0` |
 | \--nutui-countup-bg-color | background color of item | `inherit` |
 | \--nutui-countup-color | color of item | `$color-title` |
+| \--nutui-countup-separator-color | The font color of the separator | `$color-title` |
diff --git a/src/packages/animatingnumbers/doc.md b/src/packages/animatingnumbers/doc.md
index f65ebf7ddc..78c824a6dc 100644
--- a/src/packages/animatingnumbers/doc.md
+++ b/src/packages/animatingnumbers/doc.md
@@ -53,3 +53,4 @@ import { AnimatingNumbers } from '@nutui/nutui-react'
 | \--nutui-countup-lr-margin | 每个数字的margin | `0` |
 | \--nutui-countup-bg-color | 每个数字块的背景色 | `inherit` |
 | \--nutui-countup-color | 每个数字块的字色 | `$color-title` |
+| \--nutui-countup-separator-color | 分隔符的字体颜色 | `$color-title` |
diff --git a/src/packages/animatingnumbers/doc.taro.md b/src/packages/animatingnumbers/doc.taro.md
index cb821e0abd..13582470ea 100644
--- a/src/packages/animatingnumbers/doc.taro.md
+++ b/src/packages/animatingnumbers/doc.taro.md
@@ -53,3 +53,4 @@ import { AnimatingNumbers } from '@nutui/nutui-react-taro'
 | \--nutui-countup-lr-margin | 每个数字的margin | `0` |
 | \--nutui-countup-bg-color | 每个数字块的背景色 | `inherit` |
 | \--nutui-countup-color | 每个数字块的字色 | `$color-title` |
+| \--nutui-countup-separator-color | 分隔符的字体颜色 | `$color-title` |
diff --git a/src/packages/animatingnumbers/doc.zh-TW.md b/src/packages/animatingnumbers/doc.zh-TW.md
index 8c50042e5f..7c7a85f486 100644
--- a/src/packages/animatingnumbers/doc.zh-TW.md
+++ b/src/packages/animatingnumbers/doc.zh-TW.md
@@ -53,3 +53,4 @@ import { AnimatingNumbers } from '@nutui/nutui-react'
 | \--nutui-countup-lr-margin | 每個數字的margin | `0` |
 | \--nutui-countup-bg-color | 每個數字塊的背景色 | `inherit` |
 | \--nutui-countup-color | 每個數字塊的字色 | `$color-title` |
+| \--nutui-countup-separator-color | 分隔符的字體顏色 | `$color-title` |
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 627b7e90f8..c5f68ee5d8 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -2291,6 +2291,10 @@ $countup-border-radius: var(--nutui-countup-border-radius, 4px) !default;
 $countup-lr-margin: var(--nutui-countup-lr-margin, 0) !default;
 $countup-bg-color: var(--nutui-countup-bg-color, inherit) !default;
 $countup-color: var(--nutui-countup-color, $color-title) !default;
+$countup-separator-color: var(
+  --nutui-countup-separator-color,
+  $color-title
+) !default;
 
 // layout（✅）
 $row-content-color: var(--nutui-row-content-color, #fff) !default;