Display Color Swatch

My client sells t-shirts and sweatshirts. They have various styles that have various colors. I know how to display the right pictures when a certain color is selected, but they want to show a color swatch that let's the customer's know what colors that item comes in. Thus, if an item comes in Black, White and Blue they want to display a small black rectangle, a small white rectangle and a small black rectangle on all versions of the product. Is there a way to do that?

I figured as much. Can you give me some advice on how to approach this? One thing I was thinking was to name the graphics the same name as the variant itself, but in looking at it, I don't think that will work. Any thoughts on what would be a good approach for doing this?

However, won't that also show the large pictures that are shown when we select "white" as a color? Or is there another place to add these pics?

Have a look at cma.mtsidevspace.com/index.php

Select Men's Apparel

Select Graphic Tees

Select CM Bars

Now you see it is black. Now select Heather Gray and X-Large and see it change to gray.

Won't that feature change if I change the code as you suggest?

FYI: The following CSS will add a small color swatch to the dropdown select box.

select#hikashop_product_characteristic_9 option {
    background-repeat:no-repeat;
    background-position:bottom left;
    padding-left:30px;
}
select#hikashop_product_characteristic_9 option[value="7"] {
    background-image:url(/images/colors/SwatchWhite.jpg);
}
select#hikashop_product_characteristic_9 option[value="8"] {
    background-image:url(/images/colors/SwatchKhaki.jpg);
}

Here is another approach which works with Firefox, IE, Chrome, and Safari. Rather than using a swatch image, it just sets the background of the select option.

select#hikashop_product_characteristic_9 option[value="7"] {
    background-color: #FFFFFF; color: #000000;
}
select#hikashop_product_characteristic_9 option[value="8"] {
    background-color: #D4D487; color: #FFFFFF;
}