HTML Color Study

Color Selector HTML Color Study


This useful tool can help you select the exact right color for your website or project.



*Featured Code Created by Morpheus






HTML with CSS and JavaScript


<!--Thank you Sololearn for making this code as  COTD🙋-->
<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1.0">
      
      <meta name="author" content="Morpheus">
      <meta name="keywords" content="morpheus">
      <meta name="description" content="project">
      <title>Morpheus | ColorSchool</title>
      <style>
          html, body {
    /*margin: 0 auto;*/
    /*padding: 0;
    height: 100%;
    max-height: 700px;
    max-width: 700px;
    /*position:fixed;*/*/
}

body {
    /*margin: 0 auto;*/
    width: 100%;
    height:100%;
    background-color: #f1fefe;
    margin: 0;
    padding: 0;
    font-size: 17px;
}

.container {
    display: block;
    max-width: 600px;
    margin: 0 auto;
    padding-left: 3px;
    padding-right:3px;
    position: fixed;
    height: 100%;
    border: 1px solid #000;
}

h2 {
    font-size: 25px;
    text-align: center;
    margin:8px 0 14px 0;
    text-shadow: 2px 2px 20px #fff,1px 1px 5px #fff;
}




#heading{
    height: 35px;
    font-weight: bold;
    letter-spacing: -1px;
    text-shadow: 2px 2px 20px #fff,1px 1px 5px #fff;
    padding:10px 0 5px 0;
    border: 5px outset #999;
    border-radius: 100px 0 100px 0;
    background: linear-gradient(90deg,hsla(80, 30%, 50%, 0.5),hsla(280, 30%, 100%, 1));
}

.ip {
    display: block;
    margin: 10px auto;
    background-color: linen;
    width: 100%;
    height: 25px;
}

#ip1, #ip2, #ip3 {
    display: inline-block;
    width: 70px;
    height: 25px;
    padding: 2px 5px 2px 5px;
    font-weight: bold;
    letter-spacing: -1px;
    margin: 0;
}

.sliderContainer {
    box-sizing: border-box;
    width: 150px;
    height: 25px;
    margin: 0 10px 0 3px;
    display: inline-block;
    float: right;
}

#slider1, #slider2, #slider3 {
    height: 15px;
    -webkit-appearance: none;
    width: 100%;
    outline: none;
    opacity: 0.9;
    -webkit-transition: .2s;
    transition: opacity .2s;
    border: 2px outset #aaa;
    border-radius: 5px;
    margin: 3px 0 3px 0;
}

#slider1:hover, #slider2:hover, #slider3:hover {
    opacity: 1;
}

#slider1 {
    background: linear-gradient(90deg, #000, #f00);
}

#slider2 {
    background: linear-gradient(90deg, #000, #0f0);
}

#slider3 {
    background: linear-gradient(90deg, #000, #00f);
}

#ipr, #ipg, #ipb {
    display: inline-block;
    width: 50px;
    height: 15px;
    padding: 0;
    float: right;
    margin: 3px 3px 3px 3px;
    outline: none;
    border: 2px outset #aaa;
    border-radius: 5px;
}

#ipr {
    background-color: #f00;
    color: #fff;
}

#ipg {
    background-color: #0f0;
    color: #000;
}

#ipb {
    background-color: #00f;
    color: #fff;
}

.btn {
    display: inline-block;
    margin: 10px 0 10px 0;
    border: 4px outset gray;
    animation: bttn 1.3s infinite alternate;
    outline: none;
    border-radius: 10px;
    padding: 3px 6px;
    cursor: pointer;
}

.btn:active {
    outline: none;
}

#submit:hover, #rand:hover, #switch:hover {
    animation: btnshake 0.05s 3 alternate;
    outline: none;
}

#submit {
    float: right;
    width:76px;
    margin-right: 3px;
    animation-direction: alternate-reverse;
}

#rand {
    width:76px;
    float: right;
    margin-right: 5px;
}
#switch{
    margin-left:2px;
    width:130px;
}

