diff --git a/lib/web_ui/lib/src/engine/bitmap_canvas.dart b/lib/web_ui/lib/src/engine/bitmap_canvas.dart
index 4af7539992687eac64d6de6e39a5643e383776af..50ef094b682260165075f2cef92e20c87c2c1080 100644
--- a/lib/web_ui/lib/src/engine/bitmap_canvas.dart
+++ b/lib/web_ui/lib/src/engine/bitmap_canvas.dart
@@ -213,7 +213,7 @@ class BitmapCanvas extends EngineCanvas {
       contextHandle.fillStyle = paintStyle;
       contextHandle.strokeStyle = paintStyle;
     } else if (paint.color != null) {
-      final String colorString = paint.color.toCssString();
+      final String colorString = colorToCssString(paint.color);
       contextHandle.fillStyle = colorString;
       contextHandle.strokeStyle = colorString;
     } else {
@@ -561,7 +561,7 @@ class BitmapCanvas extends EngineCanvas {
       final ui.Color color = paint.color ?? ui.Color(0xFF000000);
       _canvasPool.contextHandle
         ..fillStyle = null
-        ..strokeStyle = color.toCssString();
+        ..strokeStyle = colorToCssString(color);
       _glRenderer.drawHairline(ctx, positions);
       restore();
       return;
diff --git a/lib/web_ui/lib/src/engine/canvas_pool.dart b/lib/web_ui/lib/src/engine/canvas_pool.dart
index 02489f3bbc378fb15de8fd96fbfdafb68f916f5b..77c3d35384786f894655ee4670cee407b6073251 100644
--- a/lib/web_ui/lib/src/engine/canvas_pool.dart
+++ b/lib/web_ui/lib/src/engine/canvas_pool.dart
@@ -370,7 +370,7 @@ class _CanvasPool extends _SaveStackTracking {
   void drawColor(ui.Color color, ui.BlendMode blendMode) {
     html.CanvasRenderingContext2D ctx = context;
     contextHandle.blendMode = blendMode;
-    contextHandle.fillStyle = color.toCssString();
+    contextHandle.fillStyle = colorToCssString(color);
     contextHandle.strokeStyle = '';
     ctx.beginPath();
     // Fill a virtually infinite rect with the color.
@@ -509,7 +509,7 @@ class _CanvasPool extends _SaveStackTracking {
           context.filter = _maskFilterToCss(
               ui.MaskFilter.blur(ui.BlurStyle.normal, shadow.blur));
           context.strokeStyle = '';
-          context.fillStyle = shadow.color.toCssString();
+          context.fillStyle = colorToCssString(shadow.color);
           _runPath(context, path);
           context.fill();
           context.restore();
@@ -525,9 +525,9 @@ class _CanvasPool extends _SaveStackTracking {
           context.save();
           context.filter = 'none';
           context.strokeStyle = '';
-          context.fillStyle = shadow.color.toCssString();
+          context.fillStyle = colorToCssString(shadow.color);
           context.shadowBlur = shadow.blur;
-          context.shadowColor = shadow.color.withAlpha(0xff).toCssString();
+          context.shadowColor = colorToCssString(shadow.color.withAlpha(0xff));
           context.shadowOffsetX = shadow.offsetX;
           context.shadowOffsetY = shadow.offsetY;
           _runPath(context, path);
diff --git a/lib/web_ui/lib/src/engine/dom_canvas.dart b/lib/web_ui/lib/src/engine/dom_canvas.dart
index 7a8f377662c9582792f9da42c3772336e7f33c11..78eb02cec2ccaad315809015c8b1d67c991d38e2 100644
--- a/lib/web_ui/lib/src/engine/dom_canvas.dart
+++ b/lib/web_ui/lib/src/engine/dom_canvas.dart
@@ -51,7 +51,7 @@ class DomCanvas extends EngineCanvas with SaveElementStackTracking {
       ..right = '0'
       ..bottom = '0'
       ..left = '0'
-      ..backgroundColor = color.toCssString();
+      ..backgroundColor = colorToCssString(color);
     currentElement.append(box);
   }
 
@@ -104,7 +104,8 @@ class DomCanvas extends EngineCanvas with SaveElementStackTracking {
       ..transformOrigin = '0 0 0'
       ..transform = effectiveTransform;
 
-    final String cssColor = paint.color?.toCssString() ?? '#000000';
+    final String cssColor = paint.color == null ? '#000000'
+        : colorToCssString(paint.color);
 
     if (paint.maskFilter != null) {
       style.filter = 'blur(${paint.maskFilter.webOnlySigma}px)';
diff --git a/lib/web_ui/lib/src/engine/dom_renderer.dart b/lib/web_ui/lib/src/engine/dom_renderer.dart
index a3b8578f685df4f3dc62073d7a669a61c80079f4..60727b1277d204f4513d4618f785c2743dbd1f61 100644
--- a/lib/web_ui/lib/src/engine/dom_renderer.dart
+++ b/lib/web_ui/lib/src/engine/dom_renderer.dart
@@ -215,7 +215,7 @@ class DomRenderer {
         ..name = 'theme-color';
       html.document.head.append(theme);
     }
-    theme.content = color.toCssString();
+    theme.content = colorToCssString(color);
   }
 
   static const String defaultFontStyle = 'normal';
diff --git a/lib/web_ui/lib/src/engine/shader.dart b/lib/web_ui/lib/src/engine/shader.dart
index f1a5856be51ead5ef7f8b216b25d18bc9ad43812..971229f04a7150e96db84f511ee362e69d75bc39 100644
--- a/lib/web_ui/lib/src/engine/shader.dart
+++ b/lib/web_ui/lib/src/engine/shader.dart
@@ -104,12 +104,12 @@ class GradientLinear extends EngineGradient {
         ctx.createLinearGradient(from.dx, from.dy, to.dx, to.dy);
     if (colorStops == null) {
       assert(colors.length == 2);
-      gradient.addColorStop(0, colors[0].toCssString());
-      gradient.addColorStop(1, colors[1].toCssString());
+      gradient.addColorStop(0, colorToCssString(colors[0]));
+      gradient.addColorStop(1, colorToCssString(colors[1]));
       return gradient;
     }
     for (int i = 0; i < colors.length; i++) {
-      gradient.addColorStop(colorStops[i], colors[i].toCssString());
+      gradient.addColorStop(colorStops[i], colorToCssString(colors[i]));
     }
     return gradient;
   }
@@ -118,7 +118,7 @@ class GradientLinear extends EngineGradient {
   List<dynamic> webOnlySerializeToCssPaint() {
     final List<dynamic> serializedColors = <dynamic>[];
     for (int i = 0; i < colors.length; i++) {
-      serializedColors.add(colors[i].toCssString());
+      serializedColors.add(colorToCssString(colors[i]));
     }
     return <dynamic>[
       1,
@@ -183,12 +183,12 @@ class GradientRadial extends EngineGradient {
         center.dx, center.dy, 0, center.dx, center.dy, radius);
     if (colorStops == null) {
       assert(colors.length == 2);
-      gradient.addColorStop(0, colors[0].toCssString());
-      gradient.addColorStop(1, colors[1].toCssString());
+      gradient.addColorStop(0, colorToCssString(colors[0]));
+      gradient.addColorStop(1, colorToCssString(colors[1]));
       return gradient;
     } else {
       for (int i = 0; i < colors.length; i++) {
-        gradient.addColorStop(colorStops[i], colors[i].toCssString());
+        gradient.addColorStop(colorStops[i], colorToCssString(colors[i]));
       }
     }
     return gradient;
diff --git a/lib/web_ui/lib/src/engine/surface/clip.dart b/lib/web_ui/lib/src/engine/surface/clip.dart
index 10369c43eab57458495cd512f0bcde3fb3ce6c12..74ff99e18cf878b74b4a1bc07e083f4ddfbfbb6f 100644
--- a/lib/web_ui/lib/src/engine/surface/clip.dart
+++ b/lib/web_ui/lib/src/engine/surface/clip.dart
@@ -190,7 +190,7 @@ class PersistedPhysicalShape extends PersistedContainerSurface
   }
 
   void _applyColor() {
-    rootElement.style.backgroundColor = color.toCssString();
+    rootElement.style.backgroundColor = colorToCssString(color);
   }
 
   void _applyShadow() {
diff --git a/lib/web_ui/lib/src/engine/surface/recording_canvas.dart b/lib/web_ui/lib/src/engine/surface/recording_canvas.dart
index b6fb8f1a059f6db4c9e1c8e8802415256c192004..c65df17eade586b1a9713603cb33500d1256d28b 100644
--- a/lib/web_ui/lib/src/engine/surface/recording_canvas.dart
+++ b/lib/web_ui/lib/src/engine/surface/recording_canvas.dart
@@ -677,7 +677,7 @@ class PaintDrawColor extends PaintCommand {
 
   @override
   void serializeToCssPaint(List<List<dynamic>> serializedCommands) {
-    serializedCommands.add(<dynamic>[11, color.toCssString(), blendMode.index]);
+    serializedCommands.add(<dynamic>[11, colorToCssString(color), blendMode.index]);
   }
 }
 
@@ -1086,7 +1086,7 @@ List<dynamic> _serializePaintToCssPaint(SurfacePaintData paint) {
     paint.strokeWidth,
     paint.strokeCap?.index,
     paint.isAntiAlias,
-    paint.color.toCssString(),
+    colorToCssString(paint.color),
     engineShader?.webOnlySerializeToCssPaint(),
     paint.maskFilter?.webOnlySerializeToCssPaint(),
     paint.filterQuality?.index,
diff --git a/lib/web_ui/lib/src/engine/text/paragraph.dart b/lib/web_ui/lib/src/engine/text/paragraph.dart
index 32d7574ea11421e43bd4e00742af9e829ba43198..b4c5912c7946e0c6eb709d570ebf900ccda26446 100644
--- a/lib/web_ui/lib/src/engine/text/paragraph.dart
+++ b/lib/web_ui/lib/src/engine/text/paragraph.dart
@@ -1282,7 +1282,7 @@ void _applyTextStyleToElement({
   if (previousStyle == null) {
     final ui.Color color = style._foreground?.color ?? style._color;
     if (color != null) {
-      cssStyle.color = color.toCssString();
+      cssStyle.color = colorToCssString(color);
     }
     if (style._fontSize != null) {
       cssStyle.fontSize = '${style._fontSize.floor()}px';
@@ -1322,7 +1322,7 @@ void _applyTextStyleToElement({
     if (style._color != previousStyle._color ||
         style._foreground != previousStyle._foreground) {
       final ui.Color color = style._foreground?.color ?? style._color;
-      cssStyle.color = color?.toCssString();
+      cssStyle.color = colorToCssString(color);
     }
 
     if (style._fontSize != previousStyle._fontSize) {
@@ -1366,7 +1366,7 @@ void _applyTextStyleToElement({
         cssStyle.textDecoration = textDecoration;
         final ui.Color decorationColor = style._decorationColor;
         if (decorationColor != null) {
-          cssStyle.textDecorationColor = decorationColor.toCssString();
+          cssStyle.textDecorationColor = colorToCssString(decorationColor);
         }
       }
     }
@@ -1389,7 +1389,7 @@ String _shadowListToCss(List<ui.Shadow> shadows) {
     }
     ui.Shadow shadow = shadows[i];
     sb.write('${shadow.offset.dx}px ${shadow.offset.dy}px '
-        '${shadow.blurRadius}px ${shadow.color.toCssString()}');
+        '${shadow.blurRadius}px ${colorToCssString(shadow.color)}');
   }
   return sb.toString();
 }
@@ -1405,12 +1405,12 @@ void _applyTextBackgroundToElement({
   if (previousStyle == null) {
     if (newBackground != null) {
       domRenderer.setElementStyle(
-          element, 'background-color', newBackground.color.toCssString());
+          element, 'background-color', colorToCssString(newBackground.color));
     }
   } else {
     if (newBackground != previousStyle._background) {
       domRenderer.setElementStyle(
-          element, 'background-color', newBackground.color?.toCssString());
+          element, 'background-color', colorToCssString(newBackground.color));
     }
   }
 }
diff --git a/lib/web_ui/lib/src/engine/util.dart b/lib/web_ui/lib/src/engine/util.dart
index ce2da74397b58cb21dfa462ece97916d08eb56e9..e823ae406b2ae30d9eff5f0331d68821ed213cc2 100644
--- a/lib/web_ui/lib/src/engine/util.dart
+++ b/lib/web_ui/lib/src/engine/util.dart
@@ -331,6 +331,40 @@ String _pathToSvgClipPath(ui.Path path,
   return sb.toString();
 }
 
+/// Converts color to a css compatible attribute value.
+String colorToCssString(ui.Color color) {
+  if (color == null) {
+    return null;
+  }
+  final int value = color.value;
+  if ((0xff000000 & value) == 0xff000000) {
+    return _colorToCssStringRgbOnly(color);
+  } else {
+    final double alpha = ((value >> 24) & 0xFF) / 255.0;
+    final StringBuffer sb = StringBuffer();
+    sb.write('rgba(');
+    sb.write(((value >> 16) & 0xFF).toString());
+    sb.write(',');
+    sb.write(((value >> 8) & 0xFF).toString());
+    sb.write(',');
+    sb.write((value & 0xFF).toString());
+    sb.write(',');
+    sb.write(alpha.toString());
+    sb.write(')');
+    return sb.toString();
+  }
+}
+
+/// Returns the CSS value of this color without the alpha component.
+///
+/// This is useful when painting shadows as on the Web shadow opacity combines
+/// with the paint opacity.
+String _colorToCssStringRgbOnly(ui.Color color) {
+  final int value = color.value;
+  final String paddedValue = '00000${value.toRadixString(16)}';
+  return '#${paddedValue.substring(paddedValue.length - 6)}';
+}
+
 /// Determines if the (dynamic) exception passed in is a NS_ERROR_FAILURE
 /// (from Firefox).
 ///
diff --git a/lib/web_ui/lib/src/ui/painting.dart b/lib/web_ui/lib/src/ui/painting.dart
index 7a41c55d724d6bde95270f70f0a3704d8055188f..836729a5dd71ce02445b93eaf5d72d8365030ecc 100644
--- a/lib/web_ui/lib/src/ui/painting.dart
+++ b/lib/web_ui/lib/src/ui/painting.dart
@@ -249,37 +249,6 @@ class Color {
   @override
   int get hashCode => value.hashCode;
 
-  /// Converts color to a css compatible attribute value.
-  // webOnly
-  String toCssString() {
-    if ((0xff000000 & value) == 0xff000000) {
-      return toCssStringRgbOnly();
-    } else {
-      final double alpha = ((value >> 24) & 0xFF) / 255.0;
-      final StringBuffer sb = StringBuffer();
-      sb.write('rgba(');
-      sb.write(((value >> 16) & 0xFF).toString());
-      sb.write(',');
-      sb.write(((value >> 8) & 0xFF).toString());
-      sb.write(',');
-      sb.write((value & 0xFF).toString());
-      sb.write(',');
-      sb.write(alpha.toString());
-      sb.write(')');
-      return sb.toString();
-    }
-  }
-
-  /// Returns the CSS value of this color without the alpha component.
-  ///
-  /// This is useful when painting shadows as on the Web shadow opacity combines
-  /// with the paint opacity.
-  // webOnly
-  String toCssStringRgbOnly() {
-    final String paddedValue = '00000${value.toRadixString(16)}';
-    return '#${paddedValue.substring(paddedValue.length - 6)}';
-  }
-
   @override
   String toString() {
     return 'Color(0x${value.toRadixString(16).padLeft(8, '0')})';
diff --git a/lib/web_ui/test/golden_tests/engine/path_to_svg_golden_test.dart b/lib/web_ui/test/golden_tests/engine/path_to_svg_golden_test.dart
index 590cc8fe3ab9d9c38d0ab78353c4c913848a2a35..63ea38e047de38925e73d373b12e9cbd1272e4e5 100644
--- a/lib/web_ui/test/golden_tests/engine/path_to_svg_golden_test.dart
+++ b/lib/web_ui/test/golden_tests/engine/path_to_svg_golden_test.dart
@@ -132,11 +132,11 @@ html.Element pathToSvgElement(Path path, Paint paint) {
       '<svg viewBox="0 0 ${bounds.right} ${bounds.bottom}" width="${bounds.right}" height="${bounds.bottom}">');
   sb.write('<path ');
   if (paint.style == PaintingStyle.stroke) {
-    sb.write('stroke="${paint.color.toCssString()}" ');
+    sb.write('stroke="${colorToCssString(paint.color)}" ');
     sb.write('stroke-width="${paint.strokeWidth}" ');
   }
   if (paint.style == PaintingStyle.fill) {
-    sb.write('fill="${paint.color.toCssString()}" ');
+    sb.write('fill="${colorToCssString(paint.color)}" ');
   }
   sb.write('d="');
   pathToSvg(path, sb); // This is what we're testing!