diff --git a/src/address-list/test/__snapshots__/demo.spec.js.snap b/src/address-list/test/__snapshots__/demo.spec.js.snap
index d3d067df7..0d23707c6 100644
--- a/src/address-list/test/__snapshots__/demo.spec.js.snap
+++ b/src/address-list/test/__snapshots__/demo.spec.js.snap
@@ -8,7 +8,7 @@ exports[`renders demo correctly 1`] = `
         <div class="van-cell van-cell--clickable van-address-item">
           <div class="van-cell__value van-cell__value--alone van-address-item__value">
             <div role="radio" tabindex="0" aria-checked="true" class="van-radio">
-              <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked" style="font-size: 16px;"><i class="van-icon van-icon-success" style="border-color: #f44; background-color: rgb(255, 68, 68);">
+              <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked" style="font-size: 16px;"><i class="van-icon van-icon-success" style="border-color: #ee0a24; background-color: rgb(238, 10, 36);">
                   <!----></i></div><span class="van-radio__label"><div class="van-address-item__name">张三，13000000000</div><div class="van-address-item__address">浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室</div></span>
             </div>
           </div><i class="van-icon van-icon-edit van-address-item__edit">
diff --git a/src/circle/demo/index.vue b/src/circle/demo/index.vue
index bc39e255b..4c4504ba5 100644
--- a/src/circle/demo/index.vue
+++ b/src/circle/demo/index.vue
@@ -21,7 +21,7 @@
 
       <van-circle
         v-model="currentRate3"
-        color="#f44"
+        color="#ee0a24"
         :rate="rate"
         layer-color="#ebedf0"
         :speed="100"
diff --git a/src/circle/test/__snapshots__/demo.spec.js.snap b/src/circle/test/__snapshots__/demo.spec.js.snap
index 912f232d8..0c89265a4 100644
--- a/src/circle/test/__snapshots__/demo.spec.js.snap
+++ b/src/circle/test/__snapshots__/demo.spec.js.snap
@@ -19,7 +19,7 @@ exports[`renders demo correctly 1`] = `
     </div>
     <div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1040 1040">
         <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="fill: none; stroke: #ebedf0; stroke-width: 40px;"></path>
-        <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" stroke="#f44" class="van-circle__layer" style="stroke: #f44; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
+        <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" stroke="#ee0a24" class="van-circle__layer" style="stroke: #ee0a24; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
       </svg>
       <div class="van-circle__text">颜色定制</div>
     </div>
diff --git a/src/contact-card/test/__snapshots__/index.spec.js.snap b/src/contact-card/test/__snapshots__/index.spec.js.snap
index 6aec33a7e..83307576a 100644
--- a/src/contact-card/test/__snapshots__/index.spec.js.snap
+++ b/src/contact-card/test/__snapshots__/index.spec.js.snap
@@ -6,7 +6,7 @@ exports[`ContactList render 1`] = `
     <div class="van-cell van-cell--clickable van-contact-list__item">
       <div class="van-cell__value van-cell__value--alone van-contact-list__item-value">
         <div role="radio" tabindex="0" aria-checked="true" class="van-radio">
-          <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked" style="font-size: 16px;"><i class="van-icon van-icon-success" style="border-color: #f44; background-color: rgb(255, 68, 68);">
+          <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked" style="font-size: 16px;"><i class="van-icon van-icon-success" style="border-color: #ee0a24; background-color: rgb(238, 10, 36);">
               <!----></i></div><span class="van-radio__label"><div class="van-contact-list__name">test，123123213</div></span>
         </div>
       </div><i class="van-icon van-icon-edit van-contact-list__edit">
diff --git a/src/coupon-list/test/__snapshots__/index.spec.js.snap b/src/coupon-list/test/__snapshots__/index.spec.js.snap
index c0150e266..62fd3580c 100644
--- a/src/coupon-list/test/__snapshots__/index.spec.js.snap
+++ b/src/coupon-list/test/__snapshots__/index.spec.js.snap
@@ -91,7 +91,7 @@ exports[`render coupon list 1`] = `
                 <h2 class="van-coupon__name">name</h2>
                 <p>有效期：2017.03.10 - 2017.12.30</p>
                 <div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox van-coupon__corner">
