Maybe the following will help. Note that I changed the CSS to use # instead of ., so that it is keyed to the ID instead of the class of the elements.

#!/usr/bin/perl
use strict;
use warnings;
use CGI qw/:standard/;

my %colorchart;
while( my ($color_code, $element_id) = split(/\s+/, <DATA>)) {
    $colorchart{$element_id} = $color_code;
}

my $style;
foreach my $key (sort keys %colorchart) {
    $style .= "#b$key {background-color: $colorchart{$key}}\n";
}

print header, start_html(-title=>'Colors', -style => {-code => $style}
+);

foreach my $key (sort keys %colorchart) {
    print qq^<div id="b$key" class="btn px"><a href="#"></a>$key - $co
+lorchart{$key}</div>\n^;
}

print end_html;

__DATA__
#0000FF  1 Blue  
#8A2BE2  2 BlueViolet  
#A52A2A  3 Brown  
#DEB887  4 BurlyWood  
#5F9EA0  5 CadetBlue  
#7FFF00  6 Chartreuse
[download]

Update: Seeing your web page maybe helps me understand what you mean by However if one of the colors are the same...Dont use it, but redefined that element to use the other color. So, maybe the following is more what you are looking for:

#!/usr/bin/perl
use strict;
use warnings;
use CGI qw/:standard/;

my %seen;
my $style;
my $grid;
while( my ($color_code, $element_id) = split(/\s+/, <DATA>)) {
    unless($seen{$color_code}) {
        $style .= ".c$color_code { background-color: #$color_code; }\n
+";
        $seen{$color_code} = $color_code;
    }
    $grid .= qq^<div id="$element_id" class="btn px c$color_code"><a h
+ref="#"></a>$element_id - $color_code</div>\n^;
}

print header, start_html(-title=>'Colors', -style => {-code => $style}
+), $grid, end_html;


__DATA__
0000FF  1 Blue  
8A2BE2  2 BlueViolet  
A52A2A  3 Brown  
DEB887  4 BurlyWood  
5F9EA0  5 CadetBlue  
7FFF00  6 Chartreuse  
0000FF  7 Blue  
8A2BE2  8 BlueViolet
[download]