parse a css color string
npm install parse-css-colorParse a CSS color string.
NPM
``sh`
npm i parse-css-color
Or as a
`
jsDelivr CDN
`html`
js
import parse from 'parse-css-color'// HEX/A
parse('#00f')
//> { type: 'rgb', values: [0, 0, 255], alpha: 1 }
parse('#00f8')
//> { type: 'rgb', values: [0, 0, 255], alpha: 0.5333333333333333 }
parse('#0000FF80')
//> { type: 'rgb', values: [0, 0, 255], alpha: 0.5019607843137255 }
parse('#00g')
//> null
// HSL/A
parse('hsl(270deg 60% 70% / 25%)')
//> { type: 'hsl', values: [270, 60, 70], alpha: 0.25 }
parse('hsl(4.71239rad 260% -70% / 0.5)') // clipped to
//> { type: 'hsl', values: [270, 100, 0], alpha: 0.5 }
parse('hsla(.75turn, 60%, 70%, 50%)')
//> { type: 'hsl', values: [270, 60, 70], alpha: 0.5 }
parse('hsla(100deg 0 0 / 0)') // error: missing percetanges
//> null
// RGB/A
parse('rgb(255 0 0 / 0.5)')
//> { type: 'rgb', values: [255, 0, 0], alpha: 0.5 }
parse('rgb(500 -100 0 / 200%)') // clipped to
//> { type: 'rgb', values: [255, 0, 0], alpha: 1 }
parse('rgba(255, 0, 255, 20%)')
//> { type: 'rgb', values: [255, 0, 255], alpha: 0.2 }
parse('rgba(100% 255 100% / 0)') // error: mixed percetange with integer
//> null
`
See tests for more cases.Dev
sh
npm install # install dependencies
npm test # run the tests (append -- -w) to watch
npm run dev # watch for changes and rebuild
``[npm-image]: https://img.shields.io/npm/v/parse-css-color.svg?logo=npm&label=NPM
[npm-url]: https://www.npmjs.com/package/parse-css-color
[license-img]: https://img.shields.io/npm/l/parse-css-color
[license-url]: https://github.com/noeldelgado/parse-css-color/blob/master/LICENSE
[snyk-img]: https://snyk.io/test/npm/parse-css-color/badge.svg
[snyk-url]: https://snyk.io/test/npm/parse-css-color
[librariesio-img]: https://img.shields.io/librariesio/release/npm/parse-css-color.svg?logo=librariesdotio
[librariesio-url]: https://libraries.io/npm/parse-css-color
[lgtm-image]: https://img.shields.io/lgtm/alerts/g/noeldelgado/parse-css-color.svg?logo=lgtm&logoWidth=18
[lgtm-url]: https://lgtm.com/projects/g/noeldelgado/parse-css-color/alerts/
[lgtm-grade-image]: https://img.shields.io/lgtm/grade/javascript/g/noeldelgado/parse-css-color.svg?logo=lgtm&logoWidth=18
[lgtm-grade-url]: https://lgtm.com/projects/g/noeldelgado/parse-css-color/context:javascript