Build a Simple Next.js Interactive Web-Based Color Palette Generator

Written by

javascriptdebugged

in

Ever find yourself needing a quick color palette for a web project, a design, or maybe just for fun? Creating aesthetically pleasing and thematically consistent color schemes can be surprisingly tricky. While there are numerous online tools, building your own color palette generator provides a fantastic learning opportunity, allowing you to delve into front-end development, understand color theory principles, and create a useful tool tailored to your needs. This tutorial guides you through building a simple, interactive color palette generator using Next.js, a powerful React framework, perfect for beginners and intermediate developers alike.

Why Build a Color Palette Generator?

Beyond the practical application of generating color schemes, this project offers several benefits:

  • Learn Next.js Fundamentals: You’ll get hands-on experience with core Next.js concepts like components, state management, event handling, and styling.
  • Understand Color Theory: The project naturally introduces you to color theory, including concepts like complementary colors, analogous colors, and color harmony.
  • Improve Front-End Skills: You’ll practice HTML, CSS, and JavaScript, essential skills for any web developer.
  • Create a Useful Tool: You’ll build a tool you can use for your own projects or share with others.

Prerequisites

Before we begin, ensure you have the following:

  • Node.js and npm (or yarn): Make sure you have Node.js and npm (Node Package Manager) or yarn installed on your system. You can download them from nodejs.org.
  • Basic HTML, CSS, and JavaScript Knowledge: Familiarity with these languages is helpful, but this tutorial will guide you through the process step-by-step.
  • A Code Editor: Choose your favorite code editor (VS Code, Sublime Text, Atom, etc.).

Setting Up the Next.js Project

Let’s get started by creating a new Next.js project. Open your terminal and run the following command:

npx create-next-app color-palette-generator

This command creates a new Next.js project named “color-palette-generator”. Navigate into the project directory:

cd color-palette-generator

Now, start the development server:

npm run dev

This will start the development server, usually on http://localhost:3000. Open this in your browser to see the default Next.js welcome page.

Project Structure Overview

Before diving into the code, let’s briefly examine the project structure:

  • pages/: This directory contains your application’s pages. Each file in this directory represents a route (e.g., `pages/index.js` corresponds to `/`).
  • components/: (We’ll create this later) This directory will hold reusable React components.
  • styles/: This directory is where you’ll store your CSS or styling files.
  • public/: This directory is for static assets like images, fonts, etc.

Building the Color Palette Component

Our main focus will be creating a component to generate and display the color palette. Let’s create a new component file. In your project directory, create a folder named `components`. Inside the `components` folder, create a file named `ColorPalette.js`.

Here’s the basic structure for the `ColorPalette.js` file:

import React, { useState, useEffect } from 'react';

function ColorPalette() {
  // State to hold the color palette
  const [palette, setPalette] = useState([]);

  // Function to generate a random hex color
  const generateRandomHexColor = () => {
    return '#' + Math.floor(Math.random() * 16777215).toString(16);
  };

  // Function to generate a color palette
  const generatePalette = (numberOfColors) => {
    const newPalette = [];
    for (let i = 0; i < numberOfColors; i++) {
      newPalette.push(generateRandomHexColor());
    }
    setPalette(newPalette);
  };

  // useEffect to generate the initial palette when the component mounts
  useEffect(() => {
    generatePalette(5); // Generate a palette of 5 colors by default
  }, []);

  return (
    <div>
      <h2>Color Palette</h2>
      <div style={{ display: 'flex', gap: '10px' }}>
        {palette.map((color, index) => (
          <div
            key={index}
            style={{
              backgroundColor: color,
              width: '100px',
              height: '100px',
              borderRadius: '5px',
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              color: 'white',
              fontWeight: 'bold',
              fontSize: '1rem',
            }}
          >
            {color}
          </div>
        ))}
      </div>
      <button onClick={() => generatePalette(5)}>Generate New Palette</button>
    </div>
  );
}

export default ColorPalette;

