不用js怎么实现随机颜色？

需求是sub+（1至∞）下的.groupBox, .checked.tab ,.laryngeal 使用一种背景颜色。每个颜色都是我预定义里颜色的一种，可以随机，也可以根据sub后面的数字一一对应，要求不能用js

page {
    --color-default: #1bbd69;
    --color1: #636777;
    --color2: #7cc18b;
    --color3: #305052;
    --color4: #658375;
    --color5: #527c6a;
    --color6: #2c3b3e;
    --color7: #87895f;
    --color8: #535958;
    --color9: #719c61;
    --color10: #445255;
    --color11: #527c6a;
    --color12: #2c3b3e;
}

.sub1 .groupBox,
.sub1 .checked.tab,
.sub1 .laryngeal {
    background: var(--color1);
}

.sub2 .groupBox,
.sub2 .checked.tab,
.sub2 .laryngeal {
    background: var(--color2);
}

.sub3 .groupBox,
.sub3 .checked.tab,
.sub3 .laryngeal {
    background: var(--color3);
}

.sub4 .groupBox,
.sub4 .checked.tab,
.sub4 .laryngeal {
    background: var(--color4);
}

.sub5 .groupBox,
.sub5 .checked.tab,
.sub5 .laryngeal {
    background: var(--color5);
}
.sub6 .groupBox,
.sub6 .checked.tab,
.sub6 .laryngeal {
    background: var(--color6);
}
.sub7 .groupBox,
.sub7 .checked.tab,
.sub7 .laryngeal {
    background: var(--color7);
}
.sub8 .groupBox,
.sub8 .checked.tab,
.sub8 .laryngeal {
    background: var(--color8);
}
.sub9 .groupBox,
.sub9 .checked.tab,
.sub9 .laryngeal {
    background: var(--color9);
}

如果使用less或者scss可以实现，但是这也只会随机一次。想通过时间不停的变换，要通过css3来实现

那应该不行吧