HoverColor

Simple Color Picker in vanilla JS!

Comment

HoverColor

A simple colorPicker in 20 lines of vanilla JS! I have included line numbers as comments for reference!

Full Code: (including the rest of the page to see it in action)

<!DOCTYPE html>
<html>
<head>
    <title>colors</title>
    <style type="text/css">
html,body {
    overflow:hidden;
    background-color:#000;
    height:100%;
    cursor:crosshair;
    text-align:center;
    font-size:1px;
    margin:0;
    }

    #i {
    width:100%;
    background-color:white;
    color:yellowgreen;
    text-align:center;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:10px;
    }

    .d {
    position:absolute;
    background-color:#000;
    width:10px;
    height:10px;
    border:1px solid #ccc;
    }

    #t {
    position:absolute;
    left:50%;
    width:500px;
    height:100px;
    margin-left:-250px;
    margin-top:-50px;
    top:40%;
    text-align:center;
    font-family:"Courier New", Courier, mono;
    font-size:70px;
    font-weight:900;
    }
    </style>
</head>

<body id="b">
    <div id="i" style="font-weight: bold">
        ColorPicker
    </div>

    <div id="t"></div><script language="javascript" type="text/javascript">

    //20 Lines of Javascript:
    var ex=0,ey=0,c1="#cccccc",c2="#cccccc"; // 1

    for (var i=0;i<24;i++) { // 2
    document.write('<div id="d'+i+'" class="d"><\/div><div id="p'+i+'" class="d"><\/div>'); // 3
    }

    function rotate(ri) {
    ro=ri+1; // 4
    document.getElementById("d"+ro%24).style.left=ex+Math.sin(ro/4)*20+"px"; // 5
    document.getElementById("d"+ro%24).style.top=ey+Math.cos(ro/4)*20+"px"; // 6
    document.getElementById("d"+ro%24).style.backgroundColor=c1; // 7
    document.getElementById("p"+ro%24).style.left=ex+Math.sin(ro/4+180)*20+"px"; // 8
    document.getElementById("p"+ro%24).style.top=ey+Math.cos(ro/4+180)*20+"px"; // 9
    document.getElementById("p"+ro%24).style.backgroundColor=c2; // 10
    setTimeout("rotate(ro)",20); // 11
    }

    document.onmousemove=function(e) {
    if (!e) var e = window.event; // 12
    var aw=(document.all)?document.body.clientWidth:window.innerWidth; // 13
    var ah=(document.all)?document.body.clientHeight:window.innerHeight; // 14
    var x=Math.round(255*(aw-(ex=e.clientX))/aw); // 15
    var y=Math.round(255*(ah-(ey=e.clientY))/ah); // 16
    var hs="0123456789abcdef"; // 17
    document.getElementById("t").style.color=c2="#"+hs.charAt((Math.abs(y-x)>>4)&0xf)+hs.charAt(Math.abs(y-x)&0xf)+hs.charAt((255-x>>4)&0xf)+hs.charAt(255-x&0xf)+hs.charAt((255-y>>4)&0xf)+hs.charAt(255-y&0xf); // 18
    document.getElementById("t").innerHTML=document.getElementById("b").style.backgroundColor=c1="#"+hs.charAt((Math.round(255-Math.abs(x-y))>>4)&0xf)+hs.charAt(Math.round(255-Math.abs(x-y))&0xf)+hs.charAt((x>>4)&0xf)+hs.charAt(x&0xf)+hs.charAt((y>>4)&0xf)+hs.charAt(y&0xf); // 19
    }

    rotate(1); // 20

    </script>
</body>
</html>

Built With

Share this project:

Updates