Let’s break down this code:

  • Import React and useState: We import `React` for creating React components and `useState` for managing the state of our color palette. We also import `useEffect` for handling side effects like initial palette generation.
  • `ColorPalette` Component: This is a functional React component.
  • `useState` Hook: const [palette, setPalette] = useState([]); initializes the `palette` state variable as an empty array. This array will hold the generated hex color codes.
  • `generateRandomHexColor` Function: This function generates a random hexadecimal color code. It uses `Math.random()` to generate a random number, converts it to a hexadecimal string, and prefixes it with `#`.
  • `generatePalette` Function: This function creates a new color palette of the specified number of colors. It iterates and calls `generateRandomHexColor` to create the colors, then updates the `palette` state using `setPalette`.
  • `useEffect` Hook: useEffect(() => { generatePalette(5); }, []); This hook runs after the component mounts (i.e., when it’s first rendered). It calls `generatePalette(5)` to generate an initial palette of 5 colors. The empty dependency array `[]` ensures this effect runs only once.
  • JSX Structure: The component returns JSX (JavaScript XML) which is the syntax used to describe the UI. It includes:
    • An `h2` heading for the title.
    • A `div` with `display: ‘flex’` to arrange the color boxes horizontally.
    • `palette.map()`: This iterates through the `palette` array and creates a `div` element for each color. Each div represents a color box.
    • Inline styles are used for the color boxes: `backgroundColor` is set to the color from the `palette`, `width` and `height` are set to 100px, `borderRadius` for rounded corners, and `display: ‘flex’`, `justifyContent: ‘center’`, `alignItems: ‘center’` to center the color code text within the box, `color: ‘white’` and `fontWeight: ‘bold’` to make the color codes readable, and `fontSize: ‘1rem’`.
    • A `button` with an `onClick` event handler to regenerate the palette when clicked.

Integrating the Component into the Main Page

Now, let’s integrate this component into our main page (`pages/index.js`). Open `pages/index.js` and modify it as follows:

import React from 'react';
import ColorPalette from '../components/ColorPalette';

function HomePage() {
  return (
    <div style={{ padding: '20px' }}>
      <h1>Color Palette Generator</h1>
      <ColorPalette />
    </div>
  );
}

export default HomePage;

Here’s what changed:

  • Import `ColorPalette`: We import the `ColorPalette` component from the `../components/ColorPalette` file.
  • Include `ColorPalette` in JSX: We render the `ColorPalette` component within the `HomePage` component. We’ve also added some basic styling (padding) to the main `div`.

Save the files and refresh your browser. You should now see the color palette generator on your homepage. You can click the “Generate New Palette” button to generate new color schemes.

Adding Styling with CSS Modules

While inline styles are convenient for quick styling, using CSS Modules is a more organized and scalable approach, especially for larger projects. Let’s create a CSS Module for our `ColorPalette` component.

Create a file named `ColorPalette.module.css` in the `components` directory. Add the following CSS:


.paletteContainer {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.colorBox {
  width: 100px;
  height: 100px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: bold;
  font-size: 1rem;
  cursor: pointer; /* Add cursor style */
}

.colorBox:hover {
  opacity: 0.8; /* Add hover effect */
}

.button {
  padding: 10px 20px;
  background-color: #0070f3;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
}

.button:hover {
  opacity: 0.8;
}

Now, let’s update the `ColorPalette.js` component to use this CSS Module:


import React, { useState, useEffect } from 'react';
import styles from './ColorPalette.module.css';

function ColorPalette() {
  const [palette, setPalette] = useState([]);

  const generateRandomHexColor = () => {
    return '#' + Math.floor(Math.random() * 16777215).toString(16);
  };

  const generatePalette = (numberOfColors) => {
    const newPalette = [];
    for (let i = 0; i < numberOfColors; i++) {
      newPalette.push(generateRandomHexColor());
    }
    setPalette(newPalette);
  };

  useEffect(() => {
    generatePalette(5);
  }, []);

  return (
    <div>
      <h2>Color Palette</h2>
      <div className={styles.paletteContainer}>
        {palette.map((color, index) => (
          <div
            key={index}
            className={styles.colorBox}
            style={{ backgroundColor: color }}
          >
            {color}
          </div>
        ))}
      </div>
      <button className={styles.button} onClick={() => generatePalette(5)}>Generate New Palette</button>
    </div>
  );
}

export default ColorPalette;

Here’s what we changed:

  • Import CSS Module: import styles from './ColorPalette.module.css'; This imports the CSS styles as an object, where the keys are the class names defined in the CSS file.
  • Apply Class Names: We replace inline styles with class names from the CSS Module:
    • `className={styles.paletteContainer}` is used on the container `div`.
    • `className={styles.colorBox}` is used on each color box `div`.
    • `className={styles.button}` is used on the button.

Save the files and refresh your browser. The appearance should be the same, but now your styles are organized in a separate CSS file, making your code cleaner and easier to maintain.

Adding Color Copy Functionality

A useful feature for a color palette generator is the ability to copy the hex code of a color to the clipboard. Let’s add this functionality.

First, add an `onClick` handler to the color box `div` in `ColorPalette.js`:


<div
  key={index}
  className={styles.colorBox}
  style={{ backgroundColor: color }}
  onClick={() => {
    navigator.clipboard.writeText(color);
    alert(`Copied ${color} to clipboard!`);
  }}
>
  {color}
</div>

Here’s what we’ve added:

  • `onClick` Handler: We’ve added an `onClick` event handler to each color box.
  • `navigator.clipboard.writeText(color)`: This JavaScript API call copies the hex color code to the user’s clipboard.
  • `alert()`: A simple `alert` message is displayed to confirm the color has been copied (you could replace this with a more subtle UI feedback, like changing the color box’s background temporarily).

Save the files and refresh your browser. Now, when you click on a color box, the hex code will be copied to your clipboard, and an alert message will confirm this.

Adding More Palette Options (Advanced)

To make the color palette generator more versatile, let’s add options for different color schemes (e.g., complementary, analogous, triadic). This will involve a deeper dive into color theory.

First, let’s define a function to convert a hex color to its HSL (Hue, Saturation, Lightness) representation. This is necessary for implementing color scheme logic.


// Function to convert hex to HSL
const hexToHSL = (hex) => {
  // Remove the hash if present
  hex = hex.replace(/^#/, '');

  // Parse the hex color components
  const r = parseInt(hex.substring(0, 2), 16) / 255;
  const g = parseInt(hex.substring(2, 4), 16) / 255;
  const b = parseInt(hex.substring(4, 6), 16) / 255;

  // Calculate the maximum and minimum values
  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  const delta = max - min;

  // Calculate the hue
  let h = 0;
  if (delta) {
    if (max === r) {
      h = 60 * (((g - b) / delta) % 6);
    } else if (max === g) {
      h = 60 * ((b - r) / delta + 2);
    } else {
      h = 60 * ((r - g) / delta + 4);
    }
  }
  if (h < 0) {
    h += 360;
  }

  // Calculate the lightness
  const l = (max + min) / 2;

  // Calculate the saturation
  const s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));

  return [Math.round(h), Math.round(s * 100), Math.round(l * 100)]; // Return HSL values
};

