Consider adding a way to copy an entire set of tints or shades

[edelstone]

Has anyone wanted the ability to copy out an entire set of tints, shades, or both with a single click?

Not sure how this would behave or where the functionality would live; just making an issue to see if anyone has any comments. Feel free to chime in or thumbs-up the issue.

[desjoerd]

Hi @edelstone,

Awesome little project!

I really wanted this so I created a 'hacky' script to export it in the chrome dev tools which I want to share:

const rows = [...document.querySelectorAll('#tints-and-shades tr')];
let lightToDark = true;
let txt = "";
let colorNumber = 1;
for(const row of rows) {
    let colors = [...row.querySelectorAll('td[data-clipboard-text]')];
    if(!colors.length) {
        // no colors in this row, skip!
        continue;
    }
    
    for(let i = 0; i < colors.length; i++) {
        if(!lightToDark && i == 0) {
            // skip duplicate 500
            continue;
        }
        
        const color = lightToDark ? colors[colors.length - i - 1] : colors[i];
        let colorHex = color.getAttribute('data-clipboard-text');
        if(colorHex[0] !== '#') {
            colorHex = `#${colorHex}`
        }
        const shade = lightToDark ? 1000 - 50 * i : 500 - 50 * i;

        txt += `--color${colorNumber}-${shade}: ${colorHex};\n`;    
    }
    lightToDark = !lightToDark;
    if(lightToDark) {
        txt += '\n'
        colorNumber++;
    }
}
console.log(txt)

Example output for https://maketintsandshades.com/#06b6d4,f43f5e,22c55e,f97316:

--color1-1000: #000000;
--color1-950: #011215;
--color1-900: #01242a;
--color1-850: #023740;
--color1-800: #024955;
--color1-750: #035b6a;
--color1-700: #046d7f;
--color1-650: #047f94;
--color1-600: #0592aa;
--color1-550: #05a4bf;
--color1-500: #06b6d4;
--color1-450: #1fbdd8;
--color1-400: #38c5dd;
--color1-350: #51cce1;
--color1-300: #6ad3e5;
--color1-250: #83dbea;
--color1-200: #9be2ee;
--color1-150: #b4e9f2;
--color1-100: #cdf0f6;
--color1-50: #e6f8fb;
--color1-0: #ffffff;

--color2-1000: #000000;
--color2-950: #180609;
--color2-900: #310d13;
--color2-850: #49131c;
--color2-800: #621926;
--color2-750: #7a202f;
--color2-700: #922638;
--color2-650: #ab2c42;
--color2-600: #c3324b;
--color2-550: #dc3955;
--color2-500: #f43f5e;
--color2-450: #f5526e;
--color2-400: #f6657e;
--color2-350: #f7798e;
--color2-300: #f88c9e;
--color2-250: #fa9faf;
--color2-200: #fbb2bf;
--color2-150: #fcc5cf;
--color2-100: #fdd9df;
--color2-50: #feecef;
--color2-0: #ffffff;

--color3-1000: #000000;
--color3-950: #031409;
--color3-900: #072713;
--color3-850: #0a3b1c;
--color3-800: #0e4f26;
--color3-750: #11632f;
--color3-700: #147638;
--color3-650: #188a42;
--color3-600: #1b9e4b;
--color3-550: #1fb155;
--color3-500: #22c55e;
--color3-450: #38cb6e;
--color3-400: #4ed17e;
--color3-350: #64d68e;
--color3-300: #7adc9e;
--color3-250: #91e2af;
--color3-200: #a7e8bf;
--color3-150: #bdeecf;
--color3-100: #d3f3df;
--color3-50: #e9f9ef;
--color3-0: #ffffff;

--color4-1000: #000000;
--color4-950: #190b02;
--color4-900: #321704;
--color4-850: #4b2207;
--color4-800: #642e09;
--color4-750: #7d3a0b;
--color4-700: #95450d;
--color4-650: #ae510f;
--color4-600: #c75c12;
--color4-550: #e06814;
--color4-500: #f97316;
--color4-450: #fa812d;
--color4-400: #fa8f45;
--color4-350: #fb9d5c;
--color4-300: #fbab73;
--color4-250: #fcb98b;
--color4-200: #fdc7a2;
--color4-150: #fdd5b9;
--color4-100: #fee3d0;
--color4-50: #fef1e8;
--color4-0: #ffffff;

[edelstone]

Thanks @desjoerd, is this something we can try to implement in the project?