TinyColor
TinyColor copied to clipboard
Tint and Shade functions
I would like to use newly added tint and shade functions. They seem not part of the master branch yet. So I have tried installing v2 branch via npm. But I am facing import issues with that.
it isn't published yet
I needed something so I came up with this:
function getTintsShades(adjustment, color) {
const adj = adjustment
const colors = [color]
let shade, tint
for (let i = 0, n = 10; i < 5; i++, n += 20) {
if (adj === 'shade') {
shade = tinycolor.mix(color, 'black', n).toHexString()
if (!colors.includes(shade)) {
colors.push(shade)
}
} else if (adj === 'tint') {
tint = tinycolor.mix(color, 'white', n).toHexString()
if (!colors.includes(tint)) {
colors.push(tint)
}
} else {
return []
}
}
return colors
}
Then to use:
const color = tinycolor('#ff0000');
const tints = getTintsShades(tint, color);
const shades = getTintsShades(shade, color);
You can adjust i
and n
to change the number of colors returned and step range.
You could also add num
and step
as parameters too but this was quick + dirty.