Color Palette Viewer

View a given color palette

by g30rg3

HTML

<div class="column">
<div id="band0" class="band">0</div>
<div id="band1" class="band">1</div>
<div id="band2" class="band">2</div>
<div id="band3" class="band">3</div>
<div id="band4" class="band">4</div>
<div id="band5" class="band">5</div>
<div id="band6" class="band">6</div>
<div id="band7" class="band">7</div>
<div id="band8" class="band">8</div>
<div id="band9" class="band">9</div>
</div>
<div class="column">
<div id="band10" class="band">10</div>
<div id="band11" class="band">11</div>
<div id="band12" class="band">12</div>
<div id="band13" class="band">13</div>
<div id="band14" class="band">14</div>
<div id="band15" class="band">15</div>
<div id="band17" class="band">16</div>
<div id="band18" class="band">17</div>
<div id="band19" class="band">18</div>
<div id="band20" class="band">19</div>
<div id="band21" class="band">20</div>
<div id="band22" class="band">21</div>
</div>

CSS

.column{
     width:49%;
    display:inline-block;
vertical-align:top;    
}
.band{

    height:50px;
    width:75%;
    margin-top:5px;
    margin-bottom:5px;
    display:inline-block;
}

#band0{
    background-color:rgba(127, 0, 0, 0.5);
    border-style:solid;
    border-width:medium;
    border-color:rgba(127, 0, 0,  1);    
}
#band1{
    background-color:rgba(179, 0, 0, 0.5);
    border-style:solid;
    border-width:medium;
    border-color:rgba(179, 0, 0, 1);    
}
#band2{
    background-color:rgba(215, 48, 31, 0.5);
    border-style:solid;
    border-width:medium;
    border-color:rgba(215, 48, 31, 1);    
}

#band3{
    background-color:rgba(239, 101, 72, 0.5);
    border-style:solid;
    border-width:medium;
    border-color:rgba(239, 101, 72, 1);    
}
#band4{
    background-color:rgba(252,141,89, 0.5);
   
    border-style:solid;
    border-width:medium;
    border-color:rgba(252,141,89, 1);    
}
#band5{
    background-color:rgba(253,187,132, 0.5);
    border-style:solid;
    border-width:medium;
    border-color:rgba(253,187,132, 1);    
}
#band6{
    background-color:rgba(253,212,158, 0.5);
    border-style:solid;
    border-width:medium;
    border-color:rgba(253,212,158, 1);    
}
#band7{
    background-color:rgba(254, 232, 200, 0.5);
    border-style:solid;
    border-width:medium;
    border-color:rgba(254, 232, 200, 1);    
}
#band8{
    background-color:rgba(255, 247, 236, 0.5);
    border-style:solid;
    border-width:medium;
    border-color:rgba(255, 247, 236, 1);    
}
#band9{
    background-color:rgba(135,206,235, 0.5);
    border-style:solid;
    border-width:medium;
    border-color:rgba(135,206,235, 1);    
}
#band10{
    background-color:rgba(139,0,0,0.5);
    border-style:solid;
    border-width:medium;
    border-color:rgba(139,0,0,1);    
}
#band11{
    background-color:rgba(255,0,0,0.5);
    border-style:solid;
    border-width:medium;
    border-color:rgba(255,0,0,1);    
}
#band12{
    background-color:rgba(255,69,0,0.5);
   ...