Now, let’s add functions to generate different color schemes. These functions will take a base color (a hex code) and generate a palette based on color theory principles.


// Function to generate a complementary color
const generateComplementary = (hex) => {
  const [h, s, l] = hexToHSL(hex);
  const complementaryH = (h + 180) % 360;
  return `hsl(${complementaryH}, ${s}%, ${l}%)`;
};

// Function to generate an analogous color palette
const generateAnalogous = (hex) => {
  const [h, s, l] = hexToHSL(hex);
  const angle1 = (h + 30) % 360;
  const angle2 = (h - 30 + 360) % 360; // Ensure positive
  return [`hsl(${angle1}, ${s}%, ${l}%)`, `hsl(${h}, ${s}%, ${l}%)`, `hsl(${angle2}, ${s}%, ${l}%)`];
};

// Function to generate a triadic color palette
const generateTriadic = (hex) => {
  const [h, s, l] = hexToHSL(hex);
  const angle1 = (h + 120) % 360;
  const angle2 = (h + 240) % 360;
  return [`hsl(${angle1}, ${s}%, ${l}%)`, `hsl(${h}, ${s}%, ${l}%)`, `hsl(${angle2}, ${s}%, ${l}%)`];
};

Next, let’s modify the `generatePalette` function to accept a `scheme` parameter (e.g., “random”, “complementary”, “analogous”, “triadic”) and use these color scheme functions.


const generatePalette = (numberOfColors, scheme = 'random', baseColor) => {
  let newPalette = [];

  if (scheme === 'random') {
    for (let i = 0; i < numberOfColors; i++) {
      newPalette.push(generateRandomHexColor());
    }
  } else if (scheme === 'complementary' && baseColor) {
    newPalette.push(baseColor);  // Include the base color
    newPalette.push(generateComplementary(baseColor));
  } else if (scheme === 'analogous' && baseColor) {
    const analogousColors = generateAnalogous(baseColor);
    newPalette = analogousColors;
  } else if (scheme === 'triadic' && baseColor) {
    const triadicColors = generateTriadic(baseColor);
    newPalette = triadicColors;
  }
  else {
    // Default to random if no valid scheme is selected
    for (let i = 0; i < numberOfColors; i++) {
      newPalette.push(generateRandomHexColor());
    }
  }

  setPalette(newPalette);
};

