Prints all colors from a coloors.co scheme in the console to copy the values more easily

coloors-co-shades-in-console.js

let allColorData = [];

document.querySelectorAll('#colors .color').forEach(colorNode => {
    const colorData = {
        name: colorNode.querySelector('.color-info-name').textContent,
        hex: colorNode.querySelector('.hex input').value,
        shades: []
    }
    allColorData.push(colorData);
})

document.querySelectorAll('.palette-shades-row').forEach(row => {
    const colorNodes = row.querySelectorAll('.palette-shades-col');
    colorNodes.forEach((colorNode, colorColIndex) => {
        const colorHex = colorNode.getAttribute('data-color').trim();
        allColorData[colorColIndex].shades.push(colorHex);
        //console.log(`%c ${colorHex}`, `background: #fff; color: #${colorHex}`);
    })
})

allColorData.forEach(colorData => {
    console.log(`%c ${colorData.name} ${colorData.hex}`, `background: #000; color: #fff`);
    colorData.shades.forEach(color => {
        console.log(`%c ${color}`, `border-left: 10px solid #${color}; background: #fff; color: #${color}`);
    });
});