Denote different color schemes in a list setting iOS

Question

In my app, a person can have a variable amount of lists they've created. Each of these lists can have their very own color scheme. In the view where all the lists are shown that the user has created, I figure I'd give the user cues as to what each color scheme of each list is by coloring that particular cell with it's color scheme.

Looks fine if every list has the same colour scheme:

But then this it what it looked like when you have several different lists with several different color schemes (prepare yourselves…):

Needless to say it's a mess. Do you UX gurus have any advice as to how I can show the user "Hey, this list has this color scheme" when viewing this page without coloring the whole cell. I've looked awhile on pttrns but can't find something that looks good.

Answer 1

You could use color somewhere along the edge or corner of the box as a simple status indicator. A nice example is the new GMail mobile app:

A useful additional feature will be checkbox icons of the same color along the top that the user can use to filter lists by color.

Answer 2

In your list of lists, you use way too much color as indicator. You are using the underlying list color scheme when you should use the current list color scheme. That's why this second design not only look awful, but is harder to read too.

A list should use the same color scheme on every element. Title have color one, border have color two, background have color three etc. These colors represent an attribute in the list, and your list color scheme is also an attribute of the list.

To visualize the list color scheme I'd make use of category color which is used in Apple, Microsoft and Google calendars. It doesn't stop you from using two colors instead of one, but it doesn't destroy the design of you list of lists.

Here is one example:

You could replace the star with a letter, and assign a color to it to represent that list foreground color.

Answer 3

Perhaps you could offer some progressive disclosure here by shading a corner of the list box with the appropriate color or use a color gradient towards the end of the box.