Designing a custom color picker with HTML, CSS, and JavaScript

Colors play an essential role in the design of a website or application. They can create a mood, evoke emotions, and help users understand the content better. A color picker is a tool that allows users to select a color from a palette and apply it to various elements on a page. In this tutorial, we will create a custom color picker using HTML, CSS, and JavaScript.

Prerequisites

Before we begin, we need a basic understanding of HTML, CSS, and JavaScript. We will be using HTML to create the structure of the color picker, CSS to style it, and JavaScript to add interactivity.

Step 1: Creating the HTML Markup

First, we need to create the HTML structure of our color picker. We will create a div element with a class of color-picker, which will contain all the elements of our color picker. Inside the color-picker div, we will create a header with a label that says "Color Picker." Below the header, we will create a div with a class of colors that will contain our color swatches. Finally, we will create an input element with a type of text and a class of color-code that will display the selected color code.

<div class="color-picker">
  <header>
    <label>Color Picker</label>
  </header>
  <div class="colors"></div>
  <input type="text" class="color-code" readonly>
</div>

Step 2: Styling the Color Picker

Now that we have our HTML markup, we can style our color picker using CSS. We will start by setting the width and height of the color-picker div and centering it on the page. We will also set the background color to white and give it a border.

Next, we will style the header and label, setting the font size and color. We will also set the background color of the colors div to gray and give it a border radius.

Finally, we will style the color swatches by creating a class called color that sets the width and height of each swatch and gives it a border radius. We will also set the hover and active states for the color swatches to give them a darker border when the user interacts with them.

.color-picker {
  width: 200px;
  height: 220px;
  margin: 0 auto;
  background-color: #fff;
  border: 1px solid #ddd;
}

header {
  background-color: #ddd;
  padding: 10px;
}

label {
  font-size: 16px;
  color: #333;
}

.colors {
  background-color: #ddd;
  border-radius: 5px;
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  margin: 10px 0;
}

.color {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin: 5px;
  cursor: pointer;
  transition: border 0.2s;
}

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

.color:active {
  border: 2px solid #000;
}

Step 3: Generating Color Swatches with JavaScript

Now that we have our color picker styled, we need to generate the color swatches dynamically using JavaScript. We will create an array of colors and loop through them, creating a div element for each color and appending it to the colors div.

const colors = [
  "#FF0000",
  "#FFA500",
  "#FFFF00",
  "#008000",
  "#0000FF",
  "#800080"
];

const colorsDiv = document.querySelector(".colors");

colors.forEach(color => {
  const div = document.createElement("div");
  div.style.backgroundColor = color;
  div.classList.add("color");
  div.addEventListener("click", () => {
    updateColorCode(color);
  });
  colorsDiv.appendChild(div);
});

In the code above, we first select the colors div using document.querySelector. We then loop through the colors array using the forEach method, creating a div element for each color. We set the background color of the div to the color in the array and add the color class to it. We also add an event listener to the div that calls the updateColorCode function when clicked, passing in the selected color. Finally, we append the div to the colors div.

Step 4: Updating the Selected Color Code

The last step is to update the selected color code when the user selects a color. We will create a function called updateColorCode that takes in a color parameter and sets the value of the color-code input element to the selected color.

const colorCodeInput = document.querySelector(".color-code");

function updateColorCode(color) {
  colorCodeInput.value = color;
}

In the code above, we first select the color-code input element using document.querySelector. We then create the updateColorCode function that takes in a color parameter. Inside the function, we set the value of the color-code input element to the selected color.

Conclusion

In this tutorial, we have learned how to create a custom color picker using HTML, CSS, and JavaScript. We started by creating the HTML markup and styling it using CSS. We then generated the color swatches dynamically using JavaScript and updated the selected color code when the user selects a color. This custom color picker can be used in any website or application, giving users the ability to choose the perfect color for their needs.