postcss-color-yiq

Set foreground text color based on the YIQ color space.

Install

With npm do:

npm install postcss-color-yiq --save

Given a background color, postcss-color-yiq will transform the yiq placeholder to #000 or #fff depending on which has a more suitable contrast. It's useful in combination with modules such as https://github.com/postcss/postcss-simple-vars & https://github.com/pascalduez/postcss-map, and works with hex, rgb, hsl and CSS color keywords.

h1 {
    color: yiq;
    background: #ff0066;
}

h1 {
    color: #fff;
    background: #ff0066;
}

Type: string Default: #000

Pass another hex color to customise the foreground color when the background is dark.

Type: string Default: #fff

Pass another hex color to customise the foreground color when the background is light.

See the PostCSS documentation for examples for your environment.

Thanks goes to these wonderful people (emoji key):

_{Ben Briggs} 💻 📖 👀 ⚠️	_{Vince Speelman} 💻	_{Bogdan Chadkin} 👀

This project follows the all-contributors specification. Contributions of any kind welcome!