Random Color Generator - Pick a Random Color

☆ Color Generator is a project to quickly generate new colors, hex color codes, and RGB codes. You can use it to generate new colors for buttons, texts, gradients, and other web elements.

☆ The source code of this project is freely available on our website- FreeProjects1 or GitHub Profile.

☆ The above two lines are not necessary for the code, the code will run without them.

☆ These lines make our page efficient so that users can easily find our page on Google.

☆ The first line helps us to find any page and the second line tells about that page.

☆ Random Color Generator: Have you ever wondered how to generate new color codes for your websites or other projects? Here are some examples of color codes you can make.

☆ Color Generator is a project to quickly generate new colors, hex color codes, and RGB codes. You can use it to generate new colors for buttons, texts, gradients, and other web elements.

☆ This utility generates new color values and hex values for the web page's buttons and text. This project also allows you to generate hex color values for website banners, search result images, buttons, image alt tag text, and many more. So now this website will have a completely new look!

☆ Color Generator Tools: a blog about the color generator tools on your website.

Example: Generate Hex Color Codes for the Website's Text, Banners, Buttons, and Image Alt Tag

☆ Generate Hex Color Codes From a Sample: A tutorial blog about generating hex color codes with the help of a sample.

☆ Create Beautiful Buttons With a Unique Color Look. Highly Customizable Button Generator

☆ Be Bold! Change the color of your website buttons, text, and much more.

☆ Generator: a utility to help you re-generate new color values and generate hex color values for website buttons, text, and images.

☆ Random Button Color Generator: A new random color scheme generator for buttons and other elements.

☆ Project source code

1.1 HTML file

<!DOCTYPE html>

<head>

<title>Random Color Generator - Pick a Random Color | Free Projects1</title>

</head>

<body>

<p>loading..</p>

</div>

<h1>Generate Simple Color</h1>

<span id="c_code">#FFFFFF</span>

<button onclick="simpleColor()">Get New Color</button>

<p>Get Gradient Color <a href="#get-gradient-color" id="gradient-color">Here</a></p>

</div>

<h1>Generate Gradient Color</h1>

<span id="c_code2">linear-gradient(#6164C3,#3E56EB)</span>

<button onclick="gradientColor()">Get New Color</button>

<p>Get Simple Color <a href="#get-simple-color" id="simple-color">Here</a></p>

</div>

</body>

</html>

1.2 CSS file

@import url("https://fonts.googleapis.com/css2?family=Muli&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "muli", sans-serif;
}

.wrapper {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background-color: #fff;
    display: grid;
    place-items: center;
    transition: opacity .25s, visibility 1s;
}

.loader {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.loader span {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 5px solid transparent;
    border-left: 5px solid rgb(40, 128, 252);
    animation: loading 0.5s linear infinite;
}

@keyframes loading {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loader p {
    position: absolute;
    animation: animate 2s linear infinite;
}

@keyframes animate {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.fade {
    opacity: 0;
    visibility: hidden;
}

body {
    background: linear-gradient(#6164C3, #3E56EB);
    /* background: linear-gradient(#A56662,#2E8B74); */
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-height: 100vh;
}

.container h1 {
    font-size: 2.2em;
    color: #fff;
    text-align: center;
    text-shadow: 3px 3px 10px #333;
    user-select: none;
}

.container .div-1,
.container .div-2 {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    flex-wrap: wrap;
    width: auto;
    height: 300px;
    padding: 10px 30px;
    box-shadow: 0 0 10px #c5c5c5;
}

.container .div-1 span,
.container .div-2 span {
    width: auto;
    height: auto;
    padding: 10px 20px;
    background: transparent;
    font-size: 18px;
    color: #fff;
    box-shadow: 0 0 10px #c5c5c5;
    margin: 10px 20px;
}

.container button {
    color: #090909;
    padding: 0.7em 1.7em;
    font-size: 16px;
    border-radius: 0.5em;
    user-select: none;
    cursor: pointer;
    border: none;
    border: 1px solid #e8e8e8;
    background: #e8e8e8;
    box-shadow: 6px 6px 12px #c5c5c5,
        -6px -6px 12px #fff;
    transition: all 0.3s;
}

.container button:active {
    transform: scale(0.9);
    transition: all 0.3s;
}

.container .div-1 p,
.container .div-2 p {
    color: #ddd;
}

.container .div-1 p a,
.container .div-2 p a {
    color: #ddd;
}

@media (max-width: 415px) {

    .container .div-1,
    .container .div-2 {
        margin: 10px;
        height: 97vh;
        padding: 10px 60px;
    }

    .container .div-2 {
        padding: 0;
        margin: 10px 5px;
    }

    .container .div-1 span,
    .container .div-2 span {
        width: 90%;
    }
}

1.3 JavaScript file

function generateColor(){

var symbols, color;

symbols = "0123456789ABCDEF";

color = "#";

for(var i = 0; i < 6; i++){

color = color + symbols[Math.floor(Math.random() * 16)];

}

return color;

}

function simpleColor(){

var color = generateColor();

document.body.style.background = color;

document.getElementById('c_code').innerHTML = color;

}

function gradientColor(){

var color = generateColor();

var color2 = generateColor();

document.body.style.background = "linear-gradient("+color+","+color2+")";

document.getElementById('c_code2').innerHTML = "linear-gradient("+color+","+color2+")";

}

</script>

$(document).ready(function(){

$("#gradient-color").click(function(){

$(".div-2").show();

$(".div-1").hide();

});

$("#simple-color").click(function(){

$(".div-1").show();

$(".div-2").hide();

});

})

</script>

const fadeOut= () => {

const loaderWrapper = document.querySelector('.wrapper');

loaderWrapper.classList.add('fade');

}

window.addEventListener('load', fadeOut);

</script>

Learn Java Programming

☆ if you want to learn java programming freely, visit our official link...

Random Color Generator - Pick a Random Color | Free Projects1

☆ Project source code

1.1 HTML file

1.2 CSS file

1.3 JavaScript file

Learn Java Programming

BHOLU SINGH

Post a Comment

Made with Love by

Contact form

Random Color Generator - Pick a Random Color | Free Projects1

☆ Project source code

1.1 HTML file

1.2 CSS file

1.3 JavaScript file

Learn Java Programming

BHOLU SINGH

You may like these posts

Post a Comment

Contact form