PostCSS OKLab Function

PostCSS OKLab Function lets you use oklab and oklch color functions in CSS, following the CSS Color specification.

.test-oklab {
    color: oklab(40% 0.001236 0.0039);
}

.test-oklch {
    color: oklch(40% 0.268735435 34.568626);
}

/* becomes */

.test-oklab {
    color: rgb(73, 71, 69);
    color: color(display-p3 0.28515 0.27983 0.27246);
}

.test-oklch {
    color: rgb(131, 28, 0);
    color: color(display-p3 0.49163 0.11178 0.00000);
}

Usage

Add PostCSS OKLab Function to your project:

npm install postcss @csstools/postcss-oklab-function --save-dev

Use it as a PostCSS plugin:

const postcss = require('postcss');
const postcssOKLabFunction = require('@csstools/postcss-oklab-function');

postcss([
  postcssOKLabFunction(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);

PostCSS OKLab Function runs in all Node environments, with special instructions for:

Options

preserve

The preserve option determines whether the original notation is preserved. By default, it is not preserved.

postcssOKLabFunction({ preserve: true })

.test-oklab {
    color: oklab(40% 0.001236 0.0039);
}

.test-oklch {
    color: oklch(40% 0.268735435 34.568626);
}

/* becomes */

.test-oklab {
    color: rgb(73, 71, 69);
    color: color(display-p3 0.28515 0.27983 0.27246);
    color: oklab(40% 0.001236 0.0039);
}

.test-oklch {
    color: rgb(131, 28, 0);
    color: color(display-p3 0.49163 0.11178 0.00000);
    color: oklch(40% 0.268735435 34.568626);
}

enableProgressiveCustomProperties

The enableProgressiveCustomProperties option determines whether the original notation is wrapped with @supports when used in Custom Properties. By default, it is enabled.

[!NOTE] We only recommend disabling this when you set preserve to false or if you bring your own fix for Custom Properties.
See what the plugin does in its README.

postcssOKLabFunction({ enableProgressiveCustomProperties: false })

:root {
    --firebrick: oklab(40% 0.234 0.39);
}

/* becomes */

:root {
    --firebrick: rgb(133, 0, 67); /* will never be used, not even in older browser */
    --firebrick: color(display-p3 0.49890 0.00000 0.25954); /* will never be used, not even in older browser */
    --firebrick: oklab(40% 0.234 0.39);
}

subFeatures

displayP3

The subFeatures.displayP3 option determines if color(display-p3 ...) is used as a fallback.
By default, it is enabled.

display-p3 can display wider gamut colors than rgb on some devices.

postcssOKLabFunction({
    subFeatures: {
        displayP3: false
    }
})

.test-oklab {
    color: oklab(40% 0.001236 0.0039);
}

.test-oklch {
    color: oklch(40% 0.268735435 34.568626);
}

/* becomes */

.test-oklab {
    color: rgb(73, 71, 69);
}

.test-oklch {
    color: rgb(131, 28, 0);
}

Copyright : color conversions

This software or document includes material copied from or derived from https://github.com/w3c/csswg-drafts/tree/main/css-color-4. Copyright © 2022 W3C® (MIT, ERCIM, Keio, Beihang).