.hex{
      text-shadow: 1px 1px 0px #fff;
      text-align: center;
      font-size: 15px;
}

#hex {
    display:inline-block;
    background-color: #fafafe;
    border: 1px solid #000;
    padding:1px 2px;
    /*font-size: 20px;*/
    font-weight: bold;
}

@keyframes bttn {
    from {
        border-color: #efefef;
    }
    to {
        border-color: #989898;
    }
}

.post {
    width: 0%;
    height: 20px;
    color: white;
    background-color: #000;
    /*padding: 20px 5px;*/
    overflow: hidden;
    animation: none;
}




@keyframes posts {
    from {
        width: 0%;
    }
    to {
        width: 100%;
    }
}

#lowerBlock {
    margin: auto 30px;
    /*text-shadow: 1px 1px 0px #fff;*/
    color:#fff;
}
#notesRGB{
  display:block;
  opacity: 1;
  overflow: hidden;
  transition: opacity 1s linear 0;
}
#notesHSL{
  display:none;
  opacity: 0;
  overflow: hidden;
  transition: opacity 1s linear 0;
}
#dig {
    border-radius: 10px;
    background-color: #000;
    padding: 0 6px;
    border: 1px solid black;
    color: #fff;
    animation: letter 2s infinite linear alternate;
}

#dig:hover{
    cursor:pointer;
    background-color:#fff;
    color:#000;
}

#img {
    display: block;
    transform: scale(0);
    transform-origin: 50% 50%;
    top: 40px;
    left: 30px;
    width: 300px;
    height: 370px;
    z-index: 1;
    position: absolute;
    margin: 0 auto;
    background-color: #efefef;
    transition: transform 0.6s;
    box-shadow: 3px 3px 5px black, 3px 5px 10px black;
}

#img>img {
    position: absolute;
    width: 294px;
    /*height:330px;*/
    height: auto;
    padding: 3px;
    display: block;
    margin: 0;
    object-fit:scale-down;
}

#close, #next {
    display: inline-block;
    width: 300px;
    padding-top: 10px;
    text-align: center;
    height: 30px;
    color: #3a2a1a;
    background-color: #efafaf;
    border: 1px solid black;
    margin: 0;
    cursor: pointer;
}

.sidenav {
    height: 100%;
    width: 0%;
    position: absolute;
    z-index: 1;
    top: 0px;
    right: 0px;
    background: linear-gradient(270deg, deepskyblue, black);
    overflow-x: hidden;
    transition: 0.5s;
    margin: 0;
    opacity: 0.9;
}

#colorNames {
    background: linear-gradient(90deg, deepskyblue, black);
    left: 0px;
    right: auto;
    overflow-x: hidden;
    overflow-y: scroll;
    opacity: 1;
}

#colorNames ul {
    margin: 60px 0 0 0;
    padding: 0 5px;
}

.sidenav li {
    color: yellow;
    border-bottom: 1px solid yellow;
}

#colorNames li {
    background-color: #afd8dc;
    list-style-type: none;
    border: none;
    height: 28px;
    color: #152f36;
    margin: 4px 0;
    padding: 2px 0 2px 5px;
    font-size: 18px;
}

.sidenav a {
    padding: 10px 0 10px 10px;
    margin: 0;
    text-decoration: none;
    font-size: 18px;
    color: #efefef;
    display: block;
}

#colorNames #cbox {
    border: 1px solid #000;
    border-radius: 10px 0 10px 0;
    display: inline-block;
    float: right;
    background-color: #afd8dc;
    padding: 3px 5px 3px 5px;
    margin: 1px 0;
    color: #152f36;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 5px;
    font-size: 36px;
    color: #2a2a2a;
}

#colorNames .closebtn {
    color: yellow;
}

#refs, #cnames {
    font-size: 30px;
    position: absolute;
    bottom: 10px;
    right: 10px;
    cursor: pointer;
    text-shadow: 2px 2px 20px #fff,1px 1px 5px #fff;
}




