<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="input-group"> <span class="input-group-btn"> <button type="button" class="btn btn-success btn-add">+</button> </span> <input type="text" name="color" class="form-control"> <div class="input-group-btn group-color"> <button type="button" class="btn btn-default btn-box dropdown-toggle" data-toggle="dropdown"> <span class="fa fa-square" id="preview"></span> </button> <ul class="dropdown-menu"> <li> <div class="panel panel-default"> <div class="panel-heading"> <span class="panel-label">Color Swatch</span> </div> <div class="panel-body"> <ul class="list-inline"> <li><div id="Red" class="swatch swatch-clickable" style="background-color:#FF0000"></div></li> <li><div id="Lime" class="swatch swatch-clickable" style="background-color:#00FF00"></div></li> <li><div id="Yellow" class="swatch swatch-clickable" style="background-color:#FFFF00"></div></li> <li><div id="Lemon" class="swatch swatch-clickable" style="background-color:#0000FF"></div></li> <li><div id="Lime" class="swatch swatch-clickable" style="background-color:#FF00FF"></div></li> <li><div id="Evergreen" class="swatch swatch-clickable" style="background-color:#00FFFF"></div></li> </ul> <ul class="list-inline"> <li><div id="Alizarin" class="swatch swatch-clickable" style="background-color:#EF2326"></div></li> <li><div id="Green Apple" class="swatch swatch-clickable" style="background-color:#6DBE45"></div></li> <li><div id="Hot Pink" class="swatch swatch-clickable" style="background-color:#F2EA3F"></div></li> <li><div id="Sagebrush" class="swatch swatch-clickable" style="background-color:#344EA2"></div></li> <li><div id="Tan" class="swatch swatch-clickable" style="background-color:#B6519F"></div></li> <li><div id="White" class="swatch swatch-clickable" style="background-color:#73CDD8"></div></li> </ul> </div> </div> </li> </ul> </div> </div> </div> </div> </div>

<style type="text/css"> .container {margin-top: 25px;} .row {margin-top: 25px;} .swatch { width:46px; height:46px; border-radius:5px; border: 1px solid #666; margin: 0px; } div.group-color > ul.dropdown-menu { box-shadow: 0; padding: 0; left: -280px; width: 320px; } .panel { margin-bottom: 0; padding: 0; } ul.list-inline li { padding:0; margin: 0; } .swatch-clickable:hover { border: 2px solid #111; cursor: pointer; } .btn-box { margin:0; padding-top: 3px; padding-bottom: 3px; } .fa { margin: 0; padding: 0; font-size: 18pt; text-shadow: 1px 1px 0px black, 1px -1px 0px black, -1px 1px 0px black, -1px -1px 0px black; } </style>

$('.swatch-clickable').each(function () { $(this).attr('title', $(this).attr('id')); }); $('.swatch-clickable').tooltip(); $(".swatch-clickable").click(function() { $("#preview").css('color', $(this).css('background-color')); $("#color-field").val($(this).attr("id")) });