mix-css-color
v0.2.0
Published
Mix two colors together in variable proportion. Opacity is included in the calculations.
Downloads
106,999
Readme
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>
- One of the pre-defined color keywords.
- transparent
- Shorthand for transparent black, rgba(0,0,0,0).
Does not support
- currentColor
- inherit
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') // default 50% mix
//> {rgba: [255, 128, 128, 1], hsla: [0, 100, 75, 1], hex: '#ff8080', hexa: '#ff8080ff' }
mix('black', 'rgba(255, 0, 0, 0.22)', 22) // 22% mix
//> { rgba: [78, 0, 0, 0.3916], hsla: [0, 100, 15, 0.3916], hex: '#4e0000', hexa: '#4e000064' }
mix('rgba(100% 255 100% / 0)') // error: mixed percetange with integer
//> null
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 # install dependencies
npm test # run the tests
npm run dev # watch for changes and rebuild
Related
- parse-css-color - Parse a CSS color string
- values.js - Get the tints and shades of a CSS color
License
MIT © Noel Delgado