Web Hex Colors Generator HTML, CSS, JS

By Posted on

Web Hex Colors Generator HTML, CSS, JS

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Web Colors HEX</title>
       
    </head>
    <body align="center">
    <h1>HEX colors</h1>
    <hr>
    <div>
    <p><b>Choose color:</b></p>
        <input type="color" id="color" value="#FFFFFF">
        <p id="stringColor"></p>
        <p><b>Generate color:</b></p>
        <input type="button" value="Generate" onclick="randomColor()">
        </div>
    </body>
</html>

CSS

  @import url('https://fonts.googleapis.com/css2?family=Anek+Malayalam&family=Josefin+Sans&display=swap');

p {
font-family: 'Josefin Sans', sans-serif;
color: #3C3C3C;
font-size: 20px;
}

h1 {
font-family: 'Josefin Sans', sans-serif;
color: #3C3C3C;
text-shadow: 4px 4px 5px grey;
}

input {
font-family: 'Josefin Sans', sans-serif;
background-color: #3C3C3C;
color: #EFEFEF;
font-size: 18px;
border-radius: 5px;
transition: color 1s;
transition: background-color 1s;
}

input:active {
background-color: #EFEFEF;
color: #3C3C3C;
}

div {
background-color: rgba(200, 200, 200, 0.3);
box-shadow: 0px 0px 5px grey;
border-radius: 5px;
height: 220px;
}

Javascript

var colors;

setInterval(hex, 500);

function hex() {
colors = document.getElementById("color").value;
document.getElementById("stringColor").innerHTML = "Color: " + colors;
document.querySelector("body").style.backgroundColor = colors;
}

function randomColor() {
colors = "#"
var i = 0
while (i < 6) {
var letter = Math.floor(Math.random()*16);
if (letter == 10) {
letter = "a";
}
if (letter == 11) {
letter = "b";
}
if (letter == 12) {
letter = "c";
}
if (letter == 13) {
letter = "d";
}
if (letter == 14) {
letter = "e";
}
if (letter == 15) {
letter = "f";
}
colors += letter
i += 1;
}
document.getElementById("stringColor").innerHTML = "Color: " + colors;
document.querySelector("body").style.backgroundColor = colors;
document.getElementById("color").value = colors;
}