20/31 100%

.palette {
display: flex;
flex-wrap: wrap-reverse;
flex-direction: column-reverse;
justify-content: center;

align-items: flex-end;
align-content: stretch;

}

.color-1 {
align-self: flex-start;
order: 8;
}

.color-2 {
order: 1;
}

.color-3 {
order: 7;
}

.color-4 {
order: 2;
}

.color-5 {
order: 6;
}

.color-6 {
order: 4;
}

.color-7 {
order: 5;

}

Это для чего?