diff --git a/.stylelintrc b/.stylelintrc
index a4f6ae60e7..b04f6ee2e0 100644
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -29,5 +29,15 @@
     "color-function-notation": "legacy",
     "value-keyword-case": null
   },
-  "overrides": [{ "files": ["**/*.less"], "customSyntax": "postcss-less" }]
+  "overrides": [
+    { "files": ["**/*.less"], "customSyntax": "postcss-less" },
+    {
+      "files": ["style/web/components/**/*.less"],
+      "ignoreFiles": ["**/_docs.less"],
+      "rules": {
+        "color-no-hex": true,
+        "color-named": "never"
+      }
+    }
+  ]
 }
diff --git a/style/web/components/color-picker/_index.less b/style/web/components/color-picker/_index.less
index 72f021b021..bf4ea99ecd 100644
--- a/style/web/components/color-picker/_index.less
+++ b/style/web/components/color-picker/_index.less
@@ -84,7 +84,7 @@
   height: @color-picker-slider-thumb-size;
   border-radius: @border-radius-circle;
   box-shadow: @color-picker-thumbs-shadow;
-  background: white;
+  background: @text-color-anti;
   color: @text-color-brand;
   padding: @color-picker-slider-thumb-padding;
   box-sizing: border-box;
@@ -117,10 +117,12 @@
   }
 
   &::before {
+    /* stylelint-disable-next-line color-no-hex */
     background: linear-gradient(90deg, #fff, transparent);
   }
 
   &::after {
+    /* stylelint-disable-next-line color-no-hex */
     background: linear-gradient(0deg, #000, transparent);
   }
 
@@ -133,6 +135,7 @@
 }
 
 .transparentBgImage () {
+  /* stylelint-disable-next-line color-no-hex */
   background-image: linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5), linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5);
   background-size: 6px 6px;
   background-position: 0 0, 3px 3px;
@@ -144,11 +147,12 @@
   position: relative;
 
   &--hue-type {
+    /* stylelint-disable-next-line color-named */
     background: red;
   }
 
   &--alpha-type {
-    background: #fff;
+    background: @text-color-anti;
     .transparentBgImage();
   }
 }
@@ -193,6 +197,7 @@
 }
 
 .@{prefix}-color-picker__hue {
+  /* stylelint-disable color-no-hex, color-named */
   background: linear-gradient(
     90deg,
     red,
@@ -228,7 +233,7 @@
   height: @color-picker-gradient-preview-height;
   border-radius: @color-picker-gradient-preview-radius;
   overflow: hidden;
-  background: #fff;
+  background: @text-color-anti;
   .transparentBgImage();
 
   &-inner {
@@ -544,7 +549,7 @@
   border-radius: @color-picker-slider-wrapper-radius;
 
   .@{prefix}-color-picker--bg-alpha {
-    background: #fff;
+    background: @text-color-anti;
     .transparentBgImage();
   }
 }
diff --git a/style/web/components/loading/_index.less b/style/web/components/loading/_index.less
index 64d68448ed..2d8066bfa3 100644
--- a/style/web/components/loading/_index.less
+++ b/style/web/components/loading/_index.less
@@ -100,12 +100,11 @@
   &-conic {
     width: 100%;
     height: 100%;
-    background: conic-gradient(from 90deg at 50% 50%, #fff 0deg, currentcolor 360deg);
     border-radius: @border-radius-circle;
     /* stylelint-disable-next-line */
     -webkit-mask: radial-gradient(transparent calc(50% ~"-" .5px), #fff 50%);
 
-    /* stylelint-disable-next-line */
+    /* stylelint-disable-next-line color-no-hex */
     mask: radial-gradient(transparent calc(50% ~"-" .5px), #fff 50%);
   }
 }
diff --git a/style/web/components/tooltip/_index.less b/style/web/components/tooltip/_index.less
index 88433d2936..d978b3c369 100644
--- a/style/web/components/tooltip/_index.less
+++ b/style/web/components/tooltip/_index.less
@@ -23,23 +23,23 @@
     .@{prefix}-popup__content {
       color: @tooltip-text-color;
       background: @tooltip-bg;
-      box-shadow: inset 0 .5px 0 #5e5e5e, inset .5px 0 0 #5e5e5e, inset 0 -.5px 0 #5e5e5e, inset -.5px 0 0 #5e5e5e;
+      box-shadow: inset 0 .5px 0 @gray-color-9, inset .5px 0 0 @gray-color-9, inset 0 -.5px 0 @gray-color-9, inset -.5px 0 0 @gray-color-9;
     }
 
     &[data-popper-placement^="left"] .@{prefix}-popup__arrow:before {
-      box-shadow: inset -.5px 0 0 #5e5e5e, inset 0 .5px 0 #5e5e5e;
+      box-shadow: inset -.5px 0 0 @gray-color-9, inset 0 .5px 0 @gray-color-9;
     }
 
     &[data-popper-placement^="right"] .@{prefix}-popup__arrow:before {
-      box-shadow: inset .5px 0 0 #5e5e5e, inset 0 -.5px 0 #5e5e5e;
+      box-shadow: inset .5px 0 0 @gray-color-9, inset 0 -.5px 0 @gray-color-9;
     }
 
     &[data-popper-placement^="top"] .@{prefix}-popup__arrow:before {
-      box-shadow: inset 0 -.5px 0 #5e5e5e, inset -.5px 0 0 #5e5e5e;
+      box-shadow: inset 0 -.5px 0 @gray-color-9, inset -.5px 0 0 @gray-color-9;
     }
 
     &[data-popper-placement^="bottom"] .@{prefix}-popup__arrow:before {
-      box-shadow: inset .5px 0 0 #5e5e5e, inset 0 .5px 0 #5e5e5e;
+      box-shadow: inset .5px 0 0 @gray-color-9, inset 0 .5px 0 @gray-color-9;
     }
   }