#cnames {
    right: auto;
    left: 10px;
}

@keyframes letter {
    0% {
        text-shadow: -2px  0 0 white;
    }
    25% {
        text-shadow: -1px 0 0 white;
    }
    50% {
        text-shadow: 0px 0 0 white;
    }
    75% {
        text-shadow: 1px  0 0 white;
    }
    100% {
        text-shadow: 2px  0 0 white;
    }
}

@keyframes btnshake {
    from {
        transform: rotate(3deg);
    }
    to {
        transform: rotate(-3deg);
    }
}

#ipr:focus, #ipg:focus, #ipb:focus {
    font-size: 1.09em;
    transition: font-size 0.2s;
}
@media (min-width:600px) {
    .container{
      position:relative;
    }
}

      </style>
    </head>

<body>
    <div class="container">
        <h2 id="heading">HTML COLOR STUDY</h2>
        <div class="ip">
            <span id="ip1">RED</span>
            <span class="sliderContainer">
              <input type="range" min="0" max="255" value="10" class="colorSlider" id="slider1">
            </span>
            <input id="ipr" type="number" max="255" min="0" value="10" />
        </div>
        <div class="ip">
            <span id="ip2">GREEN</span>
            <span class="sliderContainer">
              <input type="range" min="0" max="255" value="200" class="colorSlider" id="slider2">
            </span>
            <input id="ipg" type="number" max="255" min="0" value="200" />
        </div>
        <div class="ip">
            <span id="ip3">BLUE</span>
            <span class="sliderContainer">
              <input type="range" min="0" max="255" value="255" class="colorSlider" id="slider3">
            </span>
            <input id="ipb" type="number" max="255" min="0" value="255" />
        </div>
        <input id="switch" class="btn" type="button" value="HSL/HSV mode" />
        <input id="submit" class="btn" type="button" value="submit" />
        <input id="rand" class="btn" type="button" value="random" />

        <div class="hex">
            <hr/> Same color in hexadecimal format is <span id="hex"># 0a c8 ff</span>
            <hr/>
        </div>

        <div id="lowerBlock">
            <h2>Mixing colors <span id="dig">Diagrams</span></h2>
            <div id="notesRGB">
                <ul>
                    <li>when all 3 same then different shades of grey</li>
                    <li>RED + GREEN = YELLOW</li>
                    <li>RED + BLUE = MAGENTA</li>
                    <li>BLUE + GREEN = CYAN</li>
                </ul>
            </div>
            <div id="notesHSL">
                <ul>
                    <li>Change HUE to change color</li>
                    <li>Keep LIGHTNESS at 50% and tweak SATURATION for shades</li>
                    <li>LIGHTNESS = 0% is BLACK</li>
                    <li>LIGHTNESS = 100% is WHITE</li>
                </ul>
            </div>
        </div>
        <div class="post">
            Any suggestions for better learning experience ?
        </div>
        <div id="img">
            <div id="next">NEXT</div>
            <div id="close">CLOSE</div>
            <img src="https://www.color-theory-phenomena.nl/06-color-mixing/06-00-01-color-mixing-RGB.gif" alt="colors">
        </div>
        <div id="mySidenav" class="sidenav">
            <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
            <ol>
                <li><a href="https://color.adobe.com/create/color-wheel/" target="_blank">Adobe Color Palate</a></li>
                <li><a href="https://www.w3schools.com/colors/colors_picker.asp" target="_blank">W3 school Color Picker</a></li>
                <li><a href="http://www.flatuicolorpicker.com/" target="_blank">Cool UI color Collections</a></li>
                <li><a href="http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF" target="_blank">Palette On</a></li>
                <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool" target="_blank">Mozilla Color Palette</a></li>
            </ol>
        </div>
        <span id="refs" onclick="openNav()">&#9776;</span>
        <div id="colorNames" class="sidenav">
            <a href="javascript:void(0)" class="closebtn" onclick="closeCNav()">&times;</a>
            <ul>
            </ul>
        </div>
        <span id="cnames" onclick="openCNav()">&#9776;</span>

    </div>
    <script>
        function openNav() {
            document.getElementById("mySidenav").style.width = "80%";
        }

        function closeNav() {
            document.getElementById("mySidenav").style.width = "0%";
        }

        function openCNav() {
            document.getElementById("colorNames").style.width = "80%";
        }

        function closeCNav() {
            document.getElementById("colorNames").style.width = "0%";
        }
    </script>
    <script>
       //code by Morpheus



