🎨 Color Generation App

Overview

This app allows users to generate random colors in RGB, RGBA, and HEX formats. It also provides the option to toggle between these formats, displaying color information dynamically.

HTML File

The HTML file includes the structure of the page, featuring color boxes, a generate button, toggle buttons for color formats, and informational sections for each color.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Theme Changing</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="fonts" href="/fonts/calibri_Font.css">
</head>
<body class="grid">
    <div class="color-boxes">
        <div class="color-box" id="color-box1">Color 1</div>
        <div class="color-box" id="color-box2">Color 2</div>
        <div class="color-box" id="color-box3">Color 3</div>
    </div>
    <button id="generateButton">Generate Colors</button>
    <div class="toggle-buttons">
        <button class="toggle-button" data-type="rgb">RGB</button>
        <button class="toggle-button" data-type="rgba">RGBA</button>
        <button class="toggle-button" data-type="hex">HEX</button>
        <button class="toggle-button" data-type="all">ALL</button>
    </div>
    <div class="color-info" id="color-info1">Color Info 1</div>
    <div class="color-info" id="color-info2">Color Info 2</div>
    <div class="color-info" id="color-info3">Color Info 3</div>
    <script src="./script.js"></script>
</body>
</html>

CSS File

This CSS styles the page with a modern and responsive design, including animations for the grid background, styles for the color boxes, buttons, and tooltips.

body {
    background-color: #000000;
    color: #f9f9f9;
    display: flex;
    flex-direction: column;
    height: 100vh;
    align-items: center;
    justify-content: center;
    padding: 12px;
    margin: 0;
    overflow: hidden;
    transition: all 0.1s ease;
}
.grid {
    background-image: linear-gradient(to right, #0f0f10 1px, transparent 1px),
                      linear-gradient(to bottom, #0f0f10 1px, transparent 1px);
    background-size: 2rem 2rem;
    background-position: center center;
    animation: bgMove 10s linear infinite;
}
@keyframes bgMove {
    0% { background-position: center center; }
    100% { background-position: right bottom; }
}
.color-boxes {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
}
.color-box {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: #fff;
    border-radius: 12px;
    position: relative;
    text-align: center;
    transition: background-color 0.3s ease;
}
.color-info {
    margin-top: 10px;
    font-size: 0.9rem;
    font-weight: bold;
    text-align: center;
    position: relative;
    border-radius: 12px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
    background-color: #151515;
    padding: 20px;
    max-width: 400px;
    width: 90%;
    z-index: 1;
    transition: all 0.3s ease;
}
.tooltip {
    position: absolute;
    top: -150%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.3rem 0.6rem;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    background: #333333;
    z-index: 1;
    border-radius: 8px;
    text-transform: capitalize;
    font-weight: 400;
    font-size: 0.8rem;
    color: #e8e8e8;
    white-space: nowrap;
    transform-origin: top center;
}
.tooltip::before {
    position: absolute;
    content: "";
    height: 0.6rem;
    width: 0.6rem;
    bottom: -0.3rem;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    background: #333333;
}
.color-info:hover .tooltip {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(-10px);
}
#generateButton {
    padding: 10px 20px;
    border-radius: 12px;
    background-color: #f9f9f9;
    color: #212121;
    border: none;
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 20px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
#generateButton:hover {
    background-color: #e0e0e0;
}
.toggle-buttons {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}
.toggle-button {
    padding: 5px 10px;
    border-radius: 8px;
    background-color: #f9f9f9;
    color: #212121;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: bold;
    transition: background-color 0.3s ease;
}
.toggle-button:hover {
    background-color: #e0e0e0;
}

JavaScript File

The JavaScript file generates random colors in different formats and handles UI interactions, including updating color information, toggling between formats, and copying color values to the clipboard.

function getRandomColor() {
    const r = Math.floor(Math.random() * 256);
    const g = Math.floor(Math.random() * 256);
    const b = Math.floor(Math.random() * 256);
    const a = (Math.random() * 1).toFixed(2); 
    const rgb = `rgb(${r}, ${g}, ${b})`;
    const rgba = `rgba(${r}, ${g}, ${b}, ${a})`;
    const hex = `#${((1 << 24) | (r << 16) | (g << 8) | b).toString(16).slice(1).toUpperCase()}`;
    return { rgb, rgba, hex };
}

function displayColorInfo(box, info, color) {
    box.style.backgroundColor = color.rgb;
    info.innerHTML = `RGB: ${color.rgb}<br>RGBA: ${color.rgba}<br>HEX: ${color.hex}`;
    info.dataset.rgb = color.rgb;
    info.dataset.rgba = color.rgba;
    info.dataset.hex = color.hex;
}

function toggleColorInfo(type) {
    const infoDivs = document.querySelectorAll(".color-info");
    infoDivs.forEach(div => {
        const rgb = div.dataset.rgb;
        const rgba = div.dataset.rgba;
        const hex = div.dataset.hex;
        if (type === "all") {
            div.innerHTML = `RGB: ${rgb}<br>RGBA: ${rgba}<br>HEX: ${hex}`;
        } else if (type === "rgb") {
            div.innerHTML = `RGB: ${rgb}`;
        } else if (type === "rgba") {
            div.innerHTML = `RGBA: ${rgba}`;
        } else if (type === "hex") {
            div.innerHTML = `HEX: ${hex}`;
        }
    });
}

document.getElementById("generateButton").addEventListener("click", function () {
    const colorBox1 = document.getElementById("color-box1");
    const colorBox2 = document.getElementById("color-box2");
    const colorBox3 = document.getElementById("color-box3");
    const colorInfo1 = document.getElementById("color-info1");
    const colorInfo2 = document.getElementById("color-info2");
    const colorInfo3 = document.getElementById("color-info3");
    const color1 = getRandomColor();
    const color2 = getRandomColor();
    const color3 = getRandomColor();
    displayColorInfo(colorBox1, colorInfo1, color1);
    displayColorInfo(colorBox2, colorInfo2, color2);
    displayColorInfo(colorBox3, colorInfo3, color3);
});

document.querySelectorAll(".toggle-button").forEach(button => {
    button.addEventListener("click", function () {
        toggleColorInfo(button.getAttribute("data-type"));
    });
});

document.querySelectorAll(".color-info").forEach(info => {
    info.addEventListener("mouseover", function () {
        const tooltip = document.createElement("span");
        tooltip.className = "tooltip";
        tooltip.innerText = "Copy";
        info.appendChild(tooltip);
    });

    info.addEventListener("mouseout", function () {
        const tooltip = info.querySelector(".tooltip");
        if (tooltip) {
            tooltip.remove();
        }
    });

    info.addEventListener("click", function () {
        const tooltip = info.querySelector(".tooltip");
        navigator.clipboard.writeText(info.innerText).then(() => {
            tooltip.innerText = "Copied!";
            setTimeout(() => {
                tooltip.innerText = "Copy";
            }, 1000);
        });
    });
});

Blog

🎨 Color Generation App

ABDULLAH AL AZMI

Overview

HTML File

CSS File

JavaScript File

Join Our Newsletter. No Spam, Only the good stuff.

Related