diff --git a/apps/common/main/resources/less/asc-mixins.less b/apps/common/main/resources/less/asc-mixins.less
index 44f8f6593..980503c55 100644
--- a/apps/common/main/resources/less/asc-mixins.less
+++ b/apps/common/main/resources/less/asc-mixins.less
@@ -327,11 +327,12 @@
     }
 }
 
-@img-colorpicker-width: 205px;
+@img-colorpicker-width: 208px;
 .img-colorpicker, .hsb-colorpicker .empty-color:before
 {
     background-image: if(@icon-src-base64, data-uri(%("%s",'@{common-image-path}/hsbcolorpicker/hsb-colorpicker.png')), ~"url(@{common-image-const-path}/hsbcolorpicker/hsb-colorpicker.png)");
     background-repeat: no-repeat;
+    background-size:  @img-colorpicker-width auto;
 
     @media only screen {
         @media (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.9),
@@ -350,6 +351,14 @@
             background-size:  @img-colorpicker-width auto;
         }
     }
+
+    .pixel-ratio__1_25 & {
+        background-image: ~"url(@{common-image-const-path}/hsbcolorpicker/hsb-colorpicker@1.25x.png)";
+    }
+
+    .pixel-ratio__1_75 & {
+        background-image: ~"url(@{common-image-const-path}/hsbcolorpicker/hsb-colorpicker@1.75x.png)";
+    }
 }
 
 .icon.lang-flag {