diff --git a/src/packages/avatar/avatar.taro.tsx b/src/packages/avatar/avatar.taro.tsx
index 6948858eb7..872c6c2dc0 100644
--- a/src/packages/avatar/avatar.taro.tsx
+++ b/src/packages/avatar/avatar.taro.tsx
@@ -154,12 +154,14 @@ export const Avatar: FunctionComponent<
                 <View className="nut-avatar-text">
                   {React.cloneElement<any>(icon, {
                     ...icon.props,
+                    color,
                     className: `${icon.props.className || ''} nut-avatar-icon nut-avatar-${groupSize || size || 'normal'}-icon`,
                   })}
                 </View>
               ) : null}
               {children && (
                 <View
+                  style={{ color }}
                   className={`nut-avatar-text nut-avatar-${groupSize || size || 'normal'}-text`}
                 >
                   {children}
@@ -168,6 +170,7 @@ export const Avatar: FunctionComponent<
               {!src && !icon && !children && (
                 <View className="nut-avatar-text">
                   <User
+                    style={{ color }}
                     className={`nut-avatar-icon nut-avatar-${groupSize || size || 'normal'}-icon`}
                   />
                 </View>
diff --git a/src/packages/avatar/demos/taro/demo6.tsx b/src/packages/avatar/demos/taro/demo6.tsx
index 9f269e45bf..40c64b0b01 100644
--- a/src/packages/avatar/demos/taro/demo6.tsx
+++ b/src/packages/avatar/demos/taro/demo6.tsx
@@ -12,7 +12,7 @@ const Demo6 = () => {
           <Avatar icon={<User />} />
           <Avatar
             color={`${harmonyAndRn() ? '#ff0f23' : 'var(--nutui-color-primary)'}`}
-            background={`${harmonyAndRn() ? '#eee' : 'var(--nutui-brand-2)'}`}
+            background={`${harmonyAndRn() ? '#ffd6e1' : 'var(--nutui-brand-2)'}`}
           >
             U
           </Avatar>