diff --git a/src/ol/render/canvas.js b/src/ol/render/canvas.js
index 3c2607cae0..a3a42d656e 100644
--- a/src/ol/render/canvas.js
+++ b/src/ol/render/canvas.js
@@ -85,9 +85,9 @@ export const defaultFont = '10px sans-serif';
 
 /**
  * @const
- * @type {import("../color.js").Color}
+ * @type {import("../colorlike.js").ColorLike}
  */
-export const defaultFillStyle = [0, 0, 0, 1];
+export const defaultFillStyle = '#000';
 
 
 /**
diff --git a/src/ol/render/canvas/PolygonBuilder.js b/src/ol/render/canvas/PolygonBuilder.js
index 46f1a2a298..0c67a6c903 100644
--- a/src/ol/render/canvas/PolygonBuilder.js
+++ b/src/ol/render/canvas/PolygonBuilder.js
@@ -1,7 +1,6 @@
 /**
  * @module ol/render/canvas/PolygonBuilder
  */
-import {asString} from '../../color.js';
 import {snap} from '../../geom/flat/simplify.js';
 import {defaultFillStyle} from '../canvas.js';
 import CanvasInstruction, {
@@ -77,7 +76,7 @@ class CanvasPolygonBuilder extends CanvasBuilder {
     if (state.fillStyle !== undefined) {
       this.hitDetectionInstructions.push([
         CanvasInstruction.SET_FILL_STYLE,
-        asString(defaultFillStyle)
+        defaultFillStyle
       ]);
     }
     if (state.strokeStyle !== undefined) {
@@ -121,7 +120,7 @@ class CanvasPolygonBuilder extends CanvasBuilder {
     if (state.fillStyle !== undefined) {
       this.hitDetectionInstructions.push([
         CanvasInstruction.SET_FILL_STYLE,
-        asString(defaultFillStyle)
+        defaultFillStyle
       ]);
     }
     if (state.strokeStyle !== undefined) {
@@ -153,7 +152,7 @@ class CanvasPolygonBuilder extends CanvasBuilder {
     if (state.fillStyle !== undefined) {
       this.hitDetectionInstructions.push([
         CanvasInstruction.SET_FILL_STYLE,
-        asString(defaultFillStyle)
+        defaultFillStyle
       ]);
     }
     if (state.strokeStyle !== undefined) {
diff --git a/src/ol/style/RegularShape.js b/src/ol/style/RegularShape.js
index c06f85d976..d8dd972151 100644
--- a/src/ol/style/RegularShape.js
+++ b/src/ol/style/RegularShape.js
@@ -2,7 +2,6 @@
  * @module ol/style/RegularShape
  */
 
-import {asString} from '../color.js';
 import {asColorLike} from '../colorlike.js';
 import {createCanvasContext2D} from '../dom.js';
 import ImageState from '../ImageState.js';
@@ -482,7 +481,7 @@ class RegularShape extends ImageStyle {
       }
     }
 
-    context.fillStyle = asString(defaultFillStyle);
+    context.fillStyle = defaultFillStyle;
     context.fill();
     if (this.stroke_) {
       context.strokeStyle = renderOptions.strokeStyle;