A CodePen by Michael Dobekidis. CSS Color Names - All the available color names of CSS. view on github here: https://github.com/netgfx/ColorMyName

index.html

		<div>
			
			<div class="container">

                <div class="alert alert-info">
                  
                  <strong>All CCS Color Names!</strong> Pick a color OR type something...
                </div>
                
               
                
                
                
			</div>
            
            <a href="https://github.com/netgfx/ColorMyName" style="position: absolute; top: 0; right: 0; ">
                <img style="border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png" alt="Fork me on GitHub">
                    
            </a>
            
			<footer>
				<p>
					&copy; Copyright  by NetGfx
				</p>
			</footer>
		</div>
		

script.js

$(document).ready(function(){
  
  var colorNames = new ColorNames({
                "numOfShades":10
            });
  
  console.log(colorNames);
  
            var _colorNames = colorNames.returnItems('all_names');
            var colorValues = colorNames.returnItems('all_indexed_obj');
            
/////////////////////////////////////////////////////////////////////////////////////////
            /////////// EXAMPLE CODE //////////////////////////
            
            for(var i = 0; i < colorValues.length; i++){
                
                $("#namesDD").append("<li><a tabindex='-1' href='#' class='colorNameItem' rel='"+colorValues[i].colorName+"'>"+colorValues[i].colorName+"</a></li>");
                
            }
            
            
            
            for(var i=0; i < colorValues.length; i++){
                $(".container").append('<span class="label pull-left" rel="'+colorValues[i].color+'" style="color:#000;background-color:'+colorValues[i].color+';margin-left:5px;margin-top:5px;">' + colorValues[i].colorName + '</span>');
            }
            
            $(".container").append('<div class="well well-small"></div>');
            
            
            $(".label").on('click',function(){
                
                var color = $(this).attr('rel');
                
                $('body').css({'background-color':color});
                
                $(".well").empty().append('<label>'+color+'</label>');
                
            });
            
            function getColorName(item){
                
                var color = colorNames.getColorFromName(item);
                $('body').css({'background-color':color});
                
                $(".well").empty().append('<label>'+color+'</label>');
                
                return item;
            }
  
});

style.css

body {

}

.span2{
	min-height:500px;
	background-color:#efefef;
}

.span10{
	background-color:#bbd8e9;
}

footer{
    position:fixed;
    bottom:0;
}

.container{
    min-height:400px;
}

.btn-group{
    text-align:left;
    position:absolute;
    left:50%;
    margin-left: 0px;
    top:200px;
}

#autoType{
    margin:0 auto;
    position:relative;
    height:30px;
    float:left;
    margin-right:100%;
    margin-bottom:20px;
}

.label{
    cursor:pointer;
}

.well{
    margin-top:20px;
    float:left;
    margin-right:100%;
    width:100%;
}