mix-css-color
Mix two colors together in variable proportion. Opacity is included in the calculations.
Output should be similar to the less
/sass
mix()
function.
Supports
- <color value>
- Hexadecimal RGB value: #RGB #RRGGBB
- #RGBA #RRGGBBAA (4 and 8-digit hexadecimal RGBA notation)
- RGB/A color module level 3 and 4 (number, percentage)
- HSL/A color module level 3 and 4 (number, deg, rad, turn)
- <color keyword>
- transparent
- Shorthand for transparent black, rgba(0,0,0,0).
Does not support
Installation
NPM
npm i mix-css-color
Or as a <script>
tag from a CDN as mixCssColor
:
Unpkg CDN
<script src="https://unpkg.com/mix-css-color"></script>
jsDelivr CDN
<script src="https://cdn.jsdelivr.net/npm/mix-css-color"></script>
Usage
import mix from 'mix-css-color'
mix('rgb(255 255 255 / 1)', 'red')
mix('black', 'rgba(255, 0, 0, 0.22)', 22)
mix('rgba(100% 255 100% / 0)')
See tests for more cases.
API
mix(color1:string, color2: string, [percentage: number=50])
- @param color1 - CSS string
- @param color2 - CSS string
- @param [percentage=50] - a number within 0 and 100
Dev
npm install
npm test
npm run dev
Related
License
MIT © Noel Delgado