values.js

[![NPM Version][npm-image]][npm-url]
[![Minzipped size][bundlephobia-image]][bundlephobic-url]
[![License][license-image]][license-url]
![][github-actions-nodejs-image]
[![codecov][codecov-image]][codecov-url]
[![Known Vulnerabilities][snyk-image]][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]

Get tints and shades of a CSS color

> _The lightness or darkness of a color is called its value.
Tints are light values that are made by mixing a color with white, which increases lightness. Shades are dark values that are made by mixing a color with black, which reduces lightness._

https://noeldelgado.github.io/values.js/

$3

* \
* Hexadecimal RGB value: #RGB #RRGGBB
* #RGBA #RRGGBBAA (4 and 8-digit hexadecimal RGBA notation)
* RGB/A - CSS Color Module Level 3 and 4 (number, percentage)
* HSL/A - CSS Color Module Level 3 and 4 (number, deg, rad, turn)
* \
* One of the pre-defined color keywords.
* transparent
* Shorthand for transparent black, rgba(0,0,0,0).

Installation

NPM

``sh npm install values.js --save`

Or as a
`

jsDelivr CDN

`html`

`Usage`

js
import Values from 'values.js'
const color = new Values('hsl(204deg 100% 50% / 1)'), { log } = console
log(color.tint(25))
//> { rgb: [64, 179, 255], alpha: 1, type: "tint", weight: 25, ...methods }
log(color.shade(12))
//> { rgb: [0, 135, 224], alpha: 1, type: "shade", weight: 12, ...methods }
log(color.tints(8))
//> (12) [Values...]
log(color.shades(23))
//> (4) [Values...]
log(color.all(20))
//> (11) [Values...]

// instance example for 'red' Values { alpha: 1 rgb: (3) [255, 0, 0] type: "base" weight: 0 get hex: ƒ(...) setColor: ƒ setColor(color) tint: ƒ tint(weight=50) tints: ƒ tints(weight=10) shade: ƒ shade(weight=50) shades: ƒ shades(weight=10) all: ƒ all(weight=10) hexString: ƒ hexString() rgbString: ƒ rgbString() getBrightness: ƒ getBrightness() }`See tests for more cases.

`API`

`$3`


Throws if the color is not accepted.

- @param {string} color — a valid CSS color string

`$3`


Sets a new base color, returns

null if color has not been accepted.

- @param {string} color- a valid CSS color string -@return {Values|null}

`$3`


Lightens the base color by mixing it with white as specified by weight.

- @param {number} [weight=50]-@return {Values}

`$3`


Darkens the base color by mixing it with black as specified by weight.

- @param {number} [weight=50]-@return {Values}

`$3`


Generates the tints of the base color as specified by weight.

- @param {number} [weight=10]-@return {Array}

`$3`


Generates the shades of the base color as specified by weight.

- @param {number} [weight=10]-@return {Array}

`$3`


Generates the tints and shades of the base color as specified by weight.

- @param {number} [weight=10]-@return {Array}

`$3`


Returns the color in hexadecimal RGB notation.

- @returns {string} @example #000000 or #00000080

`$3`


Returns the color in rgb() functional notation.

- @returns {string} @example rgb(0, 0, 0) or rgba(0, 0, 0, 0.5)

`$3`


Calculates the brightness of the color.

- @return {number} — the base-color brightness.

`Dev`

sh
npm install 	# install dev-dependencies
npm test		# run the tests
npm run dev 	# watch for changes and run tests

- shadowlord - Tints and shades generator tool
- mix-css-color - Mix two CSS colors together in variable proportion. Opacity is included in the calculations.
- parse-css-color - Parse a CSS color string

License

MIT © Noel Delgado

