Live stream set for 2025-07-14 at 14:00:00 Eastern
Ask questions in the live chat about any programming or lifestyle topic.
This livestream will be on YouTube or you can watch below.
Categories: HTML, Web Development, JavaScript, Beginner Tutorials
Tags: HTML5, color picker, input element, JavaScript, beginner tutorial, web development
Introduction
When building websites, it’s often helpful to provide users with a simple and intuitive way to choose colors for text, backgrounds, or other elements. One way to do this is by using the HTML5 color picker. HTML5 introduced the <input> element with the type color, allowing you to easily implement a color picker in your web projects.
In this tutorial, I’ll walk you through how to create a basic HTML5 color picker, show you how it works, and explain how it integrates with JavaScript to make your web pages interactive. You’ll be able to create your own color picker in no time, whether you’re working on a simple design or a more complex web application.
Before we dive in, don’t forget to check out my book on JavaScript and my course if you want to further your skills. I’m also available for one-on-one programming tutorials!
What is the HTML5 Color Picker?
The HTML5 <input type="color"> element allows users to select a color from a color palette. It’s a convenient and user-friendly way to enable color selection without having to implement complex JavaScript libraries or additional plugins.
Here’s an example of a basic color picker:
<input type="color" id="color-picker">When this code is placed on a webpage, it renders a color input element, which, when clicked, opens the color selection interface provided by the browser.
How to Use the HTML5 Color Picker
Let’s break down how you can implement a color picker in your website and make it interactive.
1. Basic HTML Code for the Color Picker
First, add the following code to your HTML document. This will create a simple color input field and a section to display the selected color.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Color Picker</title>
</head>
<body>
<h2>Choose a Color</h2>
<input type="color" id="color-picker" value="#ff5733">
<div id="color-swatch" style="width: 100px; height: 100px; background-color: #ff5733; border: 1px solid #ccc;"></div>
<script>
const colorPicker = document.getElementById('color-picker');
const colorSwatch = document.getElementById('color-swatch');
colorPicker.addEventListener('input', (event) => {
const selectedColor = event.target.value;
colorSwatch.style.backgroundColor = selectedColor;
});
</script>
</body>
</html>
Explanation:
- The
<input>element of typecoloris used to create the color picker. - The
<div>withid="color-swatch"displays the currently selected color as a swatch. - The JavaScript listens for changes to the color picker and updates the color swatch accordingly.
2. Customizing the Color Picker
You can customize the color picker in many ways, like setting a default color or limiting the color choices. By adjusting the value attribute of the color input element, you can set an initial color.
<input type="color" id="color-picker" value="#ff5733">Here, #ff5733 is the default color that will appear when the page loads.
Adding Interactivity with JavaScript
The color picker doesn’t just select a color — it can be used in combination with JavaScript to change elements of your webpage dynamically. For instance, you could use the color selected by the user to change the background color of a section, text, or button.
1. Color Picker with Dynamic Background Change
Here’s a simple example that changes the background color of a section based on the selected color:
<div id="content" style="width: 100%; height: 200px; background-color: #ffffff;">
<h3>This section's background color will change</h3>
</div>
<input type="color" id="color-picker">
In JavaScript, you can write the following code:
const colorPicker = document.getElementById('color-picker');
const contentSection = document.getElementById('content');
colorPicker.addEventListener('input', (event) => {
const selectedColor = event.target.value;
contentSection.style.backgroundColor = selectedColor;
});
This will allow the user to choose a color, and the background of the <div> with the id="content" will dynamically update as they pick different colors.
Screenshots of Color Picker in Action
Watch the Live Screencast
To get a more detailed step-by-step walkthrough, watch this YouTube live screencast where I demonstrate how to create and use the HTML5 color picker in real-time.
(Insert YouTube embed code here for the live screencast.)
More Resources for Learning JavaScript
If you’re looking to dive deeper into web development and JavaScript, I recommend checking out my book on JavaScript, Learning JavaScript. It’s packed with beginner-friendly content to get you started with JavaScript and web development.
For an in-depth learning experience, you can also check out my course on JavaScript, Learning JavaScript, where we cover topics like variables, functions, objects, arrays, and more.
If you’re looking for personalized help, I’m available for one-on-one programming tutorials. Whether you need assistance with JavaScript, HTML, or any other topic, feel free to contact me here.
Conclusion
The HTML5 <input type="color"> element is a powerful and simple tool to implement color pickers on your website. It’s easy to use, and with just a little JavaScript, you can make your website interactive by letting users select and apply colors to various elements.
I hope you found this tutorial helpful! Feel free to reach out if you have any questions, or if you’d like to learn more about JavaScript and web development.
Have fun coding!
Edward is a software engineer, web developer, and author dedicated to helping people achieve their personal and professional goals through actionable advice and real-world tools.