In this enhanced `generatePalette` function:

  • It now accepts a `scheme` parameter, defaulting to “random”.
  • It also accepts a `baseColor` parameter, which is the starting color for schemes like complementary, analogous, and triadic.
  • It uses `if/else if` statements to handle different color schemes.
  • If a specific scheme is selected (e.g., “complementary”) and a `baseColor` is provided, it calls the corresponding color scheme generation function.
  • If no valid scheme is selected, it defaults to generating a random palette.

Finally, we’ll modify the component’s UI to include a dropdown to select the color scheme and, if necessary, an input field for the base color.


import React, { useState, useEffect } from 'react';
import styles from './ColorPalette.module.css';

function ColorPalette() {
  const [palette, setPalette] = useState([]);
  const [scheme, setScheme] = useState('random');
  const [baseColor, setBaseColor] = useState('#007bff'); // Default base color

  const generateRandomHexColor = () => {
    return '#' + Math.floor(Math.random() * 16777215).toString(16);
  };

  const hexToHSL = (hex) => {
    // Remove the hash if present
    hex = hex.replace(/^#/, '');

    // Parse the hex color components
    const r = parseInt(hex.substring(0, 2), 16) / 255;
    const g = parseInt(hex.substring(2, 4), 16) / 255;
    const b = parseInt(hex.substring(4, 6), 16) / 255;

    // Calculate the maximum and minimum values
    const max = Math.max(r, g, b);
    const min = Math.min(r, g, b);
    const delta = max - min;

    // Calculate the hue
    let h = 0;
    if (delta) {
      if (max === r) {
        h = 60 * (((g - b) / delta) % 6);
      } else if (max === g) {
        h = 60 * ((b - r) / delta + 2);
      } else {
        h = 60 * ((r - g) / delta + 4);
      }
    }
    if (h < 0) {
      h += 360;
    }

    // Calculate the lightness
    const l = (max + min) / 2;

    // Calculate the saturation
    const s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));

    return [Math.round(h), Math.round(s * 100), Math.round(l * 100)]; // Return HSL values
  };

  const generateComplementary = (hex) => {
    const [h, s, l] = hexToHSL(hex);
    const complementaryH = (h + 180) % 360;
    return `hsl(${complementaryH}, ${s}%, ${l}%)`;
  };

  const generateAnalogous = (hex) => {
    const [h, s, l] = hexToHSL(hex);
    const angle1 = (h + 30) % 360;
    const angle2 = (h - 30 + 360) % 360; // Ensure positive
    return [`hsl(${angle1}, ${s}%, ${l}%)`, `hsl(${h}, ${s}%, ${l}%)`, `hsl(${angle2}, ${s}%, ${l}%)`];
  };

  const generateTriadic = (hex) => {
    const [h, s, l] = hexToHSL(hex);
    const angle1 = (h + 120) % 360;
    const angle2 = (h + 240) % 360;
    return [`hsl(${angle1}, ${s}%, ${l}%)`, `hsl(${h}, ${s}%, ${l}%)`, `hsl(${angle2}, ${s}%, ${l}%)`];
  };

  const generatePalette = (numberOfColors, scheme = 'random', baseColor) => {
    let newPalette = [];

    if (scheme === 'random') {
      for (let i = 0; i < numberOfColors; i++) {
        newPalette.push(generateRandomHexColor());
      }
    } else if (scheme === 'complementary' && baseColor) {
      newPalette.push(baseColor);  // Include the base color
      newPalette.push(generateComplementary(baseColor));
    } else if (scheme === 'analogous' && baseColor) {
      const analogousColors = generateAnalogous(baseColor);
      newPalette = analogousColors;
    } else if (scheme === 'triadic' && baseColor) {
      const triadicColors = generateTriadic(baseColor);
      newPalette = triadicColors;
    }
    else {
      // Default to random if no valid scheme is selected
      for (let i = 0; i < numberOfColors; i++) {
        newPalette.push(generateRandomHexColor());
      }
    }

    setPalette(newPalette);
  };

  useEffect(() => {
    generatePalette(5, scheme, baseColor);
  }, [scheme, baseColor]); // Recalculate palette when scheme or baseColor changes

  return (
    <div>
      <h2>Color Palette</h2>
      <div>
        <label htmlFor="scheme">Color Scheme:</label>
        <select
          id="scheme"
          value={scheme}
          onChange={(e) => setScheme(e.target.value)}
        >
          <option value="random">Random</option>
          <option value="complementary">Complementary</option>
          <option value="analogous">Analogous</option>
          <option value="triadic">Triadic</option>
        </select>
      </div>

      {(scheme === 'complementary' || scheme === 'analogous' || scheme === 'triadic') && (
        <div>
          <label htmlFor="baseColor">Base Color:</label>
          <input
            type="color"
            id="baseColor"
            value={baseColor}
            onChange={(e) => setBaseColor(e.target.value)}
          />
        </div>
      )}

      <div className={styles.paletteContainer}>
        {palette.map((color, index) => (
          <div
            key={index}
            className={styles.colorBox}
            style={{ backgroundColor: color }}
            onClick={() => {
              navigator.clipboard.writeText(color);
              alert(`Copied ${color} to clipboard!`);
            }}
          >
            {color}
          </div>
        ))}
      </div>
      <button className={styles.button} onClick={() => generatePalette(5, scheme, baseColor)}>Generate New Palette</button>
    </div>
  );
}

