<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <ul class="nav navbar-nav settings"> <li class="dropdown"> <input type="text" placeholder="type color code here" id="postColor" class="form-control"> <button type="button" id="getColor" class="btn btn-default">Submit</button> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Check your color shades <span class="glyphicon glyphicon-search pull-right"></span> </a> <ul class="dropdown-menu" id="shadeColors"> </ul> </li> </ul>

body { background:#f0f0f0; } .nav { left:50%; margin-left:-150px; top:50px; position:absolute; } .settings { display: flex; flex-direction: column; align-items: center; } .nav>li>a:hover, .nav>li>a:focus, .nav .open>a, .nav .open>a:hover, .nav .open>a:focus { background:#fff; } .dropdown:first-child { width: 300px; display: inherit; margin-bottom: 20px; } .dropdown:first-child input{ height: 40px; } .dropdown:last-child { background:#fff; border:1px solid #ccc; border-radius:4px; width:300px; } .dropdown ul.dropdown-menu { border-radius:4px; box-shadow:none; margin-top:20px; width:300px; } .dropdown ul.dropdown-menu:before { content: ""; border-bottom: 10px solid #fff; border-right: 10px solid transparent; border-left: 10px solid transparent; position: absolute; top: -10px; right: 16px; z-index: 10; } .dropdown ul.dropdown-menu:after { content: ""; border-bottom: 12px solid #ccc; border-right: 12px solid transparent; border-left: 12px solid transparent; position: absolute; top: -12px; right: 14px; z-index: 9; }

function shadeColor(color, percent) { var R = parseInt(color.substring(1, 3), 16); var G = parseInt(color.substring(3, 5), 16); var B = parseInt(color.substring(5, 7), 16); R = parseInt(R * (100 + percent) / 100); G = parseInt(G * (100 + percent) / 100); B = parseInt(B * (100 + percent) / 100); R = (R < 255) ? R : 255; G = (G < 255) ? G : 255; B = (B < 255) ? B : 255; var RR = ((R.toString(16).length == 1) ? "0" + R.toString(16) : R.toString(16)); var GG = ((G.toString(16).length == 1) ? "0" + G.toString(16) : G.toString(16)); var BB = ((B.toString(16).length == 1) ? "0" + B.toString(16) : B.toString(16)); return "#" + RR + GG + BB; } var getval; $("#getColor").click(function () { getval = $('#postColor').val(); for (var i = 0; i < 100; i++) { var shadeColors = shadeColor(getval, i); $('#shadeColors').append( '<li><a href="' + shadeColors + '" style="color:' + shadeColors + ';">' + shadeColors + '<span class="glyphicon glyphicon-cog pull-right"></span></a></li><li class="divider"></li>' ); } });