[Projeto] Solução do problema

<div class="botoes">
    <div class="muda-cores">
        <input type="button" value="amarelo" class="cor" id="cor-amarelo">
        <input type="button" class="cor" id="cor-azul" value="Azul">
        <input type="button" class="cor" id="cor-branco" value="branco">
        <input type="button" class="cor" id="cor-preto" value="preto">
        <input type="button" class="cor" id="cor-rosa" value="rosa">
        <input type="button" class="cor" id="cor-vermelho" value="vermelho">
    </div>
    <input type="submit" value="Iniciar produção" class="producao" id="producao">
</div>

.muda-cores {
    position: absolute;
    top: 5px;
    left: 5vw;
    display: flex;
    gap: 1em;
}

.muda-cores .cor {
    font-size: 1.5em;
    border: none;
    width: 100px;
    clip-path: polygon(100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 0);
    background-color: var(--box-cinza);
    color: white;
    text-transform: capitalize;
}

#cor-amarelo:hover {
    color: black;
    background-color: rgb(204, 204, 20);
}

#cor-azul:hover {
    color: white;
    background-color: rgb(84, 71, 201);
}

#cor-branco:hover {
    color: black;
    background-color: rgb(240, 240, 237);
}

#cor-preto:hover {
    color: white;
    background-color: black;
}

#cor-rosa:hover {
    color: white;
    background-color: rgb(204, 20, 133);
}

#cor-vermelho:hover {
    color: white;
    background-color: rgb(204, 48, 20);
}

// Mudança de cor

const robo = document.querySelector(".robo");
const cores = document.querySelectorAll(".cor");

cores.forEach((elemento) => {
    elemento.addEventListener("click", (evento) => {
        console.log(evento.value);
        robo.src = "img/" + elemento.value + ".png";
    })
})