Unsupported Color Function 'oklab' Error in html2canvas

I'm using html2canvas version 1.4.0, but I'm encountering an issue where the canvas fails to render properly. The following error is displayed:

Error: Attempting to parse an unsupported color function "oklab"

It seems that the oklab color function is not working. How can I resolve this issue?

Solution

Unfortunately, the oklab color function is not supported in the latest version of the html2canvas library.

To fix this issue, consider using html2canvas-pro. This library is a fork of html2canvas and maintains the same API while adding support for modern color functions such as color, lab, lch, oklab, and oklch.

Alternative #1

I've run into this with html2canvas and modern color functions like oklab. If you can't switch to html2canvas-pro, you can preprocess your CSS to convert oklab to a supported color format (like rgb or hex).

You can use a PostCSS plugin or a simple script to replace oklab colors before rendering:

// Example: Replace oklab() with rgb() fallback
const elements = document.querySelectorAll('*');
elements.forEach(el => {
  if (el.style.color.includes('oklab(')) {
    el.style.color = '#888888'; // fallback color
  }
});

This ensures html2canvas won't encounter unsupported color functions.

Alternative #2

If you have control over your CSS build process, use a tool like PostCSS with a plugin to convert oklab and other modern color functions to rgb or hex during your build step:

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-oklab'), // Converts oklab() to rgb()
    require('autoprefixer'),
  ]
};

This way, your production CSS will only contain supported color formats, and html2canvas will work as expected.

Alternative #3

If you're using a framework like React or Vue, you can use a runtime workaround to temporarily replace oklab colors before calling html2canvas, then restore them after:

function replaceOklabColors(element) {
  const originalColors = [];
  element.querySelectorAll('*').forEach(el => {
    if (el.style.color.includes('oklab(')) {
      originalColors.push({ el, color: el.style.color });
      el.style.color = '#888888';
    }
  });
  return originalColors;
}

function restoreColors(originalColors) {
  originalColors.forEach(({ el, color }) => {
    el.style.color = color;
  });
}

// Usage
const originals = replaceOklabColors(document.getElementById('target'));
html2canvas(document.getElementById('target')).then(canvas => {
  restoreColors(originals);
  // Use canvas
});

This lets you keep modern color functions in your codebase while still supporting html2canvas.