# parse-css-color

> parse a css color string

Latest version **0.2.1** (published 2022-04-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install parse-css-color
pnpm add parse-css-color
yarn add parse-css-color
bun add parse-css-color
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.1 |
| Published | 2022-04-07 |
| First published | 2020-05-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 23.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 15 |
| Author | Noel Delgado |
| Maintainers | noeldelgado |
| Keywords | parse, css, color, string, colour, rgb, rgba, hsl, hsla, hex, hexa, alpha |

## Links

- npm: https://www.npmjs.com/package/parse-css-color
- Repository: https://github.com/noeldelgado/parse-css-color
- Homepage: https://github.com/noeldelgado/parse-css-color#readme
- Issues: https://github.com/noeldelgado/parse-css-color/issues
- npm.io page: https://npm.io/package/parse-css-color

## Dependencies (2)

- [hex-rgb](https://npm.io/package/hex-rgb.md) ^4.1.0
- [color-name](https://npm.io/package/color-name.md) ^1.1.4

## Alternatives

- [postcss-color-hex-alpha](https://npm.io/package/postcss-color-hex-alpha.md) — 6.4M weekly downloads
- [randomcolor](https://npm.io/package/randomcolor.md) — 348.0K weekly downloads
- [bows](https://npm.io/package/bows.md) — 1.3K weekly downloads
- [ep_prefer_color_scheme](https://npm.io/package/ep_prefer_color_scheme.md) — 260 weekly downloads
- [coc-yank](https://npm.io/package/coc-yank.md) — 61 weekly downloads

## Recent versions

- 0.2.1 (latest) — 2022-04-07
- 0.2.2-beta.0 (beta) — 2022-03-16
- 0.2.0 — 2022-03-16
- 0.1.2 — 2020-05-19
- 0.1.1 — 2020-05-19
- 0.1.0 — 2020-05-18
- 0.0.1-beta.1 — 2020-05-16
- 0.0.1-beta.0 — 2020-05-16

## README

# parse-css-color
[![NPM Version][npm-image]][npm-url]
![](https://img.badgesize.io/noeldelgado/parse-css-color/master/src/index.js.svg?compression=gzip)
[![License][license-img]][license-url]
[![Known Vulnerabilities][snyk-img]][snyk-url]
[![Libraries.io dependency status for latest release][librariesio-img]][librariesio-url]
[![Total alerts][lgtm-image]][lgtm-url]
[![Language grade: JavaScript][lgtm-grade-image]][lgtm-grade-url]

Parse a CSS color string.

### 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](https://www.w3.org/wiki/CSS/Properties/color/keywords).
* transparent
	* Shorthand for transparent black, rgba(0,0,0,0).

### Does not support
* currentColor
* inherit

## Installation

**NPM**

```sh
npm i parse-css-color
```

Or as a `<script>` tag from a CDN as `parseCssColor`:

**Unpkg CDN**

```html
<script src="https://unpkg.com/parse-css-color"></script>
```

**jsDelivr CDN**

```html
<script src="https://cdn.jsdelivr.net/npm/parse-css-color"></script>
```

## Usage
```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](https://github.com/noeldelgado/parse-css-color/tree/master/test) 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
```

## Related
- [mix-css-color](https://github.com/noeldelgado/mix-css-color) - Mix two CSS colors together in variable proportion. Opacity is included in the calculations.
- [values.js](https://github.com/noeldelgado/values.js) - Get the tints and shades of a CSS color.

## License
MIT © [Noel Delgado](http://pixelia.me/)

[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

---
_Source: https://npm.io/package/parse-css-color · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._