No HTML criei uma ul com as lista de cores:

<section>
            <div class="box box-cores">
                <ul class="cores">
                    <li class="cor amarelo"></li>
                    <li class="cor azul"></li>
                    <li class="cor branco"></li>
                    <li class="cor preto"></li>
                    <li class="cor rosa"></li>
                    <li class="cor vermelho"></li>
                </ul>
            </div>
        </section>

CSS: peguei o estilo do display que reutilizei para ficar tudo padrão

.box-cores {
    flex-basis: 23%;
    padding: 10px 30px 0px 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cor {
    margin: 1.25em;
    font-size: 1.5em;
    padding: 10px 35px 5px 10px;
    border: 3px solid var(--main-branco);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%);
    /*-clip-path: polygon(100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%, 0 0);*/
    cursor: pointer;
}

.amarelo {
    background-color: var(--robo-amarelo);
}

.azul {
    background-color: var(--robo-azul);
}

.branco {
    background-color: var(--robo-branco);
}

.preto {
    background-color: var(--robo-preto);
}

.rosa {
    background-color: var(--robo-rosa);
}

.vermelho {
    background-color: var(--robo-vermelho);
}

JS: crie as const e loop onde pega a lista de cores da li dentro ul no HTML

const listaCores = document.querySelectorAll('.cores li');
const robotron = document.querySelector(".robo");

for(let i = 0; i < listaCores.length; i++) {
    const cor = listaCores[i];
    const cores = cor.classList.value.split(' ')[1];

    cor.onclick = function() {
        robotron.setAttribute(`src`, `./img/${cores}/robotron.png`);
    }
}