diff --git a/.size-snapshot.json b/.size-snapshot.json
index 3e4bc5ebaa..99b62e6e4b 100644
--- a/.size-snapshot.json
+++ b/.size-snapshot.json
@@ -19,16 +19,16 @@
     "gzipped": 1999
   },
   "dist/web.js": {
-    "bundled": 63554,
-    "minified": 30170,
-    "gzipped": 10988,
+    "bundled": 63781,
+    "minified": 30180,
+    "gzipped": 10974,
     "treeshaked": {
       "rollup": {
-        "code": 11571,
+        "code": 11574,
         "import_statements": 242
       },
       "webpack": {
-        "code": 12733
+        "code": 12732
       }
     }
   },
@@ -38,44 +38,44 @@
     "gzipped": 11641
   },
   "dist/native.js": {
-    "bundled": 60686,
-    "minified": 28249,
-    "gzipped": 10010,
+    "bundled": 60913,
+    "minified": 28259,
+    "gzipped": 9993,
     "treeshaked": {
       "rollup": {
-        "code": 8256,
+        "code": 8282,
         "import_statements": 180
       },
       "webpack": {
-        "code": 10881
+        "code": 10884
       }
     }
   },
   "dist/universal.js": {
-    "bundled": 48123,
-    "minified": 21539,
-    "gzipped": 7195,
+    "bundled": 48235,
+    "minified": 21532,
+    "gzipped": 7184,
     "treeshaked": {
       "rollup": {
         "code": 1235,
         "import_statements": 128
       },
       "webpack": {
-        "code": 4733
+        "code": 4710
       }
     }
   },
   "dist/konva.js": {
-    "bundled": 59176,
-    "minified": 27394,
-    "gzipped": 9921,
+    "bundled": 59403,
+    "minified": 27404,
+    "gzipped": 9903,
     "treeshaked": {
       "rollup": {
-        "code": 9090,
+        "code": 9093,
         "import_statements": 242
       },
       "webpack": {
-        "code": 10246
+        "code": 10249
       }
     }
   },
@@ -127,7 +127,7 @@
     }
   },
   "dist/renderprops.js": {
-    "bundled": 66797,
+    "bundled": 66863,
     "minified": 32950,
     "gzipped": 11394
   },
@@ -142,32 +142,32 @@
     "gzipped": 2008
   },
   "dist/renderprops-native.js": {
-    "bundled": 61366,
+    "bundled": 61432,
     "minified": 29741,
     "gzipped": 9942
   },
   "dist/renderprops-universal.js": {
-    "bundled": 49087,
+    "bundled": 49113,
     "minified": 23177,
     "gzipped": 7220
   },
   "dist/renderprops-konva.js": {
-    "bundled": 60176,
+    "bundled": 60242,
     "minified": 29110,
     "gzipped": 9928
   },
   "dist/web.cjs.js": {
-    "bundled": 71882,
-    "minified": 33885,
-    "gzipped": 11553
+    "bundled": 72105,
+    "minified": 33895,
+    "gzipped": 11538
   },
   "dist/native.cjs.js": {
-    "bundled": 69495,
-    "minified": 32150,
-    "gzipped": 10560
+    "bundled": 69718,
+    "minified": 32160,
+    "gzipped": 10548
   },
   "dist/renderprops.cjs.js": {
-    "bundled": 77392,
+    "bundled": 77458,
     "minified": 36683,
     "gzipped": 11921
   },
