postcss-color-mix

Mix two colors together in PostCSS

Usage no npm install needed!

<script type="module">
  import postcssColorMix from 'https://cdn.skypack.dev/postcss-color-mix';
</script>

README

postcss-color-mix

NPM version Build Status Coveralls Status Dependency Status

Mix two colors together in PostCSS

Mixes two colors together. Specifically, takes the average of each of the RGB components, optionally weighted by the given percentage. The opacity of the colors is also considered when weighting the components.

The weight specifies the amount of the first color that should be included in the returned color. The default, 50%, means that half the first color and half the second color should be used. 25% means that a quarter of the first color and three quarters of the second color should be used.

Install

npm install --save postcss-color-mix

Usage

postcss([ require('postcss-color-mix') ])

See PostCSS docs for examples for your environment.

.foo {
  color: mix(#f00, #00f);      /*  #800080  */
  color: mix(#f00, #00f, 25%); /*  #4000BF  */
  color: mix(#f00, #00f, .25); /*  #4000BF  */
  color: mix(rgba(255, 0, 0, 0.5), #00f); /*  rgba(64, 0, 191, 0.75)  */
}

License

MIT © Vladimir Starkov