html2canvas: Attempting to parse an unsupported color function "oklch" when using Tailwind CSS v4

[Abbeyf123]

Hi! I’m running into an issue when trying to generate PDFs or screenshots with html2canvas while using Tailwind CSS v4, which now outputs colors in the oklch() format by default.

When html2canvas tries to parse elements styled with Tailwind colors (e.g. bg-green-500), it throws this error:

Attempting to parse an unsupported color function "oklch"

Environment

• html2canvas version: 1.4.1 (latest as of now)
• Tailwind CSS version: 4.0.0 (using new okLCH color syntax)
• Browser: Chrome 141
• Framework: Next.js 15
• OS: Windows 11

🙏 Request

Can support for oklch() and oklab() color parsing be added in a future release?
Tailwind v4+ now uses these by default, so this will affect a large portion of frontend developers using html2canvas.

[yorickshan]

try npmjs.com/package/html2canvas-pro, it supports color function oklch.

[hubert-grzesiak]

Hi @yorickshan, when I'm using html2canvas-pro i have an issue with spacings, in html2canvas everything looks normal like in the preview but after generating canvas the spacings are different. The left is the correct version using html2canvas and in the right there is incorrect using html2canvas-pro

[Abbeyf123]

try npmjs.com/package/html2canvas-pro, it supports color function oklch.

I later settled on using html2canvas-oklch but your solutions works too thank you very much

[Abbeyf123]

Hi @yorickshan, when I'm using html2canvas-pro i have an issue with spacings, in html2canvas everything looks normal like in the preview but after generating canvas the spacings are different. The left is the correct version using html2canvas and in the right there is incorrect using html2canvas-pro

Try using html2canvas-oklch