window.onload = function() {
    var imgArr = [
        "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSfdu_u8htAKXE3QejTdvF3rUTmjISvTYW1R9FzlvsG9D3aJrB4",
        "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcST9W13WPjNLAE97rYGMN2FjqLalSRaxQUvtsnd_OyakzFxgjqC",
        "http://www.color-theory-phenomena.nl/06-color-mixing/06-00-01-color-mixing-RGB.gif",
        "http://www.workwithcolor.com/cona-hue-ranges-map-02.png",
        "https://upload.wikimedia.org/wikipedia/commons/8/8c/Color_star-en_%28tertiary_names%29.svg",
        "http://industrystandarddesign.com/wp-content/uploads/2015/08/how-to-get-brown-color.jpg",
        "https://upload.wikimedia.org/math/8/5/0/850db6c317cef61ef3544c2b4e9d2cae.png",
        "http://www.cis.upenn.edu/~cis110/12fa/hw/hw01/rgb2cmyk.png",
        "https://i.stack.imgur.com/FTH7K.png",
        "https://upload.wikimedia.org/wikipedia/commons/thumb/5/5d/HSV-RGB-comparison.svg/300px-HSV-RGB-comparison.svg.png",
        "https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/Hsl-and-hsv.svg/300px-Hsl-and-hsv.svg.png"
    ];
    //HSL to RGB function by Luke McClean (Stackoverflow)
    function hslToRgb(h, s, l) {
        var r, g, b;

        if (s == 0) {
            r = g = b = l; // achromatic
        } else {
            var hue2rgb = function hue2rgb(p, q, t) {
                if (t < 0) t += 1;
                if (t > 1) t -= 1;
                if (t < 1 / 6) return p + (q - p) * 6 * t;
                if (t < 1 / 2) return q;
                if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
                return p;
            }

            var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
            var p = 2 * l - q;
            r = hue2rgb(p, q, h + 1 / 3);
            g = hue2rgb(p, q, h);
            b = hue2rgb(p, q, h - 1 / 3);
        }

        return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
    }
    var next = document.getElementById("next");
    var images = document.querySelector("#img img");
    var imgPtr = 0;
    next.onclick = function() {
        if (imgPtr < imgArr.length) {
            images.src = imgArr[imgPtr++];
        } else {
            imgPtr = 0;
            images.src = imgArr[imgPtr++];
        }
    };
    var b = document.body;
    var mode = "RGB";
    const repeatCount = 2;
    var animationCount = 0;
    var ipr = document.getElementById("ipr");
    var ipg = document.getElementById("ipg");
    var ipb = document.getElementById("ipb");
    var submit = document.getElementById("submit");

    var slider1 = document.getElementById("slider1");
    var slider2 = document.getElementById("slider2");
    var slider3 = document.getElementById("slider3");
    // console.log(typeof slider1.min);
    slider1.oninput = function() {
        if (mode === "RGB") {
            slider1.min = "0";
            slider1.max = "255";
            ipr.value = slider1.value;
            submit.click();
        } else if (mode === "HSL") {
            slider1.min = "0";
            slider1.max = "360";
            ipr.value = slider1.value;
            submit.click();
        }
    };
    slider2.oninput = function() {
        if (mode === "RGB") {
            slider2.min = "0";
            slider2.max = "255";
            ipg.value = slider2.value;
            submit.click();
        } else if (mode === "HSL") {
            slider2.min = "0";
            slider2.max = "100";
            ipg.value = slider2.value;
            submit.click();
        }
    };
    slider3.oninput = function() {
        if (mode === "RGB") {
            slider3.min = "0";
            slider3.max = "255";
            ipb.value = slider3.value;
            submit.click();
        } else if (mode === "HSL") {
            slider3.min = "0";
            slider3.max = "100";
            ipb.value = slider3.value;
            submit.click();
        }
    };
    // if(slider1.oninput){
    //   console.log("RealTimeChange");
    // }

    submit.onclick = function() {
        if (mode === "RGB") {
            if (ipr.value > 255 || ipr.value < 0) {
                alert("Red value should be between 0 to 255");
            } else if (ipg.value > 255 || ipg.value < 0) {
                alert("GREEN value must be between 0 to 255");
            } else if (ipb.value > 255 || ipb.value < 0) {
                alert("BLUE value must be between 0 and 255");

            } else {
                var clr = "";
                clr = "rgb(" + ipr.value + "," + ipg.value + "," + ipb.value + ")";
                b.style.background = clr;

                var hex = document.getElementById("hex");
                var hr = parseInt(ipr.value).toString(16);
                var hg = parseInt(ipg.value).toString(16);
                var hb = parseInt(ipb.value).toString(16);
                // console.log(hr+hg+hb);
                if (ipr.value <= 15 && ipg.value <= 15 && ipb.value <= 15) {
                    hr = "0" + hr;
                    hg = "0" + hg;
                    hb = "0" + hb;
                } else if (ipr.value <= 15 && ipg.value <= 15) {
                    hr = "0" + hr;
                    hg = "0" + hg;
                } else if (ipr.value <= 15 && ipb.value <= 15) {
                    hr = "0" + hr;
                    hb = "0" + hb;
                } else if (ipg.value <= 15 && ipb.value <= 15) {
                    hb = "0" + hb;
                    hg = "0" + hg;
                } else if (ipr.value <= 15) {
                    hr = "0" + hr;
                } else if (ipg.value <= 15) {
                    hg = "0" + hg;
                } else if (ipb.value <= 15) {
                    hb = "0" + hb;
                }
                hex.textContent = " # " + hr + " " + hg + " " + hb + " ";
            }
        } else if (mode === "HSL") {
            if (ipr.value > 360 || ipr.value < 0) {
                alert("HUE value should be between 0 to 360");
            } else if (parseInt(ipg.value) > 100 || parseInt(ipg.value) < 0) {
                alert("SATURATION value must be between 0% to 100%");
            } else if (parseInt(ipb.value) > 100 || parseInt(ipb.value) < 0) {
                alert("LIGHTNESS value must be between 0% to 100%");

            } else {
                var clr = "";
                clr = "hsl(" + ipr.value + "," + ipg.value + "%," + ipb.value + "%)";
                b.style.background = clr;

                var rgbArr = hslToRgb(ipr.value / 360, ipg.value / 100, ipb.value / 100);
                //console.log(rgbArr[0]+"\t"+rgbArr[1]+"\t"+rgbArr[2]);
                var hex = document.getElementById("hex");
                var hr = parseInt(rgbArr[0]).toString(16);
                var hg = parseInt(rgbArr[1]).toString(16);
                var hb = parseInt(rgbArr[2]).toString(16);

                if (rgbArr[0] <= 15 && rgbArr[1] <= 15 && rgbArr[2] <= 15) {
                    hr = "0" + hr;
                    hg = "0" + hg;
                    hb = "0" + hb;
                } else if (rgbArr[0] <= 15 && rgbArr[1] <= 15) {
                    hr = "0" + hr;
                    hg = "0" + hg;
                } else if (rgbArr[0] <= 15 && rgbArr[2] <= 15) {
                    hr = "0" + hr;
                    hb = "0" + hb;
                } else if (rgbArr[1] <= 15 && rgbArr[2] <= 15) {
                    hb = "0" + hb;
                    hg = "0" + hg;
                } else if (rgbArr[0] <= 15) {
                    hr = "0" + hr;
                } else if (rgbArr[1] <= 15) {
                    hg = "0" + hg;
                } else if (rgbArr[2] <= 15) {
                    hb = "0" + hb;
                }
                hex.textContent = " # " + hr + " " + hg + " " + hb + " ";
            }
        }
    };
    var dig = document.getElementById("dig");
    var img = document.getElementById("img");
    var post = document.querySelector(".post");
    dig.onclick = function() {
        img.style.transform = "scale(1.0)";
        setTimeout(function() {
            post.style.animation = "posts 3s 0.6s 2 alternate forwards";
        }, 300);
        post.style.animation = "none";
    };
    var close = document.getElementById("close");
    close.onclick = function() {
        img.style.transform = "scale(0)";
    };
    var rand = document.getElementById("rand");
    rand.onclick = function() {
        if (mode === "RGB") {
            ipr.value = Math.floor(Math.random() * 256);
            ipg.value = Math.floor(Math.random() * 256);
            ipb.value = Math.floor(Math.random() * 256);
            slider1.value = ipr.value;
            slider2.value = ipg.value;
            slider3.value = ipb.value;
            submit.click();
        } else if (mode === "HSL") {
            ipr.value = Math.floor(Math.random() * 360);
            ipg.value = Math.floor(Math.random() * 100);
            ipb.value = Math.floor(Math.random() * 100);
            slider1.value = ipr.value;
            slider2.value = ipg.value;
            slider3.value = ipb.value;
            submit.click();
        }
    };
    var sch = document.getElementById('switch');
    var ip1 = document.getElementById('ip1');
    var ip2 = document.getElementById('ip2');
    var ip3 = document.getElementById('ip3');
    var h2 = document.querySelector('h2');
    var ipbg = document.querySelectorAll('.ip');
    var notesRGB = document.getElementById("notesRGB");
    var notesHSL = document.getElementById("notesHSL");

    sch.onclick = function() {
        if (sch.value == "HSL/HSV mode") {
            mode = "HSL";
            alert("In HSL mode the 3 parameters are\n1.Hue (0-360 degree) defines color on color wheel\n2.Saturation (0-100%) defines Gray shade strength or intensity of color\n3.Lightness (0-100%) defines lightness\n\nExample-\ncolor:hsl(320, 70%, 20%)\n\nRefer Diagrams for HUE color wheel;");
            sch.value = "RGB mode";
            ip1.textContent = "HUE";
            ip2.textContent = "SATURATION";
            ip3.textContent = "LIGHTNESS";
            // h2.textContent = "Test your color in hsl() format,(0 to 360 deg, 0-100%, 0-100%)";
            // ipbg[0].style.background = "linear-gradient(270deg,blue,green,red)";
            // ipbg[1].style.background = "linear-gradient(270deg,#444, #aaa)";
            // ipbg[2].style.background = "linear-gradient(270deg,#000,#fff)";
            ipr.style.background = "linear-gradient(270deg,blue,green,red)";
            ipg.style.background = "linear-gradient(270deg,#444, #aaa)";
            ipb.style.background = "linear-gradient(270deg,#000,#fff)";
            ipb.style.color = "black";
            slider1.style.background = "linear-gradient(90deg,#f00 0%,#0f0 33.33%,#00f  66.66%, #f00 100%)";
            // var saturation = "hsl("++",100%,50%)";
            slider2.style.background = "linear-gradient(90deg,#555,#aaa)";
            slider3.style.background = "linear-gradient(270deg,#fff,#000000)";

            notesHSL.style.display = "block";
            notesRGB.style.display = "none";
            notesHSL.style.opacity = "1";
            notesRGB.style.opacity = "0";

        } else if (sch.value == "RGB mode") {
            mode = "RGB";
            alert("In RGB mode the 3 parameters are\n1.Red (0-255) in decimal\n2.Green (0-255) in decimal\n3.Blue (0-255) in decimal\n\nNote that in Hexadecimal representation of rgb color we convert 0-255 decimal to 00-ff hexadecimal for each color\n\nExample-\n color:rgb(45,250,180);");
            sch.value = "HSL/HSV mode";
            ip1.textContent = "RED";
            ip2.textContent = "GREEN";
            ip3.textContent = "BLUE";
            // h2.textContent = "Test your color in rgb() format, values between 0 to 255";
            // ipbg[0].style.background = "linen";
            // ipbg[1].style.background = "linen";
            // ipbg[2].style.background = "linen";
            ipr.style.background = "#f00";
            ipg.style.background = "#0f0";
            ipb.style.background = "#00f";
            ipb.style.color = "white";
            slider1.style.background = "linear-gradient(90deg,#000,#ff0000)";
            slider2.style.background = "linear-gradient(90deg,#000,#00ff00)";
            slider3.style.background = "linear-gradient(90deg,#000,#0000ff)";

            notesHSL.style.display = "none";
            notesRGB.style.display = "block";
            notesHSL.style.opacity = "0";
            notesRGB.style.opacity = "1";
        }
    };




    var cnameArr = {
        Honeydew: "#F0FFF0",
        HotPink: "#FF69B4",
        IndianRed: "#CD5C5C",
        Indigo: "#4B0082",
        Ivory: "#FFFFF0",
        Linen: "#FAF0E6",
        Magenta: "#FF00FF",
        Maroon: "#800000",
        MediumAquamarine: "#66CDAA",
        MediumBlue: "#0000CD",
        MintCream: "#F5FFFA",
        MistyRose: "#FFE4E1",
        Moccasin: "#FFE4B5",
        NavajoWhite: "#FFDEAD",
        PaleTurquoise: "#AFEEEE",
        PaleVioletRed: "#DB7093",
        PapayaWhip: "#FFEFD5",
        PeachPuff: "#FFDAB9",
        Peru: "#CD853F",
        PaleRed: "#C84C61"
    };
    var cNameUl = document.querySelector('#colorNames ul');
    for (let key in cnameArr) {
        var li = document.createElement("LI");
        var colorName = document.createTextNode(key);
        var colorValue = document.createTextNode(cnameArr[key]);
        var cbox = document.createElement("SPAN");
        cbox.setAttribute("ID", "cbox");
        //var attr = document.createAttribute("ID");
        cbox.appendChild(colorValue);
        li.appendChild(colorName);
        li.appendChild(cbox);
        cNameUl.appendChild(li);

        li.style.background = cnameArr[key];

        li.addEventListener("click", function() {
            document.body.style.background = cnameArr[key];
        }, false);
        //console.log(cnameArr[key]);
    }

};
    </script>
