Use array index to change background color to element - arrays

Question

I have created an ul element and I have put some li items inside. I want to change the background color of each li item using an array in a for loop. This is what I have, but the result is just a string :(
"use strict";
var colorArray,
i,
ulVar,
listItem;
colorArray = [
"color1",
"color2",
"color3",
"color4",
"color5",
"color6"
]
ulVar = document.createElement("ul");
ulVar.setAttribute("id", "#text-color");
ulVar.innerText = "Some unordered list"
document.body.appendChild(ulVar);
for(i = 0; i < colorArray.length; i++){
listItem = document.createElement("li");
listItem.setAttribute("class", colorArray[i]);
console.log(listItem.getAttribute("class")); //just to check what's inside
listItem.innerText = colorArray[i];
ulVar.appendChild(listItem);
}
The css code is just this:
#text-color {
color: #fff;
}
.color-1 {
background-color: #0000ff;
}
.color-2 {
background-color: #ff6600;
}
.color-3 {
background-color: #cc00cc;
}
.color-4 {
background-color: #009933;
}
.color-5 {
background-color: #669999;
}
.color-6 {
background-color: #663300;
}
I don't know how to make the colorArray[i] to return the class properties and not just string. I'm learning now so please don't judge me too hard :)