How to convert OKLCH colors to RGB in Vite (and Frameworks like Astro)

1-preparations.md

Vite plugin for OKLCH to RGB conversion

Plugin is based on chroma-js package. You need to install it with one of following commands.

# Deno
deno i npm:chroma-js
# Bun
bun i chroma-js
# NPM
npm i chroma-js
# PNPM
pnpm add chroma-js
# Yarn
yarn add chroma-js

2-config.js

import { defineConfig } from "vite";
import chroma from "chroma-js";

export default defineConfig({
  plugins: [
    {
      name: "oklch-to-rgb",
      transform(code) {
        const oklchRegex = /oklch\(([^)]+)\)/g;
        return code.replace(oklchRegex, (match, p1) => {
          // Split parameters by spaces/commas and trim whitespace
          const parts = p1.split(/[\s,]+/).map((part) => part.trim());
          if (parts.length < 3) return match; // Invalid format

          try {
            // Parse lightness (handle percentage)
            const lightnessStr = parts[0];
            const lightness = lightnessStr.endsWith("%")
              ? parseFloat(lightnessStr.slice(0, -1)) / 100
              : parseFloat(lightnessStr);

            // Parse chroma and hue
            const chromaValue = parseFloat(parts[1]);
            const hue = parseFloat(parts[2]);

            // Convert to RGB
            const rgb = chroma.oklch(lightness, chromaValue, hue).rgb();
            return `rgb(${Math.round(rgb[0])}, ${Math.round(rgb[1])}, ${Math.round(rgb[2])})`;
          } catch {
            return match; // Return original if conversion fails
          }
        });
      },
    },
  ],
});