In magento have added two custom options as Size(S,L,XL) and Color(RED,BLUE).
But in frontend i have to show the size as
And color as
There are lots of extension in magento store(magento-conect), search by color swatch you may get some modules what you need,
http://www.magentocommerce.com/magento-connect/gala-color-swatches-free-1.html http://www.magentocommerce.com/magento-connect/color-swatch-1.html http://www.magentocommerce.com/magento-connect/configurable-colors.html
some paid modules:
use what you like
I suggest you create classes using the color names and modify the filter labels to add that class (given the option name) and have a nice CSS behind that to display some nice squares.
As far as sizes are concerned, you could either do the same, or use custom font-icons.
I have developed new module Option swatches that allow to display option swatches on product details page and product list page by replacing drop-down custom options or configurable product's options.
For Magento2: Product Custom Option Swatches For Magento 2