Building A Responsive HTML5 Color Picker Application

Building a responsive HTML5 color picker application

Creating a Color Picker is a practical way to work with HTML, CSS, and JavaScript to build an interactive web tool that serves real functionality. Through this project, I explored how to structure, style, and apply interactivity to a color picker, focusing on clean code and effective layout. Here, I break down the elements of this tool, from the basic HTML layout to the CSS styling and the JavaScript functions that give it life.

HTml structure

To start, I defined the HTML layout for my color picker, organizing elements that would house the color display, hexagonal grid, and interactive elements such as sliders and toggles. Each component is separated in the HTML structure, making the code easy to maintain and update. Here’s a basic outline of the HTML:

<h2 class="text-centered">Color Picker</h2>
<div id="hexagonPicker" class="hexagon-picker"></div>
<div id="displayBox" class="color-display-box"></div>
<div id="colorBox" class="color-box"></div>

The <h2> tag displays a title, while hexagonPicker is the main container for the hexagon grid. The displayBox and colorBox elements show the selected color, providing real-time visual feedback.

Css styling

CSS plays an essential role in structuring and styling the color picker. The hexagonal grid structure, for instance, is designed using a flexible container layout combined with a hexagonal clipping path for each color cell. The hexagon picker grid is styled as follows:

.hexagon-picker {
  display: flex;
  flex-wrap: wrap;
  width: 364px;
  margin: auto;
}

By using display: flex and flex-wrap: wrap, I created a responsive grid that automatically wraps colors in a hexagonal arrangement. The grid width is set to 364px to keep the layout consistent and centered.

Each hexagonal color cell is styled using a clip-path, allowing me to cut the cells into hexagons without the need for complex SVG or custom images:

.hex {
  width: 28px;
  height: 32px;
  background-color: #fff;
  margin: 0;
  display: inline-block;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  cursor: pointer;
}

With this CSS, each color cell becomes interactive (cursor: pointer) and retains a consistent hexagonal shape. This design keeps the UI clean and easy to navigate.

JavaScript functionality

JavaScript introduces interactivity, allowing users to click on any hex cell and immediately view the selected color in the display areas. I implemented an event listener on each hex element to capture and apply the selected color.

document.querySelectorAll('.hex').forEach(hex => {
    hex.addEventListener('click', function() {
        const color = getComputedStyle(hex).backgroundColor;
        document.getElementById('displayBox').style.backgroundColor = color;
        document.getElementById('colorBox').style.backgroundColor = color;
    });
});

This code snippet registers an event listener on each hex cell, allowing JavaScript to retrieve its background color via getComputedStyle. When a user clicks a color, the background of both displayBox and colorBox updates immediately, providing instant feedback.

I also included a color conversion function to allow users to toggle between color models, specifically HEX to RGB:

function hexToRgb(hex) {
    let r = parseInt(hex.slice(1, 3), 16);
    let g = parseInt(hex.slice(3, 5), 16);
    let b = parseInt(hex.slice(5, 7), 16);
    return `rgb({r}, {g}, ${b})`;
}

This hexToRgb function extracts the red, green, and blue components from the HEX color and converts them to RGB format. This is useful when switching between different color models or displaying color codes in a specific format.

Toggle between color and grayscale

To enhance the tool’s flexibility, I added a mode toggle allowing users to switch between full color and grayscale modes. This toggle is implemented through an event listener:

document.getElementById('colorGrayScale').addEventListener('change', function() {
    let isChecked = document.getElementById('colorGrayScale').checked;
    toggleColorMode(isChecked);
});

When grayscale mode is enabled, the toggleColorMode function adjusts the colors in the hex grid to a grayscale palette. This toggle is effective for users looking for a simpler or monochromatic palette and is a feature that enhances the color picker’s versatility.

Conclusion

This color picker project combines structured HTML, detailed CSS styling, and dynamic JavaScript to create an interactive, visually engaging tool. I designed it with user experience in mind, making it easy to navigate and responsive to user actions. Each component—from the hexagonal grid to the display box and mode toggles—serves a purpose, creating a cohesive user interface.

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