@@ -177,24 +177,24 @@
     "gzipped": 1892
   },
   "dist/renderprops-native.cjs.js": {
-    "bundled": 72258,
+    "bundled": 72324,
     "minified": 33567,
     "gzipped": 10465
   },
   "dist/renderprops-universal.cjs.js": {
-    "bundled": 59263,
+    "bundled": 59289,
     "minified": 26748,
     "gzipped": 7733
   },
   "dist/renderprops-konva.cjs.js": {
-    "bundled": 70422,
+    "bundled": 70488,
     "minified": 32717,
     "gzipped": 10442
   },
   "dist/universal.cjs.js": {
-    "bundled": 56122,
-    "minified": 25121,
-    "gzipped": 7750
+    "bundled": 56234,
+    "minified": 25114,
+    "gzipped": 7737
   },
   "dist/test.js": {
     "bundled": 32365,
@@ -216,46 +216,46 @@
     "gzipped": 5405
   },
   "dist/konva.cjs.js": {
-    "bundled": 67216,
-    "minified": 31007,
-    "gzipped": 10463
+    "bundled": 67439,
+    "minified": 31017,
+    "gzipped": 10448
   },
   "dist/three.js": {
-    "bundled": 59525,
-    "minified": 27361,
-    "gzipped": 9830,
+    "bundled": 59752,
+    "minified": 27371,
+    "gzipped": 9813,
     "treeshaked": {
       "rollup": {
-        "code": 10499,
+        "code": 10500,
         "import_statements": 344
       },
       "webpack": {
-        "code": 11711
+        "code": 11710
       }
     }
   },
   "dist/three.cjs.js": {
-    "bundled": 67628,
-    "minified": 31022,
-    "gzipped": 10369
+    "bundled": 67851,
+    "minified": 31032,
+    "gzipped": 10349
   },
   "dist/zdog.js": {
-    "bundled": 60089,
-    "minified": 27582,
-    "gzipped": 9886,
+    "bundled": 60316,
+    "minified": 27592,
+    "gzipped": 9868,
     "treeshaked": {
       "rollup": {
-        "code": 10633,
+        "code": 10634,
         "import_statements": 354
       },
       "webpack": {
-        "code": 11762
+        "code": 11761
       }
     }
   },
   "dist/zdog.cjs.js": {
-    "bundled": 68132,
-    "minified": 31183,
-    "gzipped": 10438
+    "bundled": 68355,
+    "minified": 31193,
+    "gzipped": 10417
   }
 }
diff --git a/src/shared/normalizeColors.ts b/src/shared/normalizeColors.ts
index 785da2762a..8b145a1fc5 100644
--- a/src/shared/normalizeColors.ts
+++ b/src/shared/normalizeColors.ts
@@ -130,25 +130,24 @@ export default function normalizeColor(color: number | string) {
   return null
 }
 
-function hue2rgb(p: number, q: number, t: number) {
-  if (t < 0) t += 1
-  if (t > 1) t -= 1
-  if (t < 1 / 6) return p + (q - p) * 6 * t
-  if (t < 1 / 2) return q
-  if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6
-  return p
+function hue2rgb(h: number, c: number, x: number) {
+  if (h < 60) return [c, x, 0]
+  if (h < 120) return [x, c, 0]
+  if (h < 180) return [0, c, x]
+  if (h < 240) return [0, x, c]
+  if (h < 300) return [x, 0, c]
+  return [c, 0, x]
 }
 
 function hslToRgb(h: number, s: number, l: number) {
-  const q = l < 0.5 ? l * (1 + s) : l + s - l * s
-  const p = 2 * l - q
-  const r = hue2rgb(p, q, h + 1 / 3)
-  const g = hue2rgb(p, q, h)
-  const b = hue2rgb(p, q, h - 1 / 3)
+  const C = (1 - Math.abs(2 * l - 1)) * s
+  const X = C * (1 - Math.abs(((h / 60) % 2) - 1))
+  const M = l - C / 2
+  const [R1, G1, B1] = hue2rgb(h, C, X)
   return (
-    (Math.round(r * 255) << 24) |
-    (Math.round(g * 255) << 16) |
-    (Math.round(b * 255) << 8)
+    (Math.round((R1 + M) * 255) << 24) |
+    (Math.round((G1 + M) * 255) << 16) |
+    (Math.round((B1 + M) * 255) << 8)
   )
 }