# @csstools/postcss-oklab-function > Use oklab() and oklch() color functions in CSS Latest version **5.0.12** (published 2026-09-13) · MIT-0 license · 0 weekly downloads ## Install ```sh npm install @csstools/postcss-oklab-function pnpm add @csstools/postcss-oklab-function yarn add @csstools/postcss-oklab-function bun add @csstools/postcss-oklab-function ``` ## Health **Score 60/100 (C)** — status: active. Positive: esm support; no vulnerabilities; recently updated; high maintenance score. Warnings: low downloads; no types. ## Facts | | | |---|---| | Version | 5.0.12 | | Published | 2026-09-13 | | First published | 2022-02-11 | | Weekly downloads | 0 | | License | MIT-0 | | TypeScript types | none | | Module format | ESM | | Node | >=20.19.0 | | Dependencies | 5 | | Unpacked size | 9.8 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 1052 | | Author | Jonathan Neal | | Maintainers | jonathantneal, alaguna, romainmenke | | Keywords | color, css, design, display-p3, oklab, oklch, postcss, postcss-plugin, syntax | ## Links - npm: https://www.npmjs.com/package/@csstools/postcss-oklab-function - Repository: https://github.com/csstools/postcss-plugins - Homepage: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-oklab-function#readme - Issues: https://github.com/csstools/postcss-plugins/issues - Funding: https://github.com/sponsors/csstools - npm.io page: https://npm.io/package/@csstools/postcss-oklab-function ## Dependencies (5) - [@csstools/utilities](https://npm.io/package/@csstools/utilities.md) ^3.0.0 - [@csstools/css-tokenizer](https://npm.io/package/@csstools/css-tokenizer.md) ^4.0.0 - [@csstools/css-color-parser](https://npm.io/package/@csstools/css-color-parser.md) ^4.2.3 - [@csstools/css-parser-algorithms](https://npm.io/package/@csstools/css-parser-algorithms.md) ^4.0.0 - [@csstools/postcss-progressive-custom-properties](https://npm.io/package/@csstools/postcss-progressive-custom-properties.md) ^5.1.3 ## Alternatives - [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads - [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads - [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads - [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads - [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads ## Recent versions - 5.0.12 (latest) — 2026-09-13 - 5.0.11 — 2026-09-06 - 5.0.10 — 2026-08-31 - 5.0.9 — 2026-08-25 - 5.0.8 — 2026-08-15 - 5.0.7 — 2026-07-22 - 5.0.6 — 2026-06-28 - 5.0.5 — 2026-06-14 - 5.0.4 — 2026-05-13 - 5.0.3 — 2026-04-12 - 5.0.2 — 2026-02-21 - 5.0.1 — 2026-01-25 - 5.0.0 — 2026-01-14 - 4.0.12 — 2025-09-21 - 4.0.11 — 2025-08-22 - … 43 more at https://npm.io/package/@csstools/postcss-oklab-function/versions ## README # PostCSS OKLab Function [PostCSS Logo][postcss] [npm version][npm-url] [Build Status][cli-url] [Discord][discord]

[Baseline Status][css-url] [CSS Standard Status][css-url] [PostCSS OKLab Function] lets you use `oklab` and `oklch` color functions in CSS, following the [CSS Color] specification. ```css .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: ```bash npm install postcss @csstools/postcss-oklab-function --save-dev ``` Use it as a [PostCSS] plugin: ```js 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: | [Node](INSTALL.md#node) | [PostCSS CLI](INSTALL.md#postcss-cli) | [Webpack](INSTALL.md#webpack) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) | | --- | --- | --- | --- | --- | ## Options ### preserve The `preserve` option determines whether the original notation is preserved. By default, it is not preserved. ```js postcssOKLabFunction({ preserve: true }) ``` ```css .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](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties#readme). ```js postcssOKLabFunction({ enableProgressiveCustomProperties: false }) ``` ```css :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. ```js postcssOKLabFunction({ subFeatures: { displayP3: false } }) ``` ```css .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). [cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test [css-url]: https://cssdb.org/#oklab-function [discord]: https://discord.gg/bUadyRwkJS [npm-url]: https://www.npmjs.com/package/@csstools/postcss-oklab-function [CSS Color]: https://www.w3.org/TR/css-color-4/#specifying-oklab-oklch [Gulp PostCSS]: https://github.com/postcss/gulp-postcss [Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss [PostCSS]: https://github.com/postcss/postcss [PostCSS Loader]: https://github.com/postcss/postcss-loader [PostCSS OKLab Function]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-oklab-function --- _Source: https://npm.io/package/@csstools/postcss-oklab-function · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._