Home
Programming

Random Color Generate [HEX & RGB]

Syiainfoku make a Random Color Generate with Vanilla JavaScript.
Random Color Generate [HEX & RGB]

Hello friends!

Welcome back, with me the founder of Syiainfoku. You will learn together on the Syiainfoku blog how to make a Random Color Generate with Vanilla JavaScript.

Ok, let's get started

Preview Random Color Generate

Preview Random Color Generate

In this Random Color Generate there are several elements, including:

  1. background that will change when you click
  2. hexagonal color code
  3. rgb color code

Source Code and Brief Explanation

To make this program [Random Color Generate]. First you need to create three Files, one HTML File and one CSS File and lastly one JS File. After creating these files, just paste the following code into your file. You can also download the source code file of this Random Color Generate from the given download button.

First, create an HTML file with the name index.html and paste the given code in your HTML file. Remember, you must create a file with an .html extension.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Color Generate | hitoricoding</title>
    <link rel="stylesheet" href="./assets/style.css">
</head>

<body>
    <div id="hex">#FFFFFF</div>
    <div id="rgb">rgb(255,255,255)</div>
    <script src="./assets/main.js"></script>
</body>

</html>

Second, create a CSS file with the name style.css and paste the given code in your CSS file. Remember, you must create a file with a .css extension.

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500;700&display=swap');

:root {
    --bgcolor: #ffffffff;
    --color: #00000080;
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
    text-align: center;
}

html,
body {
    width: 100%;
    height: 100%;
}

body {
    display: grid;
    justify-content: center;
    align-content: center;
    background-color: var(--bgcolor);
}

#hex,
#rgb {
    font-size: 48px;
    color: var(--color);
    padding: 16px 32px 8px;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    user-select: none;
    transition: background-color 0.2s, color 0.2s;
}

#hex:hover,
#rgb:hover {
    background-color: var(--color);
    color: var(--bgcolor);
    cursor: copy;
}

#hex.copied::after,
#rgb.copied::after {
    content: 'Copied!';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: var(--bgcolor);
    background-color: #000000;
    padding: inherit;
    animation: copy 2s cubic-bezier(1, 0, 0, 1) forwards;
}

@keyframes copy {
    0% {
        transform: translateX(-100%);
    }

    50% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(100%);
    }
}

Finally, create a JS file with the name main.js and paste the given code in your JS file. Remember, you must create a file with a .js extension.

document.body.addEventListener("click", generateColor);

function generateColor(e) {
    if (e.target.id === "hex" || e.target.id === "rgb") {
        navigator.clipboard
            .writeText(e.target.innerText)
            .then(() => e.target.classList.add("copied"))
            .then(() => {
                setTimeout(() => {
                    e.target.classList.remove("copied");
                }, 2000);
            });

        return;
    }

    let red = Math.floor(Math.random() * 256);
    let green = Math.floor(Math.random() * 256);
    let blue = Math.floor(Math.random() * 256);

    let hex = `#${rgbToHex(red)}${rgbToHex(green)}${rgbToHex(blue)}`;
    let rgb = `rgb(${red},${green},${blue})`;

    if (red > 127 || green > 127 || blue > 127) {
        document.documentElement.style.setProperty("--color", "#00000080");
    } else {
        document.documentElement.style.setProperty("--color", "#FFFFFF80");
    }

    document.documentElement.style.setProperty("--bgcolor", rgb);
    document.querySelector("#hex").innerHTML = hex;
    document.querySelector("#rgb").innerHTML = rgb;

    function rgbToHex(color) {
        return color
            .toString(16)
            .padStart(2, 0)
            .toUpperCase();
    }
}

That's it, now you have successfully created a Random Color Generate With Vanilla JavaScript, If your code is not working or you are facing any error/problem, please download the source code file from the given download button. It's free and a .zip file will be downloaded then you have to extract it.

Download

Closing

Thank you for those of you who have read and downloaded this source code, hopefully it can be useful and add to your insight.

If you found this article useful, you can share it. That's all from me, and THANK YOU

Post a Comment