Replace css color rgb(...) by #...

* it's faster to generate the color code in using a table components
* it's very likely a way faster to parse (when setting the color in the canvas)

src/core/pattern.js

@@ -205,14 +205,14 @@ Shadings.RadialAxial = (function RadialAxialClosure() {
       ratio[0] = t0 + i * step;
       fn(ratio, 0, color, 0);
       rgbColor = cs.getRgb(color, 0);
-      var cssColor = Util.makeCssRgb(rgbColor[0], rgbColor[1], rgbColor[2]);
+      var cssColor = Util.makeHexColor(rgbColor[0], rgbColor[1], rgbColor[2]);
       colorStops.push([i / NUMBER_OF_SAMPLES, cssColor]);
     }
 
     var background = "transparent";
     if (dict.has("Background")) {
       rgbColor = cs.getRgb(dict.get("Background"), 0);
-      background = Util.makeCssRgb(rgbColor[0], rgbColor[1], rgbColor[2]);
+      background = Util.makeHexColor(rgbColor[0], rgbColor[1], rgbColor[2]);
     }
 
     if (!extendStart) {

src/display/annotation_layer.js

@@ -221,7 +221,7 @@ class AnnotationElement {
       }
 
       if (data.color) {
-        container.style.borderColor = Util.makeCssRgb(
+        container.style.borderColor = Util.makeHexColor(
           data.color[0] | 0,
           data.color[1] | 0,
           data.color[2] | 0
@@ -860,7 +860,7 @@ class PopupElement {
       const r = BACKGROUND_ENLIGHT * (255 - color[0]) + color[0];
       const g = BACKGROUND_ENLIGHT * (255 - color[1]) + color[1];
       const b = BACKGROUND_ENLIGHT * (255 - color[2]) + color[2];
-      popup.style.backgroundColor = Util.makeCssRgb(r | 0, g | 0, b | 0);
+      popup.style.backgroundColor = Util.makeHexColor(r | 0, g | 0, b | 0);
     }
 
     const title = document.createElement("h1");

src/display/canvas.js

@@ -1951,12 +1951,12 @@ const CanvasGraphics = (function CanvasGraphicsClosure() {
       this.current.patternFill = true;
     },
     setStrokeRGBColor: function CanvasGraphics_setStrokeRGBColor(r, g, b) {
-      const color = Util.makeCssRgb(r, g, b);
+      const color = Util.makeHexColor(r, g, b);
       this.ctx.strokeStyle = color;
       this.current.strokeColor = color;
     },
     setFillRGBColor: function CanvasGraphics_setFillRGBColor(r, g, b) {
-      const color = Util.makeCssRgb(r, g, b);
+      const color = Util.makeHexColor(r, g, b);
       this.ctx.fillStyle = color;
       this.current.fillColor = color;
       this.current.patternFill = false;

src/display/pattern_helper.js

@@ -571,7 +571,7 @@ const TilingPattern = (function TilingPatternClosure() {
           current.strokeColor = ctx.strokeStyle;
           break;
         case PaintType.UNCOLORED:
-          const cssColor = Util.makeCssRgb(color[0], color[1], color[2]);
+          const cssColor = Util.makeHexColor(color[0], color[1], color[2]);
           context.fillStyle = cssColor;
           context.strokeStyle = cssColor;
           // Set color needed by image masks (fixes issues 3226 and 8741).

src/shared/util.js

@@ -619,6 +619,9 @@ const IsEvalSupportedCached = {
 };
 
 const rgbBuf = ["rgb(", 0, ",", 0, ",", 0, ")"];
+const hexNumbers = [...Array(256).keys()].map(n =>
+  n.toString(16).padStart(2, "0")
+);
 
 class Util {
   // makeCssRgb() can be called thousands of times. Using ´rgbBuf` avoids
@@ -630,6 +633,10 @@ class Util {
     return rgbBuf.join("");
   }
 
+  static makeHexColor(r, g, b) {
+    return "#" + hexNumbers[r] + hexNumbers[g] + hexNumbers[b];
+  }
+
   // Concatenates two transformation matrices together and returns the result.
   static transform(m1, m2) {
     return [