export default ColorPalette;

Here’s what we’ve added and modified:

  • `scheme` State: const [scheme, setScheme] = useState('random'); This state variable holds the currently selected color scheme.
  • `baseColor` State: const [baseColor, setBaseColor] = useState('#007bff'); This state variable holds the base color for schemes like complementary, analogous, and triadic. It defaults to a blue color.
  • Dropdown for Scheme Selection: A `select` element allows the user to choose a color scheme. The `onChange` event updates the `scheme` state.
  • Conditional Input Field: The `&&` operator conditionally renders an input field of type “color” to select the base color if the selected scheme requires it (complementary, analogous, or triadic). The `onChange` event updates the `baseColor` state.
  • Passing `scheme` and `baseColor` to `generatePalette`: We pass the `scheme` and `baseColor` to the `generatePalette` function when the button is clicked and in the `useEffect` hook.
  • `useEffect` Dependency Array: The `useEffect` hook now has `[scheme, baseColor]` in its dependency array. This means the palette will be regenerated whenever the selected `scheme` or the `baseColor` changes.

Save the files and refresh your browser. You should now see the color scheme dropdown and, when you select “Complementary”, “Analogous”, or “Triadic”, a color picker appears. Experiment with different schemes and colors!

Common Mistakes and Troubleshooting

Here are some common mistakes and how to fix them:

  • Incorrect File Paths: Double-check the file paths in your `import` statements. Typos can easily break your application.
  • CSS Module Errors: Make sure you’ve imported the CSS Module correctly (import styles from './ColorPalette.module.css';) and that you’re using the correct class names (e.g., className={styles.colorBox}).
  • State Updates Not Working: Ensure you’re using the correct state update functions (e.g., setPalette(), setScheme(), setBaseColor()) to update your state variables. Also, make sure the component is re-rendering when the state changes.
  • Color Scheme Issues: If your color schemes aren’t working as expected, carefully review the `hexToHSL`, `generateComplementary`, `generateAnalogous`, and `generateTriadic` functions for any errors in the color theory logic. Test with known hex codes to verify the calculations.
  • Clipboard Issues: The `navigator.clipboard.writeText()` method might not work in all browsers, especially if the code is not running in a secure context (HTTPS). Ensure you are running the app on `localhost` or a secure domain.

Key Takeaways

In this tutorial, you’ve learned how to build a simple, interactive color palette generator using Next.js. You’ve gained experience with:

  • Creating and using React components.
  • Managing state with the `useState` hook.
  • Handling events (e.g., button clicks, dropdown changes).
  • Styling with CSS Modules.
  • Using the clipboard API.
  • Implementing basic color theory concepts.

FAQ

  1. Can I customize the number of colors in the palette? Yes! You can add an input field or a slider to allow the user to specify the number of colors they want in the palette. Modify the `generatePalette` function to accept this value.
  2. How can I add more color schemes? You can add more color scheme generation functions (e.g., for tetradic, split complementary, etc.) and add corresponding options to the dropdown. You’ll need to research the color theory behind each scheme.
  3. How can I persist the generated palettes? You could use `localStorage` to save the generated palettes in the user’s browser, so they don’t get lost on refresh.
  4. How can I make the color boxes more visually appealing? You can add hover effects, shadows, and other CSS styling to enhance the visual appearance of the color boxes. Consider also adding a visual indicator for the selected base color.
  5. How can I make the app responsive? Use CSS media queries to ensure the app looks good on different screen sizes. Consider using a CSS framework like Bootstrap or Tailwind CSS for easier responsiveness.

This color palette generator is a starting point. There’s a lot of room for improvement and customization. You can expand it with more features, better UI/UX, and more advanced color theory implementations. Continue experimenting, learning, and refining your skills. The journey of a thousand lines of code begins with a single function, and each project, no matter how small, is a valuable step forward in your web development journey.

More posts