Изменить цвет фона с помощью javascript, если мы нажмем на поле

// obtain elements
const htmlCollection = document.getElementsByClassName("token-label");
const array = [...htmlCollection];

// add listener to show the palette
array.forEach(span => span.addEventListener("click", modifyColor, false));

function modifyColor(mouseEvent) {
    const target = mouseEvent.currentTarget;
    const x = mouseEvent.clientX;
    const y = mouseEvent.clientY;

    function colorChosen(color) {
        target.style.backgroundColor = color;
    }

    showPalette({ x, y }, colorChosen);
}

function createDiv(style) {
    const div = document.createElement("div");
    Object.entries(style)
        .forEach(([property, value]) => div.style[property] = value);
    return div;
}

function showPalette({ x, y }, callback) {
    // palette itself
    const paletteElement =
        createDiv({
            position: "absolute",
            left: `${x}px`,
            top: `${y}px`
        });
    document.body.append(paletteElement);

    // here you can redefine html colors
    const colors = ["LightSalmon", "LightGreen", "LightBlue"];

    // each color creation and adding click listeners
    colors.forEach(colorValue => {
        const colorElement = createDiv({
            width: "40px",
            height: "20px",
            backgroundColor: colorValue
        });
        colorElement.addEventListener("click", () => {
            cleanup();
            callback(colorValue);
        }, false);
        paletteElement.append(colorElement);
    });

    // don't forget to remove palette from document
    function cleanup() {
        document.body.removeChild(paletteElement);
    }
}

<span class = "token-label" style = "max-width: 1072px;">Hello world</span>
<span class = "token-label" style = "max-width: 1072px;">Bye world</span>