postcss-color-yiq

Set foreground text color based on the YIQ color space.

Usage no npm install needed!

<script type="module">
  import postcssColorYiq from 'https://cdn.skypack.dev/postcss-color-yiq';
</script>

README

postcss-color-yiq Build Status NPM version Dependency Status

Set foreground text color based on the YIQ color space.

Install

With npm do:

npm install postcss-color-yiq --save

Example

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.

Input

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

Output

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

API

yiq([options])

options

dark

Type: string Default: #000

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

light

Type: string Default: #fff

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

Usage

See the PostCSS documentation for examples for your environment.

Contributors

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!

License

MIT © Ben Briggs