postcss-blend-colors/README.md

A postcss plugin to blend 2 colors by a given factor

<a href="#installation" width="100%">
<img src="banner.svg" alt="Title banner"/>
</a>

## PostCSS Blend Colors Plugin

[//]: # (![npm bundle size]&#40;https://img.shields.io/bundlephobia/minzip/postcss-blend-colors&#41;)

[![npm version](https://badge.fury.io/js/postcss-blend-colors.svg)](https://badge.fury.io/js/postcss-blend-colors)
![npm](https://img.shields.io/npm/dt/postcss-blend-colors)
![NPM](https://img.shields.io/npm/l%2Fpostcss-blend-colors)
[![Test](https://github.com/DesignByCode/postcss-blend-colors/actions/workflows/test.yaml/badge.svg)](https://github.com/DesignByCode/postcss-blend-colors/actions/workflows/test.yaml)
![ts](https://badgen.net/badge/Built%20With/TypeScript/blue)
[![GitHub stars](https://img.shields.io/github/stars/DesignByCode/postcss-blend-colors?style=social)](https://github.com/DesignByCode/postcss-blend-colors/stargazers)
[![HitCount](https://hits.dwyl.com/designbycode/postcss-blend-colors.svg?style=flat)](http://hits.dwyl.com/designbycode/postcss-blend-colors)

[![NPM](https://nodei.co/npm/postcss-blend-colors.png)](https://nodei.co/npm/postcss-blend-colors/)

A PostCSS plugin for mixing to colors.

## 📇 Table of Contents


* [Installation](#installation)
    * [Using pnpm](#using-pnpm)
    * [Using npm](#using-npm)
    * [Using yarn](#using-yarn)
* [Setup config](#setup-config)
  * [How to use](#how-to-use-)
  * [Output](#output)
* [Contributing](#contributing)
  * [Contributors](#contributors)
* [License](#license)
* [Author](#author)

## Installation

To use this plugin, you need to have Tailwind CSS installed in your project. If you haven't installed Tailwind CSS yet, follow these steps:

#### Using pnpm

```bash
pnpm add postcss-blend-colors
```

#### Using npm

```bash
npm install postcss-blend-colors
```

#### Using yarn

```bash
yarn add postcss-blend-colors
```

## Setup config
In postcss.config.js paste the following
```javascript
module.exports = {
  plugins: {
    "postcss-blend-colors": {}
  }
}
```

### How to use 
```css
body {
  background: mix(red, blue);
  color: mix(red, blue, 0.25);
}
```
### Output
```css
body {
  background: #b400b4;
  color: #dd0080;
}
```



## Contributing

Contributions to this plugin are welcome! If you encounter any issues, have feature requests, or want to improve the plugin, feel free to create a pull request or submit an issue on the GitHub repository.

### Contributors

<a href="https://github.com/DesignByCode/postcss-blend-colors/graphs/contributors">
  <img src="https://contrib.rocks/image?repo=DesignByCode/postcss-blend-colors" />
</a>

## License

This project is licensed under the [MIT](LICENCE) License - see the [LICENSE](LICENCE) file for details.

## Author

<div>
<img  align="left" style="box-shadow:3px 3px 3px rgba(0,0,0,75);border-radius:1rem;border:solid 2px rgba(255,225,225,.25)" src="https://github.com/designbycode.png?size=130" alt="Claude Myburgh">
</div>
<h2 style="margin-top:0">Claude Myburgh</h2><ul style="padding-left:0;margin-top:-.63rem;list-style:none"><li>Github:<a href="https://github.com/designbycode"> @designbycode</a></li><li>Npm:<a href="https://www.npmjs.
com/~designbycode_"> @designbycode_</a></li></ul>

[//]: # ()

[//]: # (## Acknowledgments)

[//]: # ()

[//]: # (- This plugin is inspired by the needs of web developers using Tailwind CSS.)

[//]: # (- Special thanks to the Tailwind CSS team for creating such an amazing framework.)