diff --git a/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md b/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md
index fc046c3543bb4f9f05d80653f6299188e196ff4c..8b4292e8592f2ba22382ebf488ec8dd9e1c263e9 100644
--- a/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md
+++ b/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md
@@ -42,6 +42,7 @@
     - [触摸测试控制](ts-universal-attributes-hit-test-behavior.md)
     - [背景模糊设置](ts-universal-attributes-backgroundBlurStyle.md)
     - [分布式迁移标识](ts-universal-attributes-restoreId.md)
+    - [前景色设置](ts-universal-attributes-foreground-color.md)
   - 手势处理
     - [绑定手势方法](ts-gesture-settings.md)
     - 基础手势
diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/ColoringStrategy_circle.png b/zh-cn/application-dev/reference/arkui-ts/figures/ColoringStrategy_circle.png
new file mode 100644
index 0000000000000000000000000000000000000000..1ea0edb63c1effab0ff368714baeece62b0cf49f
Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/ColoringStrategy_circle.png differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/foregroundColorInherit.jpg b/zh-cn/application-dev/reference/arkui-ts/figures/foregroundColorInherit.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..caea10217a443d1a6dfbed510e9e3b6cb4009255
Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/foregroundColorInherit.jpg differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/foregroundColor_circle.png b/zh-cn/application-dev/reference/arkui-ts/figures/foregroundColor_circle.png
new file mode 100644
index 0000000000000000000000000000000000000000..1d769ec260258ac57833600a8e3cbda3e985166b
Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/foregroundColor_circle.png differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-types.md b/zh-cn/application-dev/reference/arkui-ts/ts-types.md
index a13bc55f138a0694e8bf9750022717ab801e2c5a..10348a88a641f6aa4ff7cddf686ade9a621b1b46 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-types.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-types.md
@@ -126,6 +126,14 @@
 | string                                   | rgb或者rgba格式颜色。                              |
 | [Resource](#resource)                    | 使用引入资源的方式，引入系统资源或者应用资源中的颜色。 |
 
+## ColoringStrategy
+
+智能取色枚举类型，用于设置前景色。
+
+| 名称        | 描述      |
+| ---------  | ------- |
+| Invert  | 设置前景色为控件背景色的反色。|
+
 ## LengthConstrain
 
 长度约束，用于对组件最大、最小长度做限制。
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-foreground-color.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-foreground-color.md
new file mode 100644
index 0000000000000000000000000000000000000000..0495a78c6e22b957c34aa76d550391ceb05b4f7e
--- /dev/null
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-foreground-color.md
@@ -0,0 +1,75 @@
+# 前景色设置
+
+设置组件的前景色。
+
+>  **说明：**
+>
+>  从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
+## 属性
+
+| 名称 | 参数类型 | 描述 |
+| -------- | -------- | -------- |
+| foregroundColor | [ResourceColor](ts-types.md#resourcecolor) \| [ColoringStrategy](ts-types.md#ColoringStrategy) | 设置组件的前景颜色或者根据智能取色策略设置前景颜色。 |
+
+## 示例
+
+### 示例1
+```ts
+// xxx.ets
+@Entry
+@Component
+struct ForegroundColorExample {
+  build() {
+    Column({ space: 100 }) {
+      // 绘制一个直径为150的圆,默认填充色为黑色
+      Circle({ width: 150, height: 200 })
+      // 绘制一个直径为150的圆，
+      Circle({ width: 150, height: 200 }).foregroundColor(Color.Red)
+    }.width('100%').backgroundColor(Color.Blue)
+  }
+}
+```
+
+![foregroundColor_circle](figures/foregroundColor_circle.png)
+
+### 示例2
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct ColoringStrategyExample {
+  build() {
+    Column({ space: 100 }) {
+      // 绘制一个直径为150的圆,默认填充色为黑色
+      Circle({ width: 150, height: 200 })
+      // 绘制一个直径为150的圆，设置前景色为组件背景色的反色
+      Circle({ width: 150, height: 200 })
+        .backgroundColor(Color.Black)
+        .foregroungColor(ColoringStrategy.Invert)
+    }.width('100%')
+  }
+}
+```
+
+![foregroundColor_circle](figures/ColoringStrategy_circle.png)
+
+### 示例3
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct foregroundColorInherit {
+  build() {
+    Column() {
+      Button('设置前景色为橘色').fontSize(20).foregroundColor(Color.Orange).backgroundColor(Color.Gray)
+      Divider()
+      Button('未设置前景色继承自父组件').fontSize(20).backgroundColor(Color.Gray)
+    }.foregroundColor(Color.Red)
+  }
+}
+```
+
+![foregroundColor_circle](figures/foregroundColorInherit.jpg)
\ No newline at end of file