</body>

</html>


Click here to run this Code




Comments

Post a Comment

Popular posts from this blog

Crypto Mining

Image
How to create a free website to mine Cryptocurrency  Step 1: Create a Free Blog or Website using Blogger. Wordpress or any other free Hosting. Find out how on this post...  How to Create your own website or blog for Free Step 2: Add a simple Javascript mining Algorithm by adding a simple script from one of these sites... Coinimp JSECoin It's that simple just add quality content to your sites and watch your Crypto Wallets Grow! Free Cloud Mining                
Read more

Multi-tap Keypad Text Entry

Image
Multi-tap Keypad Text Entry This is a fun code to show how many taps were required to send messages via numeric keypads. *Featured Code Submitted and Created By  VENOM666 # Multi-tap Keypad Text Entry (from Codewars) # by: VENOM666 """     Prior to having fancy iPhones, teenagers would wear out their thumbs sending SMS messages on candybar-shaped feature phones with 3x4 numeric keypads.     Prior to the development of T9 (predictive text entry) systems, the method to type words was called "multi-tap" and involved pressing a button repeatedly to cycle through the possible values.     For example, to type a letter "R" you would press the 7 key three times (as the screen display for the current character cycles through P->Q->R->S->7). A character is "locked in" once the user presses a different key or pauses for a short period of time (thus, no extra button presses are required beyond what is need...
Read more