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. I borrowed implementation from Sass.
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.
npm install --save postcss-color-mix
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) */
}MIT © Vladimir Starkov