You are displaying a list of colours so a list element as in my example is the correct semantic element to use and also the most succinct.
You do not want to divorce the background from the text by using a separate element anywy as that is non semantic and a waste of html.
You could add the linear gradient technique to the ul in my example but it will not save much html.
If this is just an exercise in finding different ways to do it that’s fine but the list method is the most appropriate.
Don’t create different divs for the background colours as that is wasteful and non semantic. Always try to include the background with the text it refers to on the same single element.