JSPM

mix-css-color

0.2.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 60085
  • Score
    100M100P100Q162204F
  • License MIT

Mix two colors together in variable proportion. Opacity is included in the calculations.

Package Exports

  • mix-css-color
  • mix-css-color/dist/index.cjs.js
  • mix-css-color/dist/index.esm.js
  • mix-css-color/dist/index.umd.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (mix-css-color) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

mix-css-color

npm-image license-image Known Vulnerabilities

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

  • 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

License

MIT © Noel Delgado