Skip to content

Files

Latest commit

5a12804 · Apr 19, 2025

History

History

postcss-color-mix-function

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
May 16, 2024
Nov 11, 2024
May 16, 2024
Aug 3, 2024
Mar 22, 2023
Nov 11, 2024
Apr 19, 2025
Mar 22, 2023
Jun 23, 2023
Feb 23, 2025
Dec 15, 2023
Apr 19, 2025
Mar 22, 2023

PostCSS Color Mix Function PostCSS Logo

npm version Build Status Discord

Baseline Status CSS Standard Status

npm install @csstools/postcss-color-mix-function --save-dev

PostCSS Color Mix Function lets you use the color-mix() function following the CSS Color 5 Specification.

.purple_plum {
	color: color-mix(in lch, purple 50%, plum 50%);
}

/* becomes */

.purple_plum {
	color: rgb(175, 92, 174);
}

Note

We can not dynamically resolve var() arguments in color-mix(), only static values will work.

Usage

Add PostCSS Color Mix Function to your project:

npm install postcss @csstools/postcss-color-mix-function --save-dev

Use it as a PostCSS plugin:

const postcss = require('postcss');
const postcssColorMixFunction = require('@csstools/postcss-color-mix-function');

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

PostCSS Color Mix 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.

postcssColorMixFunction({ preserve: true })
.purple_plum {
	color: color-mix(in lch, purple 50%, plum 50%);
}

/* becomes */

.purple_plum {
	color: rgb(175, 92, 174);
	color: color-mix(in lch, purple 50%, plum 50%);
}