[npm-image]: https://img.shields.io/npm/v/values.js.svg?logo=npm&label=NPM
[npm-url]: https://www.npmjs.com/package/values.js
[github-actions-nodejs-image]: https://github.com/noeldelgado/values.js/workflows/Node.js%20CI/badge.svg
[github-actions-lighthouse-image]: https://github.com/noeldelgado/values.js/workflows/Lighthouse/badge.svg
[codecov-image]: https://codecov.io/gh/noeldelgado/values.js/branch/master/graph/badge.svg
[codecov-url]: https://codecov.io/gh/noeldelgado/values.js
[license-image]: https://img.shields.io/npm/l/values.js.svg
[license-url]: https://github.com/noeldelgado/values.js/blob/master/LICENSE
[bundlephobia-image]: https://img.shields.io/bundlephobia/minzip/values.js?label=size
[bundlephobic-url]: https://bundlephobia.com/result?p=values.js
[snyk-image]: https://snyk.io/test/npm/values.js/badge.svg
[snyk-url]: https://snyk.io/test/npm/values.js
[david-image]: https://img.shields.io/david/noeldelgado/values.js.svg
[david-url]: https://david-dm.org/noeldelgado/values.js
[david-dev-image]: https://img.shields.io/david/dev/noeldelgado/values.js.svg
[david-dev-url]: https://david-dm.org/noeldelgado/values.js?type=dev
[librariesio-img]: https://img.shields.io/librariesio/release/npm/values.js
[librariesio-url]: https://libraries.io/npm/values.js
[lgtm-image]: https://img.shields.io/lgtm/alerts/g/noeldelgado/values.js.svg?logo=lgtm&logoWidth=18
[lgtm-url]: https://lgtm.com/projects/g/noeldelgado/values.js/alerts/
[lgtm-grade-image]: https://img.shields.io/lgtm/grade/javascript/g/noeldelgado/values.js.svg?logo=lgtm&logoWidth=18
[lgtm-grade-url]: https://lgtm.com/projects/g/noeldelgado/values.js/context:javascript

values.js

Get tints and shades of a CSS color

https://noeldelgado.github.io/values.js/

$3

Installation

NPM

``sh npm install values.js --save`

Or as a
`

jsDelivr CDN

`html`

`Usage`

js
import Values from 'values.js'
const color = new Values('hsl(204deg 100% 50% / 1)'), { log } = console
log(color.tint(25))
//> { rgb: [64, 179, 255], alpha: 1, type: "tint", weight: 25, ...methods }
log(color.shade(12))
//> { rgb: [0, 135, 224], alpha: 1, type: "shade", weight: 12, ...methods }
log(color.tints(8))
//> (12) [Values...]
log(color.shades(23))
//> (4) [Values...]
log(color.all(20))
//> (11) [Values...]

`API`

`$3`


Throws if the color is not accepted.

- @param {string} color — a valid CSS color string

`$3`


Sets a new base color, returns

null if color has not been accepted.

- @param {string} color- a valid CSS color string -@return {Values|null}

`$3`


Lightens the base color by mixing it with white as specified by weight.

- @param {number} [weight=50]-@return {Values}

`$3`


Darkens the base color by mixing it with black as specified by weight.

- @param {number} [weight=50]-@return {Values}

`$3`


Generates the tints of the base color as specified by weight.

- @param {number} [weight=10]-@return {Array}

`$3`


Generates the shades of the base color as specified by weight.

- @param {number} [weight=10]-@return {Array}

`$3`


Generates the tints and shades of the base color as specified by weight.

- @param {number} [weight=10]-@return {Array}

`$3`


Returns the color in hexadecimal RGB notation.

- @returns {string} @example #000000 or #00000080

`$3`


Returns the color in rgb() functional notation.

- @returns {string} @example rgb(0, 0, 0) or rgba(0, 0, 0, 0.5)

`$3`


Calculates the brightness of the color.

- @return {number} — the base-color brightness.

`Dev`

sh
npm install 	# install dev-dependencies
npm test		# run the tests
npm run dev 	# watch for changes and run tests

License

values.js

values.js

$3

Installation

`Usage`

`API`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`Dev`

Related

License

values.js

values.js

$3

Installation

`Usage`

`API`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`Dev`

Related

License

Dist Tags