parallax/jsPDF · error · Error

Invalid color "{ch1}" passed to jsPDF.encodeColorString.

Error message

Invalid color "{ch1}" passed to jsPDF.encodeColorString.

What it means

`encodeColorString` (src/jspdf.js:1646) is the color encoder behind setDrawColor/setFillColor/setTextColor. When `ch1` is a string that doesn't start with `#`, it tries the RGBColor parser (src/jspdf.js:1664); if that fails and the string also isn't a bare numeric value (matching `/^\d*\.?\d*$/`), it throws at src/jspdf.js:1668. So a color string must be a CSS color name RGBColor can parse, a hex string, or a plain decimal number string — anything else is rejected.

Source

Thrown at src/jspdf.js:1668

    if (typeof options === "string") {
      options = {
        ch1: options
      };
    }
    var ch1 = options.ch1;
    var ch2 = options.ch2;
    var ch3 = options.ch3;
    var ch4 = options.ch4;
    var letterArray =
      options.pdfColorType === "draw" ? ["G", "RG", "K"] : ["g", "rg", "k"];

    if (typeof ch1 === "string" && ch1.charAt(0) !== "#") {
      var rgbColor = new RGBColor(ch1);
      if (rgbColor.ok) {
        ch1 = rgbColor.toHex();
      } else if (!/^\d*\.?\d*$/.test(ch1)) {
        throw new Error(
          'Invalid color "' + ch1 + '" passed to jsPDF.encodeColorString.'
        );
      }
    }
    //convert short rgb to long form
    if (typeof ch1 === "string" && /^#[0-9A-Fa-f]{3}$/.test(ch1)) {
      ch1 = "#" + ch1[1] + ch1[1] + ch1[2] + ch1[2] + ch1[3] + ch1[3];
    }

    if (typeof ch1 === "string" && /^#[0-9A-Fa-f]{6}$/.test(ch1)) {
      var hex = parseInt(ch1.substr(1), 16);
      ch1 = (hex >> 16) & 255;
      ch2 = (hex >> 8) & 255;
      ch3 = hex & 255;
    }

    if (
      typeof ch2 === "undefined" ||

View on GitHub (pinned to a3930ce03a)

Solutions

  1. Use a hex string (`'#ff0000'`) or a recognized CSS color name (`'red'`) that RGBColor understands.
  2. Pass numeric channels instead of a string: `doc.setFillColor(255, 0, 0)`.
  3. Validate/normalize color input with a library (e.g. tinycolor2) and convert to hex before passing.
  4. Strip units like 'px' before sending numeric strings.

Example fix

// before
 doc.setFillColor('255px');   // throws: not a valid color

// after
 doc.setFillColor('#ff0000');  // hex
 // or numeric channels:
 doc.setFillColor(255, 0, 0);
Defensive patterns

Strategy: validation

Validate before calling

function toPdfColor(c) {
  if (typeof c === 'number') return c;
  if (typeof c === 'string') {
    if (/^#[0-9a-fA-F]{3}([0-9a-fA-F]{3})?$/.test(c)) return c; // hex
    if (/^\d+(\.\d+)?$/.test(c)) return c;                      // numeric string
    // try CSS name; fall back to black
    return /^#[0-9a-fA-F]{6}$/.test(c) ? c : '#000000';
  }
  return '#000000';
}
doc.setFillColor(toPdfColor(userColor));

Type guard

function isValidColorString(c) {
  if (typeof c !== 'string') return false;
  if (/^#[0-9a-fA-F]{3}([0-9a-fA-F]{3})?$/.test(c)) return true;
  if (/^\d*\.?\d*$/.test(c)) return true;
  return new RGBColor(c).ok; // requires rgbcolor util
}

Try / catch

try {
  doc.setFillColor(userColor);
} catch (e) {
  if (/Invalid color/.test(e.message)) {
    doc.setFillColor('#000000');  // safe fallback
  } else throw e;
}

Prevention

When it happens

Trigger: `doc.setFillColor('redish')` (typo of a color name); `doc.setTextColor('rgb(300,0,0)')` (invalid RGB values RGBColor rejects); `doc.setDrawColor('hsl(0,100%,50%)')` if RGBColor can't parse it; passing a unit-bearing string like `'255px'`.

Common situations: User-typed color strings; values from a color picker that emit unsupported formats; concatenating strings that produce malformed color tokens; passing DOM style values with units.

Related errors


AI-assisted analysis of parallax/jsPDF@a3930ce03a (2026-08-13). Data as JSON: /api/errors/87faf7ae56da31a9. Report an issue: GitHub.