diff --git a/package/document-component/src/assets/background.svg b/package/document-component/src/assets/background.svg
index c7333c48..ecfc170f 100644
--- a/package/document-component/src/assets/background.svg
+++ b/package/document-component/src/assets/background.svg
@@ -4,30 +4,20 @@
     <animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="35s" type="rotate" from="0 1450 550" to="360 1450 550" repeatCount="indefinite"/>
   </rect>
 
-  <path d="M 100 350 A 150 150 0 1 1 400 350 Q400 370 380 370 L 250 370 L 120 370 Q100 370 100 350" stroke="rgb(253, 214, 99)" fill="rgb(253, 214, 99)">
+  <path d="M 100 350 A 150 150 0 1 1 400 350 Q400 370 380 370 L 250 370 L 120 370 Q100 370 100 350" stroke="#FFB800" fill="#FFB800">
     <animateMotion path="M 800 -200 L 800 -300 L 800 -200" dur="20s" begin="0s" repeatCount="indefinite"/>
     <animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="30s" type="rotate" values="0 210 530 ; -30 210 530 ; 0 210 530" keyTimes="0 ; 0.5 ; 1" repeatCount="indefinite"/>
   </path>
 
-  <circle cx="200" cy="150" r="30" stroke="#1a73e8" fill="#1a73e8">
+  <circle cx="220" cy="140" r="40" stroke="#009688" fill="#009688">
     <animateMotion path="M 0 0 L 40 20 Z" dur="5s" repeatCount="indefinite"/>
   </circle>
 
-  <!-- 三角形 -->
-  <path d="M 165 580 L 270 580 Q275 578 270 570 L 223 483 Q220 480 217 483 L 165 570 Q160 578 165 580" stroke="rgb(238, 103, 92)" fill="rgb(238, 103, 92)">
+  <path d="M 165 580 L 270 580 Q275 578 270 570 L 223 483 Q220 480 217 483 L 165 570 Q160 578 165 580" stroke="#FF5722" fill="#FF5722">
     <animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="35s" type="rotate" from="0 210 530" to="360 210 530" repeatCount="indefinite"/>
   </path>
 
-  <circle cx="1200" cy="600" r="30" stroke="rgb(241, 243, 244)" fill="rgb(241, 243, 244)">
-    <animateMotion path="M 0 0 L -20 40 Z" dur="9s" repeatCount="indefinite"/>
-  </circle>
-
-  <path d="M 100 350 A 40 40 0 1 1 180 350 L 180 430 A 40 40 0 1 1 100 430 Z" stroke="rgb(241, 243, 244)" fill="rgb(241, 243, 244)">
-    <animateMotion path="M 140 390 L 180 360 L 140 390" dur="20s" begin="0s" repeatCount="indefinite"/>
-    <animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="30s" type="rotate" values="0 140 390; -60 140 390; 0 140 390" keyTimes="0 ; 0.5 ; 1" repeatCount="indefinite"/>
-  </path>
-
-  <rect x="400" y="600" rx="40" ry="40" width="100" height="100" stroke="rgb(129, 201, 149)" fill="rgb(129, 201, 149)">
+  <rect x="400" y="600" rx="40" ry="40" width="100" height="100" stroke="#1E9FFF" fill="#1E9FFF">
     <animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="35s" type="rotate" from="-30 550 750" to="330 550 750" repeatCount="indefinite"/>
   </rect>
 </svg>
\ No newline at end of file
diff --git a/package/document-component/src/document/zh-CN/components/color.md b/package/document-component/src/document/zh-CN/components/color.md
index 70125f36..308da6a9 100644
--- a/package/document-component/src/document/zh-CN/components/color.md
+++ b/package/document-component/src/document/zh-CN/components/color.md
@@ -17,19 +17,13 @@
         <li class="layui-col-sm6">
             <div style="background-color: #009688;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
                 <p>#009688</p><p>
-                </p><p tips="">主色调之一</p>
+                </p><p tips="">主色调</p>
             </div>
         </li>
         <li class="layui-col-sm6">
             <div style="background-color: #5FB878;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
                 <p>#5FB878</p><p>
-                </p><p tips="">一般用于选中状态</p>
-            </div>
-        </li>
-        <li class="layui-col-sm6">
-            <div style="background-color: #393D49;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
-                <p>#393D49</p><p>
-                </p><p tips="">通常用于导航</p>
+                </p><p tips="">次色调</p>
             </div>
         </li>
         <li class="layui-col-sm6">
@@ -38,6 +32,12 @@
                 </p><p tips="">经典蓝</p>
             </div>
         </li>
+        <li class="layui-col-sm6">
+            <div style="background-color: #393D49;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
+                <p>#393D49</p><p>
+                </p><p tips="">常用于导航</p>
+            </div>
+        </li>
     </ul>
 </template>
 
@@ -62,28 +62,28 @@ export default {
 
 <template>
 <ul class="layui-row layui-col-space15">
-      <li class="layui-col-sm6">
-        <div style="background-color: #FFB800;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
-          <p>#FFB800</p><p>
-          </p><p tips="">暖色系</p>
-        </div>
-      </li>
       <li class="layui-col-sm6">
         <div style="background-color: #FF5722;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
           <p>#FF5722</p><p>
-          </p><p tips="">比较引人注意的颜色</p>
+          </p><p tips="">错误 - DANGER</p>
         </div>
       </li>
       <li class="layui-col-sm6">
-        <div style="background-color: #01AAED;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
+        <div style="background-color: #FFB800;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
+          <p>#FFB800</p><p>
+          </p><p tips="">警示 - WARNING</p>
+        </div>
+      </li>
+      <li class="layui-col-sm6">
+        <div style="background-color: #5FB878;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
           <p>#01AAED</p><p>
-          </p><p tips="">文本链接着色</p>
+          </p><p tips="">成功 - SUCCESS</p>
         </div>
       </li>
       <li class="layui-col-sm6">
-        <div style="background-color: #2F4056;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
+        <div style="background-color: #31BDEC;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
           <p>#2F4056</p><p>
-          </p><p tips="">侧边色</p>
+          </p><p tips="">引导 - INFO</p>
         </div>
       </li>
     </ul>