Design Random Color Generator using HTML CSS and JavaScript

Last Updated : 08 Oct, 2024

A Random Color Generator app is used to create random colors with a simple button click, displaying both HEX and RGB codes that users can copy. It's built using HTML, CSS, and JavaScript, making it a handy tool for designers or developers who need quick color ideas. The app can also include a Dark Mode feature to switch between light and dark themes for easier viewing.

Approach to Design a Random Color Generator

Here’s a step-by-step approach for building this Random Color Generator using HTML, CSS, and JavaScript:

HTML Layout:
Create a basic interface with a title, a color display box, and buttons to generate random colors, copy HEX/RGB codes, and toggle between Light and Dark modes.
CSS Design:
Use CSS to center the layout on the page. Style the color box to show the generated color clearly. Add a Dark Mode feature by changing the background and text colors when toggled.
Generating Random Colors:
Use the genColorFn() function in JavaScript to generate a random HEX color, convert it to RGB, and update the display with the new color and its corresponding codes.
Copying Color Codes:
Implement the cpyFn() function to allow users to copy either the HEX or RGB color code to the clipboard, along with an animation confirming the successful copy action.
Dark Mode Switch:
The darkFn() function toggles Dark Mode by switching the background and text colors, providing a more comfortable viewing option in darker environments.

HTML

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
    <link href=
"https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" 
          rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <div class="container">
        <h1 class="app-title">GeeksforGeeks Random Color Generator</h1>

        <div id="colorDisplay" 
             class="color-card animate__animated animate__fadeIn">
            <p id="colorHex">#FFFFFF</p>
            <p id="colorRgb">RGB(255, 255, 255)</p>
        </div>

        <div class="buttons">
            <button onclick="genColorFn()">
                <i class="fas fa-random"></i> 
                Generate Color</button>
            <button onclick="cpyFn('colorHex')">
                <i class="far fa-copy"></i> 
                Copy HEX</button>
            <button onclick="cpyFn('colorRgb')">
                <i class="far fa-copy"></i> 
                Copy RGB</button>
            <button onclick="darkFn()">
                <i class="fas fa-adjust"></i> 
                Dark Mode</button>
        </div>

        <p id="copyMessage" class="animate__animated"></p>
    </div>

    <script src="app.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', genColorFn);
    </script>
</body>

</html>

CSS

/* Write CSS Here */body {
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    padding: 20px;
    transition: background-color 0.3s ease-in-out;
}

.container {
    max-width: 400px;
    margin: auto;
}

.app-title {
    margin-bottom: 20px;
}

.color-card {
    width: 200px;
    height: 200px;
    margin: 20px auto;
    background-color: #ffffff;
    border: 2px solid #000;
}

.buttons button {
    padding: 10px 20px;
    margin: 10px;
    cursor: pointer;
}

#copyMessage {
    margin-top: 10px;
    font-size: 1.1rem;
}

.dark-mode {
    background-color: #333;
    color: white;
}

.light-mode {
    background-color: white;
    color: black;
}

JavaScript

// Function to generate random color
function genColorFn() {
    let randomColor = Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0');
    let hexColor = `#${randomColor}`;
    let rgbColor = hexToRgb(hexColor);

    // Update the displayed color values
    document.getElementById('colorDisplay').style.backgroundColor = hexColor;
    document.getElementById('colorHex').innerText = hexColor;
    document.getElementById('colorRgb').innerText = `RGB(${rgbColor})`;
}

// Function to convert HEX to RGB
function hexToRgb(hex) {
    let bigint = parseInt(hex.slice(1), 16);
    let r = (bigint >> 16) & 255;
    let g = (bigint >> 8) & 255;
    let b = bigint & 255;
    return `${r}, ${g}, ${b}`;
}

// Function to copy color code
function cpyFn(type) {
    let copyText = document.getElementById(type).innerText;
    navigator.clipboard.writeText(copyText).then(() => {
        // Display a message for successful copy
        let copyMessage = document.getElementById('copyMessage');
        copyMessage.innerText = `${type === 'colorHex' ? 'HEX' : 'RGB'} copied!`;
        copyMessage.classList.add('animate__fadeIn');
        setTimeout(() => {
            copyMessage.classList.remove('animate__fadeIn');
            copyMessage.innerText = '';
        }, 2000);
    });
}

// Function to toggle Dark Mode
function darkFn() {
    document.body.classList.toggle('dark-mode');
}