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/
- <color value>
- 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)
- <color keyword>
- One of the pre-defined color keywords.
- transparent
- Shorthand for transparent black, rgba(0,0,0,0).
NPM
npm install values.js --save
Or as a <script>
tag from a CDN as Values
:
Unpkg CDN
<script src="https://unpkg.com/values.js"></script>
jsDelivr CDN
<script src="https://cdn.jsdelivr.net/npm/values.js"></script>
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(