Enhancing The Color Picker App With Palettes

Enhancing the color picker app with palettes

Building on my Color Picker project, I’ve added functionality for generating color palettes directly within the tool, making it easier for designers and developers to create coordinated color schemes. This new feature focuses on two specific palette types: Analogous and Complementary. The analogous palette provides colors that are close to the selected color on the color wheel, while the complementary palette offers contrasting colors.

HTML structure

To implement these palettes, I structured the HTML to include two main sections, each with a button to trigger palette generation and a display area to show the resulting colors.

<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-12" style="text-align: center;">
      <h3 class="text-centered">Analogous Palette</h3>
      <button id="paletteAnalogousBtn" class="btn btn-primary">Generate</button>
      <div id="paletteAnalogous" class="d-flex justify-content-center" style="display: none;"></div>
    </div>
  </div>
</div>
<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-12" style="text-align: center;">
      <h3 class="text-centered">Complementary Palette</h3>
      <button id="paletteComplementaryBtn" class="btn btn-primary">Generate</button>
      <div id="paletteComplementary" class="d-flex justify-content-center" style="display: none;"></div>
    </div>
  </div>
</div>

Each palette has a dedicated button (Generate), identified with unique IDs (paletteAnalogousBtn and paletteComplementaryBtn). The containers (paletteAnalogous and paletteComplementary) hold the palette colors once generated.

CSS styling

Each color in the palette is displayed as a square, providing a clean, structured look that complements the Color Picker’s layout. Here’s the CSS I used:

.color-square {
  width: 50px;
  height: 50px;
  margin: 5px auto;
  border: 1px solid #ddd;
  cursor: pointer;
  display: block;
}

This .color-square class standardizes the size, margin, and border of each color block. Additionally, I used a media query to adjust the size on smaller screens:

@media (width <= 768px) {
  .color-square {
    width: 40px;
    height: 40px;
  }
}

On devices smaller than 768px, each color square is reduced in size to ensure the display remains visually balanced and accessible.

JavaScript functionality

The JavaScript functions behind this feature handle both the creation and display of the palettes. Each palette is generated based on the selected color from the Color Picker, using the hue-shifting method to achieve the desired color relationships.

Analogous palette

The analogous palette consists of colors close to each other on the color wheel. This palette is created by adjusting the hue in increments:

document.getElementById('paletteAnalogousBtn').addEventListener('click', function() {
    const color = document.getElementById('displayBox').style.backgroundColor;
    const palette = generateAnalogousPalette(color);
    displayPalette(palette, 'paletteAnalogous');
});

function generateAnalogousPalette(color) {
    let colors = [];
    for (let i = -2; i <= 2; i++) {
        colors.push(adjustHue(color, i * 30)); // Adjust hue by 30 degrees per increment
    }
    return colors;
}

This function applies an event listener to the button, capturing the currently selected color and calling generateAnalogousPalette. The function then shifts the hue by 30 degrees to create five similar colors.

Complementary palette

The complementary palette offers a contrasting color, calculated by shifting the hue by 180 degrees. Here’s the JavaScript code for the complementary palette:

document.getElementById('paletteComplementaryBtn').addEventListener('click', function() {
    const color = document.getElementById('displayBox').style.backgroundColor;
    const palette = generateComplementaryPalette(color);
    displayPalette(palette, 'paletteComplementary');
});

function generateComplementaryPalette(color) {
    let colors = [];
    colors.push(color); // Original color
    colors.push(adjustHue(color, 180)); // Complementary color
    return colors;
}

The generateComplementaryPalette function creates an array containing the original color and its complement. This high-contrast pairing is especially useful in design for creating visual separation.

Color adjustment helper

To adjust the hue, I used a helper function that works in the HSL color space, as hue shifts are simpler to manage in HSL than in RGB:

function adjustHue(color, degree) {
    let hsl = rgbToHsl(color);
    hsl.h = (hsl.h + degree) % 360;
    return hslToRgb(hsl);
}

The adjustHue function converts an RGB color to HSL, shifts the hue, and converts it back to RGB. This modular approach ensures that both palette functions can adjust colors easily.

Displaying the generated palette

Finally, the displayPalette function renders the colors in the respective containers:

function displayPalette(colors, containerId) {
    const container = document.getElementById(containerId);
    container.innerHTML = ''; // Clear previous colors
    colors.forEach(color => {
        let colorDiv = document.createElement('div');
        colorDiv.className = 'color-square';
        colorDiv.style.backgroundColor = color;
        container.appendChild(colorDiv);
    });
    container.style.display = 'flex'; // Show the container
}

This function clears any existing colors, creates new squares for each generated color, and adds them to the container. Setting container.style.display to flex makes the palette visible.

Conclusion

Adding palette generation to the Color Picker tool makes it a more powerful resource for anyone working on color schemes. The ability to generate both analogous and complementary palettes directly in the tool adds practical value for designers and developers needing visually cohesive or contrasting colors. The combination of HTML, CSS, and JavaScript functions provides a streamlined user experience that’s easy to use and highly functional.

For more insights into this topic, you can find the details here.