TinyColor icon indicating copy to clipboard operation
TinyColor copied to clipboard

Tint and Shade functions

Open ram33 opened this issue 6 years ago • 2 comments

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.

ram33 avatar Aug 14 '18 12:08 ram33

it isn't published yet

scttcper avatar Aug 14 '18 17:08 scttcper

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.

joshuaiz avatar Mar 12 '19 03:03 joshuaiz