bgrins / TinyColor

Fast, small color manipulation and conversion for JavaScript
https://bgrins.github.io/TinyColor/
MIT License
5.05k stars 438 forks source link

Tint and Shade functions #187

Open ram33 opened 6 years ago

ram33 commented 6 years ago

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.

scttcper commented 6 years ago

it isn't published yet

joshuaiz commented 5 years ago

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.