postcss-blend-colors

PostCSS Blend Colors Plugin

The PostCSS Blend Colors plugin is designed to simplify the process of blending colors within CSS declarations. It utilizes the chroma-js library to perform color blending operations, allowing developers to define custom color blends using a mix() function in their stylesheets.

📇 Table of Contents

• Motivation
• Installation
  • Using pnpm
  • Using npm
  • Using yarn
• How to setup
  • In postcss.config.js
  • In css
  • Converted output
• Contributing
  • Contributors
• License
• Author

Motivation

The motivation behind this plugin is to provide a seamless way for web developers to incorporate custom color blending effects into their stylesheets. While CSS already supports basic color blending modes, the mix() function allows developers to define their own blending ratios and apply them to various color formats. This flexibility enables designers to create unique and visually appealing color transitions that go beyond the default CSS blending options.

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

pnpm add postcss-blend-colors

Using npm

npm install postcss-blend-colors

Using yarn

yarn add postcss-blend-colors

How to set up

In postcss.config.js

module.exports = {
    plugins: {
        "postcss-blend-colors": {}
    }
}

In css

body {
    background: mix('blue', 'red', 0.5);
}

Converted output

body {
    background: #800080;
}

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

License

This project is licensed under the MIT License - see the LICENSE file for details.

Author

Claude Myburgh

• Github: @designbycode
• Npm: @designbycode_