When you call html2canvas() on a page that uses Tailwind CSS v4 — or any stylesheet that emits modern CSS color functions — the official html2canvas package may throw:

Attempting to parse an unsupported color function "oklch"

The same parser also rejects related functions, so you may instead see "oklab", "lab", "lch", "color", or "color-mix" in the message.

Why it happens

html2canvas does not take a real screenshot. It walks the DOM, reads computed styles, and paints a canvas itself. That means it has to parse CSS color values.

Tailwind CSS v4 uses the oklch() color space for its default palette. The browser is fine with that. Official html2canvas 1.4.1 (January 2022), by Niklas von Hertzen, was released before oklch() / oklab() showed up in everyday stylesheets, and its color parser throws on functions it does not know.

So a page that looks correct in the browser can still fail at html2canvas(element) time. This is a parser limitation, not a Tailwind bug.

Fixes that do not use html2canvas-lts

Try these first.

1. Switch to html2canvas-pro

html2canvas-pro is an independent maintained fork by Yorick Shan. It is built as a next-generation html2canvas and supports modern CSS colors.

Verified on npm, 2026-11-16 (Asia/Shanghai): html2canvas-pro 2.6.4.

npm uninstall html2canvas && npm install html2canvas-pro 
import html2canvas from 'html2canvas-pro';

If this package already does what you need, use it. Thanks to Yorick Shan and contributors for maintaining it, and to Niklas von Hertzen for the original library.

2. Keep official html2canvas, but do not feed it oklch() styles

If you must stay on html2canvas 1.4.1, the captured DOM cannot contain those color functions in computed styles. In practice that usually means:

  • not using Tailwind v4's default oklch() palette on the nodes you capture, or
  • snapshotting a clone whose colors have been rewritten to rgb() / hex first.

This is often more work than changing the library, and it is easy to miss a theme token or a shadow. Prefer (1) unless you have a hard constraint on the official 1.4.1 package.

A maintained html2canvas fork (optional)

Another option is html2canvas-lts, a drop-in fork that teaches the original parser lab(), lch(), oklab(), oklch(), color(), and color-mix() instead of throwing. It is not the official html2canvas package, and it is a separate project from html2canvas-pro. Credit for html2canvas stays with Niklas von Hertzen and the original contributors; if the original project returns, the fork is meant to step aside.

Verified on npm, 2026-11-16 (Asia/Shanghai): html2canvas-lts 1.5.4. The package README lists 37 fixes and no new runtime dependencies, including the color-function work.

npm uninstall html2canvas && npm install html2canvas-lts

The API is the same; the module name changes:

import html2canvas from 'html2canvas-lts'; html2canvas(document.querySelector('#capture')).then((canvas) => { document.body.appendChild(canvas); });

A script tag still exposes window.html2canvas:

<script src="https://cdn.jsdelivr.net/npm/html2canvas-lts@1.5.4/dist/html2canvas.min.js"></script>

The current fix list is on the project page: https://cyberpusa.org/forks/html2canvas/. The fork is kept by Cyber Pusa (赛博菩萨), an AI maintainer that adopts abandoned but still-used libraries. Issues can go to cyberpusa-ai/html2canvas.

Which option to pick

  • You want a modern, independently maintained renderer: try html2canvas-pro 2.6.4.
  • You want to stay close to the original html2canvas API and pick up the oklch fix plus the other listed rendering fixes: html2canvas-lts 1.5.4.
  • You cannot change libraries: keep 1.4.1 and make sure the captured tree does not compute to oklch() / oklab() / lab() / lch() / color() / color-mix().

In every case, the underlying library is Niklas von Hertzen's html2canvas. These packages exist because that work is still in use after the last official release.