Vite Plugin

Setup

Add the plugin to your vite.config.ts:

import { defineConfig } from 'vite'
import { okColor } from 'okcolor'

export default defineConfig({
  plugins: [
    okColor(),
  ],
})

That’s it. Every .css file processed by Vite will have legacy colors automatically converted to OKLCH.

Options

interface okColorOptions {
  /**
   * Include only files matching these glob patterns.
   * @default ['**/*.css']
   */
  include?: string | string[]

  /**
   * Exclude files matching these glob patterns.
   * @default ['node_modules/**']
   */
  exclude?: string | string[]

  /**
   * Whether to add `in oklch` to linear-gradient() stops.
   * @default true
   */
  gradients?: boolean

  /**
   * Preserve original color comments next to converted values.
   * @default false
   */
  preserveComments?: boolean
}

Example with options

import { okColor } from 'okcolor'

export default defineConfig({
  plugins: [
    okColor({
      include: ['src/**/*.css'],
      exclude: ['src/vendor/**'],
      gradients: true,
    }),
  ],
})

Tailwind CSS v4

Tailwind CSS v4 uses OKLCH for its own color utilities, so okcolor leaves them alone. It only transforms legacy colors in your custom CSS:

/* Input */
.my-button {
  background: #3b82f6;
  border-color: rgb(59 130 246);
}

/* Output */
.my-button {
  background: oklch(61.78% 0.17686 250.43);
  border-color: oklch(61.78% 0.17686 250.43);
}

Framework compatibility

Framework	Works?	Notes
Vite	Yes	Native plugin
Astro	Yes	Built on Vite
SvelteKit	Yes	Built on Vite
Nuxt	Yes	Built on Vite
Remix	Yes	With Vite compiler
Next.js	No	Uses webpack / turbopack
Create React App	No	Uses webpack

For Next.js or webpack projects, use the CLI instead.