dialog - Best way to choose color combination from palette?

I have the following scenario:

This is a color picker for a software we're developing. Basically we have different Groups for Items and Items are displayed as boxes in a grid with a given color scheme that can be customized through the following interface.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Before today we didn't have many groups or categories to put the items on, but the problem is that the number of groups for a specific instance of this interface has grown, and we just cannot keep adding radio boxes or tabs to filter the items.

I thought about having a collapsible list with the table inside, or even an accordion to hide inactive categories, but the problem with the accordion is that with a lot of groups it's just useless.

I also suggested, having a default color scheme, and then only aggregating changes, but the problem with this approach is that you might have adjacent item boxes together that might look similar if you're not able to compare them from the list.

Someone else suggested having the groups in a dropbox... but you're the experts... so I rather hear it from you guys! :)

What would be the best way to present this color picker.

Answer

I ended up with this after all your comments.

To help reduce some of the User Experience strains that we currently have, I added some more features the Colour Picker as described below:

1. Instead of having two different columns for text and background colour, we have only one that displays coloured dummy text with its background colour to ensure that the user is happy with the selection.


2. The user is not prompted anymore to a secondary screen to change the colours (As suggested by @mervinj answer). Instead, after picking a row, the user will be able to select a colour from the colour palette below. This colour palette is only enabled when a valid row has been clicked before.


3. A (restore) icon next to the row indicates whether that colour has been changed from the default colour palette. By clicking it, it will restore the original value.


4. Hovering the (restore) icon will temporarily display the original colour scheme.


5. Clicking the (restore) icon will make it disappear.


6. The Text colour palette is dependant from the Background colour palette. This is due to the fact that some text colours are difficult to read when combined with different background colours as shown in the right side of the image of this answer.


7. Hovering over the colour palette while a row is selected with live-preview that colour. A tab that lists only those colours that have been changed is also added to the interface.


8. The interface is exactly the same but will only list categories/groups if they have items that have changed.


9. The ability to restore the whole colour palette to the default is added at the bottom right side of the screen.



10. Categories/Groups appear as collapsible panels that display an Item Label, a Dummy Coloured Cell and a Single Restore Button.


11. Clicking on the Category/Group wont select it, but rather expand it or collapse it.


12. The categories/groups appear collapsed at the beginning so that it's easy for the user to expand the one needed. It's state is saved through the user session in case the same user wants to keep changing colours from that group/category later on.

Benefits

---

• Making the Text Colour Palette dependable of the Background Colour Palette and vice versa increases the chances for the user to succeed picking a good colour combination (ensuring good quality contrast happens).


• Having the All/Customized Tabs at the top enable the user to find modified colours easily.


• The interface provides the means to inform which colours have been changed, what's the default value and the ability to restore them.



• Making the List Collapsible allows the user to easily find what is been sought for and to display any number of Categories/Groups.