PostCSS Color Blender

PostCSS plugin to mix hex, rgba and rgba colors and set it to the background-color property.

Install

npm intall postcss-color-blender --save-dev

Examples

Hex

.foo {
  color-blender: #111, #666666;
}
 
.bar {
  color-blender: #00ffff, #3c3c3c, #125678, #fadafa;
}

.foo {
  background-color: #3c3c3c;
}
 
.bar {
  background-color: #529bab;
}

Rgb

.foo42 {
  color-blender: rgb(0, 0, 0), rgb(255, 255, 255);
}

.foo42 {
  background-color: #808000;
}

Rgba

.bar42 {
  color-blender: rgba(0, 0, 0, .1), rgb(255, 255, 255, 1);
}

.bar42 {
  background-color: #808000;
}

Usage

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

See PostCSS docs for examples for your environment.