-                  <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success" style="border-color: #f44; background-color: rgb(255, 68, 68);">
+                  <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success" style="border-color: #ee0a24; background-color: rgb(238, 10, 36);">
                       <!----></i></div>
                 </div>
               </div>
diff --git a/src/dropdown-menu/README.md b/src/dropdown-menu/README.md
index ebbfa3829..fd69b886c 100644
--- a/src/dropdown-menu/README.md
+++ b/src/dropdown-menu/README.md
@@ -82,7 +82,7 @@ export default {
 Use `active-color` prop to custom active color of the title and options
 
 ```html
-<van-dropdown-menu active-color="#f44">
+<van-dropdown-menu active-color="#ee0a24">
   <van-dropdown-item v-model="value1" :options="option1" />
   <van-dropdown-item v-model="value2" :options="option2" />
 </van-dropdown-menu>
diff --git a/src/dropdown-menu/README.zh-CN.md b/src/dropdown-menu/README.zh-CN.md
index 96132181e..c30adc591 100644
--- a/src/dropdown-menu/README.zh-CN.md
+++ b/src/dropdown-menu/README.zh-CN.md
@@ -84,7 +84,7 @@ export default {
 通过`active-color`属性可以自定义菜单标题和选项的选中态颜色
 
 ```html
-<van-dropdown-menu active-color="#f44">
+<van-dropdown-menu active-color="#ee0a24">
   <van-dropdown-item v-model="value1" :options="option1" />
   <van-dropdown-item v-model="value2" :options="option2" />
 </van-dropdown-menu>
diff --git a/src/dropdown-menu/demo/index.vue b/src/dropdown-menu/demo/index.vue
index 0844f410c..c0df81d5f 100644
--- a/src/dropdown-menu/demo/index.vue
+++ b/src/dropdown-menu/demo/index.vue
@@ -43,7 +43,7 @@
     </demo-block>
 
     <demo-block :title="$t('customActiveColor')">
-      <van-dropdown-menu active-color="#f44">
+      <van-dropdown-menu active-color="#ee0a24">
         <van-dropdown-item
           v-model="value1"
           :options="option1"
diff --git a/src/notify/README.md b/src/notify/README.md
index e27994c52..29bc06377 100644
--- a/src/notify/README.md
+++ b/src/notify/README.md
@@ -72,7 +72,7 @@ export default {
 | message | Message | *string* | - | - |
 | duration | Duration(ms), won't disappear if value is 0 | *number* | `3000` | - |
 | color | Message color | *string* | `#fff` | | - |
-| background | Background color | *string* | `#f44` | - |
+| background | Background color | *string* | `#ee0a24` | - |
 | className | Custom className | *any* | - | - |
 | onClick | Callback function after click | *Function* | - | - |
 | onOpened | Callback function after opened | *Function* | - | - |
diff --git a/src/notify/README.zh-CN.md b/src/notify/README.zh-CN.md
index 6c798dd61..59f685106 100644
--- a/src/notify/README.zh-CN.md
+++ b/src/notify/README.zh-CN.md
@@ -83,7 +83,7 @@ export default {
 | message | 展示文案，支持通过`\n`换行 | *string* | - | - |
 | duration | 展示时长(ms)，值为 0 时，notify 不会消失 | *number* | `3000` | - |
 | color | 字体颜色 | *string* | `#fff` | - |
-| background | 背景颜色 | *string* | `#f44` | - |
+| background | 背景颜色 | *string* | `#ee0a24` | - |
 | className | 自定义类名 | *any* | - | - |
 | onClick | 点击时的回调函数 | *Function* | - | - |
 | onOpened | 完全展示后的回调函数 | *Function* | - | - |
diff --git a/src/progress/README.md b/src/progress/README.md
index 8041ff3bf..5309cdc0d 100644
--- a/src/progress/README.md
+++ b/src/progress/README.md
@@ -40,7 +40,7 @@ Use `pivot-text` to custom text，use `color` to custom bar color
 
 <van-progress
   pivot-text="Red"
-  color="#f44"
+  color="#ee0a24"
   :percentage="50"
 />
 
diff --git a/src/progress/README.zh-CN.md b/src/progress/README.zh-CN.md
index b17104122..8d9c6122c 100644
--- a/src/progress/README.zh-CN.md
+++ b/src/progress/README.zh-CN.md
@@ -38,7 +38,7 @@ Vue.use(Progress);
 
 <van-progress
   pivot-text="红色"
-  color="#f44"
+  color="#ee0a24"
   :percentage="50"
 />
 
diff --git a/src/progress/demo/index.vue b/src/progress/demo/index.vue
index 33d225821..32007759f 100644
--- a/src/progress/demo/index.vue
+++ b/src/progress/demo/index.vue
@@ -18,7 +18,7 @@
         :pivot-text="$t('orange')"
       />
       <van-progress
-        color="#f44"
+        color="#ee0a24"
         :percentage="50"
         :pivot-text="$t('red')"
       />
diff --git a/src/progress/test/__snapshots__/demo.spec.js.snap b/src/progress/test/__snapshots__/demo.spec.js.snap
index 76446820f..18b47e855 100644
--- a/src/progress/test/__snapshots__/demo.spec.js.snap
+++ b/src/progress/test/__snapshots__/demo.spec.js.snap
@@ -10,7 +10,7 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="background: rgb(242, 130, 106); width: 0px;"><span class="van-progress__pivot" style="color: rgb(255, 255, 255); background: rgb(242, 130, 106);">橙色</span></span></div>
-    <div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="background: rgb(255, 68, 68); width: 0px;"><span class="van-progress__pivot" style="color: rgb(255, 255, 255); background: rgb(255, 68, 68);">红色</span></span></div>
+    <div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="background: rgb(238, 10, 36); width: 0px;"><span class="van-progress__pivot" style="color: rgb(255, 255, 255); background: rgb(238, 10, 36);">红色</span></span></div>
     <div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="width: 0px;"><span class="van-progress__pivot" style="color: rgb(255, 255, 255); background: rgb(114, 50, 221);">紫色</span></span></div>
   </div>
 </div>
diff --git a/src/rate/README.md b/src/rate/README.md
index 08364efc5..e366310d5 100644
--- a/src/rate/README.md
+++ b/src/rate/README.md
@@ -43,7 +43,7 @@ export default {
 <van-rate
   v-model="value"
   :size="25"
-  color="#f44"
+  color="#ee0a24"
   void-icon="star"
   void-color="#eee"
 />
diff --git a/src/rate/README.zh-CN.md b/src/rate/README.zh-CN.md
index 3253af28e..67d7bcf99 100644
--- a/src/rate/README.zh-CN.md
+++ b/src/rate/README.zh-CN.md
@@ -43,7 +43,7 @@ export default {
 <van-rate
   v-model="value"
   :size="25"
-  color="#f44"
+  color="#ee0a24"
   void-icon="star"
   void-color="#eee"
 />
diff --git a/src/rate/demo/index.vue b/src/rate/demo/index.vue
index 2a7393013..9fbdd0992 100644
--- a/src/rate/demo/index.vue
+++ b/src/rate/demo/index.vue
@@ -16,7 +16,7 @@
       <van-rate
         v-model="value3"
         :size="25"
-        color="#f44"
+        color="#ee0a24"
         void-icon="star"
         void-color="#eee"
       />
diff --git a/src/rate/test/__snapshots__/demo.spec.js.snap b/src/rate/test/__snapshots__/demo.spec.js.snap
index 0f703c4da..c3d421f47 100644
--- a/src/rate/test/__snapshots__/demo.spec.js.snap
+++ b/src/rate/test/__snapshots__/demo.spec.js.snap
@@ -32,11 +32,11 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div tabindex="0" role="radiogroup" class="van-rate">
-      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 68, 68); font-size: 25px;">
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color: rgb(238, 10, 36); font-size: 25px;">
           <!----></i></div>
-      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 68, 68); font-size: 25px;">
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color: rgb(238, 10, 36); font-size: 25px;">
           <!----></i></div>
-      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 68, 68); font-size: 25px;">
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color: rgb(238, 10, 36); font-size: 25px;">
           <!----></i></div>
       <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="4" aria-checked="false" class="van-rate__item"><i data-score="4" class="van-icon van-icon-star van-rate__icon" style="color: rgb(238, 238, 238); font-size: 25px;">
           <!----></i></div>
diff --git a/src/slider/README.md b/src/slider/README.md
index 6015b5708..cec401015 100644
--- a/src/slider/README.md
+++ b/src/slider/README.md
@@ -57,7 +57,7 @@ export default {
 <van-slider
   v-model="value"
   bar-height="4px"
-  active-color="#f44"
+  active-color="#ee0a24"
 />
 ```
 
@@ -66,7 +66,7 @@ export default {
 ```html
 <van-slider
   v-model="value"
-  active-color="#f44"
+  active-color="#ee0a24"
 >
   <div
     slot="button"
diff --git a/src/slider/README.zh-CN.md b/src/slider/README.zh-CN.md
index e95386954..5d66b8eda 100644
--- a/src/slider/README.zh-CN.md
+++ b/src/slider/README.zh-CN.md
@@ -57,7 +57,7 @@ export default {
 <van-slider
   v-model="value"
   bar-height="4px"
-  active-color="#f44"
+  active-color="#ee0a24"
 />
 ```
 
@@ -66,7 +66,7 @@ export default {
 ```html
 <van-slider
   v-model="value"
-  active-color="#f44"
+  active-color="#ee0a24"
 >
   <div
     slot="button"
diff --git a/src/slider/demo/index.vue b/src/slider/demo/index.vue
index e3591c936..b06ac3534 100644
--- a/src/slider/demo/index.vue
+++ b/src/slider/demo/index.vue
@@ -35,7 +35,7 @@
       <van-slider
         v-model="value5"
         bar-height="4px"
-        active-color="#f44"
+        active-color="#ee0a24"
         @change="onChange"
       />
     </demo-block>
@@ -43,7 +43,7 @@
     <demo-block :title="$t('customButton')">
       <van-slider
         v-model="value6"
-        active-color="#f44"
+        active-color="#ee0a24"
       >
         <template #button>
           <div class="custom-button">{{ value6 }}</div>
diff --git a/src/slider/test/__snapshots__/demo.spec.js.snap b/src/slider/test/__snapshots__/demo.spec.js.snap
index 17f212f1f..69e825f9f 100644
--- a/src/slider/test/__snapshots__/demo.spec.js.snap
+++ b/src/slider/test/__snapshots__/demo.spec.js.snap
@@ -40,7 +40,7 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-slider">
-      <div class="van-slider__bar" style="width: 50%; height: 4px; background: rgb(255, 68, 68);">
+      <div class="van-slider__bar" style="width: 50%; height: 4px; background: rgb(238, 10, 36);">
         <div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
           <div class="van-slider__button"></div>
         </div>
@@ -49,7 +49,7 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-slider">
-      <div class="van-slider__bar" style="width: 50%; height: 2px; background: rgb(255, 68, 68);">
+      <div class="van-slider__bar" style="width: 50%; height: 2px; background: rgb(238, 10, 36);">
         <div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
           <div class="custom-button">50</div>
         </div>
diff --git a/src/style/var.less b/src/style/var.less
index 510a142c7..f47e84c5f 100644
--- a/src/style/var.less
+++ b/src/style/var.less
@@ -1,7 +1,7 @@
 // Basic Colors
 @black: #000;
 @white: #fff;
-@red: #f44;
+@red: #ee0a24;
 @blue: #1989fa;
 @orange: #ff976a;
 @orange-dark: #ed6a0c;
diff --git a/src/switch/README.md b/src/switch/README.md
index 8c859ba47..5edf49990 100644
--- a/src/switch/README.md
+++ b/src/switch/README.md
@@ -60,7 +60,7 @@ export default {
 <van-switch
   v-model="checked"
   active-color="#07c160"
-  inactive-color="#f44"
+  inactive-color="#ee0a24"
 />
 ```
 
diff --git a/src/switch/README.zh-CN.md b/src/switch/README.zh-CN.md
index 37197e850..8d440599a 100644
--- a/src/switch/README.zh-CN.md
+++ b/src/switch/README.zh-CN.md
@@ -60,7 +60,7 @@ export default {
 <van-switch
   v-model="checked"
   active-color="#07c160"
-  inactive-color="#f44"
+  inactive-color="#ee0a24"
 />
 ```
 
diff --git a/src/switch/demo/index.vue b/src/switch/demo/index.vue
index 7a6d9eb86..0f115ace9 100644
--- a/src/switch/demo/index.vue
+++ b/src/switch/demo/index.vue
@@ -29,7 +29,7 @@
       <van-switch
         v-model="checked3"
         active-color="#07c160"
-        inactive-color="#f44"
+        inactive-color="#ee0a24"
       />
     </demo-block>
 
diff --git a/src/tab/README.md b/src/tab/README.md
index 8f89c5631..cb0c8df0c 100644
--- a/src/tab/README.md
+++ b/src/tab/README.md
@@ -182,7 +182,7 @@ In swipeable mode, you can switch tabs with swipe gestrue in the content
 | background | Background color | *string* | `white` | - |
 | line-width | Width of tab line | *string \| number* | Width of active tab | - |
 | line-height | Height of tab line | *string \| number* | `3px` | - |
-| color | Tab color | *string* | `#f44` | - |
+| color | Tab color | *string* | `#ee0a24` | - |
 | title-active-color | Title active color | *string* | - | - |
 | title-inactive-color | Title inactive color | *string* | - | - |
 | swipe-threshold | Set swipe tabs threshold | *number* | `4` | - | - |
diff --git a/src/tab/README.zh-CN.md b/src/tab/README.zh-CN.md
index bdfcd764e..08ce4d3e3 100644
--- a/src/tab/README.zh-CN.md
+++ b/src/tab/README.zh-CN.md
@@ -186,7 +186,7 @@ export default {
 | background | 标签栏背景色 | *string* | `white` | - |
 | line-width | 底部条宽度，默认单位 px | *string \| number* | `auto` | - |
 | line-height | 底部条高度，默认单位 px | *string \| number* | `3px` | - |
-| color | 标签主题色 | *string* | `#f44` | - |
+| color | 标签主题色 | *string* | `#ee0a24` | - |
 | title-active-color | 标题选中态颜色 | *string* | - | - |
 | title-inactive-color | 标题默认态颜色 | *string* | - | - |
 | swipe-threshold | 滚动阈值，标签数量超过多少个可滚动 | *number* | `4` | - |
diff --git a/src/tab/test/__snapshots__/index.spec.js.snap b/src/tab/test/__snapshots__/index.spec.js.snap
index 98400c0c7..6e0cf5069 100644
--- a/src/tab/test/__snapshots__/index.spec.js.snap
+++ b/src/tab/test/__snapshots__/index.spec.js.snap
@@ -16,11 +16,11 @@ exports[`change tabs data 1`] = `
   <div>
     <div class="van-sticky">
       <div class="van-tabs__wrap van-hairline--top-bottom">
-        <div role="tablist" class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
+        <div role="tablist" class="van-tabs__nav van-tabs__nav--line" style="border-color: #ee0a24;">
           <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">title1</span></div>
           <div role="tab" class="van-tab"><span class="van-ellipsis">title2</span></div>
           <div role="tab" class="van-tab van-tab--disabled"><span class="van-ellipsis">title3</span></div>
-          <div class="van-tabs__line" style="background-color: rgb(255, 68, 68);"></div>
+          <div class="van-tabs__line" style="background-color: rgb(238, 10, 36);"></div>
         </div>
       </div>
     </div>
@@ -105,11 +105,11 @@ exports[`lazy render 1`] = `
   <div>
     <div class="van-sticky">
       <div class="van-tabs__wrap van-hairline--top-bottom">
-        <div role="tablist" class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
+        <div role="tablist" class="van-tabs__nav van-tabs__nav--line" style="border-color: #ee0a24;">
           <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">title1</span></div>
           <div role="tab" class="van-tab"><span class="van-ellipsis">title2</span></div>
           <div role="tab" class="van-tab van-tab--disabled"><span class="van-ellipsis">title3</span></div>
-          <div class="van-tabs__line" style="background-color: rgb(255, 68, 68);"></div>
+          <div class="van-tabs__line" style="background-color: rgb(238, 10, 36);"></div>
         </div>
       </div>
     </div>
@@ -131,11 +131,11 @@ exports[`lazy render 2`] = `
   <div>
     <div class="van-sticky">
       <div class="van-tabs__wrap van-hairline--top-bottom">
-        <div role="tablist" class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
+        <div role="tablist" class="van-tabs__nav van-tabs__nav--line" style="border-color: #ee0a24;">
           <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">title1</span></div>
           <div role="tab" class="van-tab"><span class="van-ellipsis">title2</span></div>
           <div role="tab" class="van-tab van-tab--disabled"><span class="van-ellipsis">title3</span></div>
-          <div class="van-tabs__line" style="background-color: rgb(255, 68, 68); width: 2px; transform: translateX(0px) translateX(-50%);"></div>
+          <div class="van-tabs__line" style="background-color: rgb(238, 10, 36); width: 2px; transform: translateX(0px) translateX(-50%);"></div>
         </div>
       </div>
     </div>
@@ -175,10 +175,10 @@ exports[`render nav-left & nav-right slot 1`] = `
   <div>
     <div class="van-sticky">
       <div class="van-tabs__wrap van-hairline--top-bottom">
-        <div role="tablist" class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">Nav Left<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">title1</span></div>
+        <div role="tablist" class="van-tabs__nav van-tabs__nav--line" style="border-color: #ee0a24;">Nav Left<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">title1</span></div>
           <div role="tab" class="van-tab"><span class="van-ellipsis">title2</span></div>
           <div role="tab" class="van-tab van-tab--disabled"><span class="van-ellipsis">title3</span></div>
-          <div class="van-tabs__line" style="background-color: rgb(255, 68, 68);"></div>Nav Right
+          <div class="van-tabs__line" style="background-color: rgb(238, 10, 36);"></div>Nav Right
         </div>
       </div>
     </div>
diff --git a/src/tab/test/index.spec.js b/src/tab/test/index.spec.js
index 313ec8494..659740884 100644
--- a/src/tab/test/index.spec.js
+++ b/src/tab/test/index.spec.js
@@ -25,7 +25,7 @@ function createWrapper(options = {}) {
     `,
     data() {
       return {
-        color: '#f44',
+        color: '#ee0a24',
         type: 'line',
         sticky: true,
         lineWidth: 2,
diff --git a/src/utils/constant.ts b/src/utils/constant.ts
index f70afc57f..43bf62eb9 100644
--- a/src/utils/constant.ts
+++ b/src/utils/constant.ts
@@ -1,5 +1,5 @@
 // color
-export const RED = '#f44';
+export const RED = '#ee0a24';
 export const BLUE = '#1989fa';
 export const GREEN = '#07c160';
 export const WHITE = '#fff';