Have ideas to improve npm?Join in the discussion! »

postcss-color-mix

1.1.0 • Public • Published

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#00f25%); /*  #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

Install

npm i postcss-color-mix

DownloadsWeekly Downloads

1,393

Version

1.1.0

License

MIT

Last publish

Collaborators

  • avatar