Day 71 : Color Palette Generator

Introduction

Welcome to Day 71 of the #100DaysOfCode challenge! Today, we're diving into a fascinating project: a color palette generator app. As part of this challenge, we're continually pushing ourselves to learn and create new things, and this project is a testament to that journey. Color plays a crucial role in design, evoking emotions, setting moods, and enhancing user experiences. With our color palette generator, we aim to empower designers and developers to explore and discover beautiful color combinations effortlessly.

Day 71 : Color Palette Generator | Harshil Chovatiya

Project Overview

Our color palette generator app is a simple yet powerful tool designed to inspire creativity and streamline the design process. Whether you're a seasoned designer looking for fresh ideas or a beginner exploring the world of color theory, this app is for you. With just a few clicks, you can generate endless color palettes, experiment with different hues, and save your favorite combinations for future projects.

Key Features

Generate unlimited color palettes
Customize colors by adjusting hue, saturation, and brightness
Save favorite color palettes for quick access
Export color codes in various formats (RGB, HEX, HSL)
Intuitive and user-friendly interface

HTML File Overview (index.html)

Start with a simple HTML structure for your Color Pallet Generator:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Color Palette Generator</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <div class="container">
        <h1>Color Palette Generator</h1>
        <button id="generateButton">Generate Palette</button>
        <div id="colorPalettesContainer" class="color-palettes-container"></div>
    </div>

    <script src="script.js"></script>
</body>

</html>

Styling with CSS:

Here's some basic CSS to style the Color Pallet Generator:

        
        
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f2ede6;
}

h1 {
  color: #29a587;
}

.container {
  max-width: 1000px;
  margin: 50px auto;
  text-align: center;
}

#generateButton {
  margin-bottom: 20px;
  padding: 10px 20px;
  font-size: 16px;
  background-color: #222831;
  color: #29a587;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#generateButton:hover {
  background-color: #29a587;
  color: #222831;
}

.color-palettes-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.paletteContainer {
  margin: 10px;
}

.colorBox {
  width: 100px;
  height: 100px;
  margin: 5px;
  border-radius: 12px;
  cursor: pointer;
  border: 1px solid #29a587;
}

.colorBox:hover {
  border: 2px solid #333;
}

JavaScript:

Now, let's implement the JavaScript to make this application interactive:

                
                
document.addEventListener("DOMContentLoaded", function() {
    // Initial generation of color palettes
    generateColorPalettes();

    // Event listener for the "Generate Palettes" button
    document.getElementById('generateButton').addEventListener('click', generateColorPalettes);
});

function generateColorPalettes() {
    const colorPalettesContainer = document.getElementById('colorPalettesContainer');
    colorPalettesContainer.innerHTML = '';

    // Generate five color palettes
    for (let i = 0; i < 5; i++) {
        const paletteContainer = document.createElement('div');
        paletteContainer.classList.add('paletteContainer');

        // Generate primary and secondary colors randomly
        const primaryColor = generateRandomColor();
        const secondaryColor = generateRandomColor();

        // Generate color palette based on primary and secondary colors
        const palette = generateColorPalette(primaryColor, secondaryColor);
        palette.forEach(color => {
            const colorBox = document.createElement('div');
            colorBox.classList.add('colorBox');
            colorBox.style.backgroundColor = color;
            colorBox.setAttribute('title', color);
            colorBox.addEventListener('click', () => copyToClipboard(color));
            paletteContainer.appendChild(colorBox);
        });

        // Add the color palette to the container
        colorPalettesContainer.appendChild(paletteContainer);
    }
}

function generateColorPalette(primaryColor, secondaryColor) {
    // Generate a palette with all five colors derived from primary and secondary colors
    // You can implement your color generation logic here
    const palette = [];

    // Push the primary and secondary colors
    palette.push(primaryColor);
    palette.push(secondaryColor);

    // Generate intermediate colors
    for (let i = 0; i < 3; i++) {
        palette.push(generateRandomColor());
    }

    return palette;
}

function generateRandomColor() {
    // Generate a random hexadecimal color
    return '#' + Math.floor(Math.random()*16777215).toString(16);
}

function copyToClipboard(color) {
    navigator.clipboard.writeText(color)
        .then(() => alert('Color copied to clipboard: ' + color))
        .catch(err => console.error('Failed to copy color: ', err));
}

Live Example

Here is the Live Preview of the above code

If you're interested in accessing the source code for this todo application, simply click on this link to visit the repository: Click Here. To get a feel for how the application works, you can check out the live preview by clicking here.

Conclusion

In conclusion, Day 71 of the #100DaysOfCode challenge has been an exciting journey of creativity and learning. Through the development of our color palette generator app, we've not only honed our coding skills but also gained a deeper appreciation for the art of design. As we continue on our coding journey, let's remember to embrace every opportunity to innovate, create, and inspire. Stay tuned for more exciting projects ahead!

Harshil Chovatiya | Flutter Developer

Search This Blog