<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 ----------> <a class="c" href="http://github/dotcodes" tabindex="-1">Dotcodes</a> <div class="container"> <div class="middle"> <input id="hex" type="text" spellcheck="false" placeholder="hex" autocomplete="off"> <label id="copy" for="color" class="glyphicon glyphicon-record"></label> <input type="color" id="color" style="display:none;" onchange="$('#hex').val(this.value); hexTOrgb(); " > <br> <input id="rgb" class="copy" type="text" spellcheck="false" placeholder="rgb" autocomplete="off"> <span id="copy" data-clipboard-target=".copy" class="glyphicon glyphicon-copy"></span> </div> </div>

body{ background:rgb(255,212,84); background-size:cover; } .middle{ width:445px; height:395px; width: 340px; height: 125px; position: absolute; top: 50%; left: 50%; margin: -62.5px -170px; } input{ color:#000 !important; display: block; width: 335px; font-size: 34px; line-height: 44px; background: transparent; border: none; border-bottom: 1px dotted rgba(0, 0, 0, 0.4); padding: 5px 0; border-radius: 0; outline:0; } ::-webkit-input-placeholder { color: #222; } #copy{ font-size:125%; cursor:pointer; float:right; margin-top:-31px; margin-right:12px; } .c { position: absolute; top: 20px; left: 20px; font-size: 18px; font-weight: 700; line-height: 1.2; text-transform: uppercase; letter-spacing: 1px; } a{ color:rgb(0, 0, 0); text-decoration:none; }

$(document).ready(function(){ $("#hex").keyup(function(){ hexTOrgb(); }); }); function hexTOrgb(){ $("body").css("background",$("#hex").val()); var bodyBG = $("body").css("background-color"); $("#rgb").val(bodyBG); }