Learn how to create a Color Picker for your website with our step-by-step guide using HTML, CSS, and JavaScript. Perfect for web designers and developers.
Table of Contents
Color plays a pivotal role in web design. It has the power to evoke emotions, establish brand identity, and significantly enhance user experience. The ability to create a Color Picker using HTML, CSS, and JavaScript is a valuable skill for both budding web designers and seasoned developers. In this comprehensive tutorial, we will guide you through the step-by-step process of crafting your own Color Picker. Whether you're aiming to finesse your web design or dive deeper into the world of web development, this tutorial is designed to equip you with the knowledge and tools you need. So, let's embark on this journey and bring vibrant colors to your web projects!
Join My Telegram Channel to Download the Project Source Code: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our color picker.
After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
1. <!DOCTYPE html>: This is the document type declaration and it tells the web browser that this is an HTML5 document.
2. <html lang="en">: This is the opening tag for the HTML document. It specifies that the document's primary language is English.
3. <head>: This is the opening tag for the head section of the HTML document. The head section typically contains meta-information and links to external resources.
- <meta charset="UTF-8">: This meta tag specifies the character encoding for the document as UTF-8, which is a widely used character encoding for handling text in various languages.
- <title>Color Picker</title>: This is the title of the web page that will be displayed in the browser's title bar or tab. In this case, it's "Color Picker."
- <meta name="viewport" content="width=device-width, initial-scale=1">: This meta tag is used to control how the webpage is displayed on different devices. It sets the initial zoom level to 1 and adapts the width to the device's screen width.
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">: This is a link to an external CSS (Cascading Style Sheets) file named "normalize.min.css." It's often used to reset and standardize default browser styles to ensure consistent styling across different browsers.
- <link rel="stylesheet" href="styles.css">: This is another link to an external CSS file named "styles.css." It's used to apply custom styles to the HTML elements on the page.
4. <body>: This is the opening tag for the body section of the HTML document. The body section contains the content that will be displayed on the webpage.
5. <div class="wrap">: This is a <div> element with a class attribute set to "wrap." It's often used to group and style content together.
6. <div class="half">: This is another <div> element with a class attribute set to "half." It's a part of the "wrap" div and contains some content related to the color picker.
7. <div class="colorPicker"></div>: This is an empty <div> element with a class attribute set to "colorPicker." It's probably a placeholder for a color picker interface that will be generated using JavaScript.
8. <div class="half-readout">: This is another <div> element with a class attribute set to "half-readout." It's another part of the "wrap" div and contains content related to displaying color information.
9. <span class="title">Selected Color:</span>: This is a <span> element with a class attribute set to "title." It contains the text "Selected Color:" which is a label for the color information.
10. <div id="values"></div>: This is an empty <div> element with an id attribute set to "values." It's a placeholder where the selected color's values (e.g., RGB, HSL) will be displayed dynamically using JavaScript.
11. <input id="hexInput" style="outline: none;border: 0;"></input>: This is an <input> element with an id attribute set to "hexInput." It's a text input field where the user may be able to input a color value in hexadecimal format (e.g., #RRGGBB). The style attribute is used to remove the default input field styling (outline and border).
12. <script src='https://cdn.jsdelivr.net/npm/@jaames/iro/dist/iro.min.js'></script>: These are script tags that include external JavaScript files. The first script tag is linking to a JavaScript library called "iro.min.js" hosted on jsDelivr. This library is used for implementing the color picker functionality.
13. <script src="script.js"></script>: This is another script tag that links to an external JavaScript file named "script.js." This file contains custom JavaScript code for handling interactions with the color picker and updating the display.
This is the basic structure of our color picker using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the color picker is in place, the next step is to add styling to the color picker using CSS.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to style our color picker.
1. body: This selector targets the <body> element of the HTML document. It sets various styles for the entire webpage.
- color: rgb(0, 0, 0);: This sets the text color to black (RGB color value: 0, 0, 0).
- background-color: #fff;: This sets the background color to white (#fff).
- background-size: 8px 8px, 8px 8px;: This specifies the size of background images. It sets two background images, each with a size of 8 pixels by 8 pixels. This is often used for creating patterns.
- background-position: center, center;: This positions the background images in the center of the element.
- background-image: linear-gradient(#ebf4f9 1px, transparent 1px),linear-gradient(90deg, #ebf4f9 1px, transparent 1px);: This sets two background images using linear gradients. These gradients are used to create a checkered pattern with alternating light blue (#ebf4f9) and transparent (clear) squares. The first gradient creates horizontal lines, and the second creates vertical lines.
- line-height: 150%;: This sets the line height for text within the <body> element to 150% of the font size. It increases the spacing between lines of text.
2. .wrap: This selector targets elements with the class "wrap." It's often used to style a container that wraps other content.
- min-height: 100vh;: This sets the minimum height of the element to 100% of the viewport height. This ensures that the container takes up at least the entire height of the viewport.
- max-width: 720px;: This sets the maximum width of the container to 720 pixels, limiting how wide it can become.
- margin: 0px auto;: This centers the container horizontally by setting the left and right margins to "auto."
- display: flex;: This uses flexbox layout for the container.
- flex-direction: row;: This sets the flex direction to "row," meaning that the child elements inside the container will be arranged in a horizontal row.
- align-items: center;: This centers the child elements vertically within the container.
- justify-content: center;: This centers the child elements horizontally within the container.
3. .wrap .half: This selector targets elements with the class "half" that are descendants of elements with the class "wrap."
- width: 50%;: This sets the width of elements with the class "half" to 50% of their parent's width.
- padding: 32px 0;: This sets top and bottom padding of 32 pixels and no left and right padding for elements with the class "half."
4. .title: This selector targets elements with the class "title."
- font-family: cursive;: This sets the font family to a cursive font style.
- line-height: 24px;: This sets the line height for text within elements with the class "title" to 24 pixels.
- display: block;: This makes the element a block-level element, causing it to start on a new line.
5. .readout: This selector targets elements with the class "readout."
- margin-top: 32px;: This adds a top margin of 32 pixels to elements with the class "readout."
- line-height: 180%;: This sets the line height for text within elements with the class "readout" to 180% of the font size.
6. #values: This selector targets the element with the ID "values."
- font-family: cursive;: This sets the font family to a cursive font style for the element with the ID "values."
- line-height: 150%;: This sets the line height for text within the element with the ID "values" to 150% of the font size.
7. .link: This selector targets elements with the class "link."
- margin-top: 16px;: This adds a top margin of 16 pixels to elements with the class "link."
8. .link a: This selector targets anchor (<a>) elements that are descendants of elements with the class "link."
- color: MediumSlateBlue;: This sets the text color of the anchor elements to "MediumSlateBlue," which is a predefined color.
9. .half-readout: This selector targets elements with the class "half-readout."
- position: relative;: This sets the positioning context to "relative," which allows you to position child elements relative to this element.
- display: block;: This makes the element a block-level element.
- bottom: 220px;: This positions the element 220 pixels from the bottom of its normal position.
- right: 20%;: This positions the element 20% from the right of its normal position.
- width: 50%;: This sets the width of elements with the class "half-readout" to 50% of their parent's width.
- align-items: center;: This centers the child elements vertically within the container.
- font-family: "Lucida Console", "Courier New", monospace;: This sets the font family to a monospace font stack, which is often used for code or terminal-like text.
- font-size: 0.8em;: This sets the font size to 0.8 times the default font size.
10. .IroColorPicker: This selector targets elements with the class "IroColorPicker."
- display: block;: This makes the element a block-level element.
- width: 50%;: This sets the width of elements with the class "IroColorPicker" to 50% of their parent's width.
- position: absolute;: This sets the positioning context to "absolute," allowing precise positioning within its containing element.
- right: 30%;: This positions the element 30% from the right of its containing element.
- bottom: 30%;: This positions the element 30% from the bottom of its containing element.
11. @media only screen and (min-width: 700px): This is a media query that targets screens with a minimum width of 700 pixels. The styles inside this query apply only when the screen width matches the condition.
- .half-readout: Inside the media query, it adjusts the font size for elements with the class "half-readout" to 1em (the default font size). This change in font size applies only to screens with a width of 700 pixels or more.
This will give our color picker an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
body {
color: rgb(0, 0, 0);
background-color: #fff;
background-size: 8px 8px, 8px 8px;
background-position: center, center;
background-image: linear-gradient(#ebf4f9 1px, transparent 1px),linear-gradient(90deg, #ebf4f9 1px, transparent 1px);
line-height: 150%;
}
.wrap {
min-height: 100vh;
max-width: 720px;
margin: 0px auto;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.wrap .half {
width: 50%;
padding: 32px 0;
}
.title {
font-family: cursive;
line-height: 24px;
display: block;
padding: 8px 0;
}
.readout {
margin-top: 32px;
line-height: 180%;
}
#values {
font-family: cursive;
line-height: 150%;
}
.link {
margin-top: 16px;
}
.link a {
color: MediumSlateBlue;
}
.half-readout{
position: relative;
display: block;
bottom: 220px;
right: 20%;
width: 50%;
align-items: center;
font-family: "Lucida Console", "Courier New", monospace;
font-size: 0.8em;
}
.IroColorPicker{
display: block;
width: 50%;
position: absolute;
right: 30%;
bottom: 30%;
}
@media only screen and (min-width: 700px) {
.half-readout{
font-size: 1em;
}
} Step 3 (JavaScript Code):
Finally, we need to create a function in JavaScript. This JavaScript code sets up a color picker interface using the iro.js library and updates the displayed color information based on user interactions.
1. First, it creates a color picker object and associates it with an HTML element with the class "colorPicker". The color picker has various configuration options:
- width: Sets the width of the color picker to 280 pixels.
- color: Sets the initial color of the color picker to red (RGB value: "rgb(255, 0, 0)").
- borderWidth and borderColor: Customize the appearance of the color picker's border.
2. It retrieves two HTML elements with the IDs "values" and "hexInput" using the getElementById method. These elements are used to display color information and input a hexadecimal color value, respectively.
3. The code sets up an event listener for the color picker's events "color:init" and "color:change". When these events occur (typically when the user interacts with the color picker), a callback function is executed. This callback function updates the content of the "values" element to display the color information in three different formats: hexadecimal, RGB, and HSL. These values are joined together with line breaks ("<br>") and inserted into the "values" element. Additionally, it updates the value of the "hexInput" element with the current hexadecimal color value.
4. Another event listener is added to the "hexInput" element, listening for the "change" event. When the user enters a new value in the "hexInput" input field and presses Enter or blurs the input field, this event is triggered. The event listener updates the color picker's color to the one entered by the user in hexadecimal format.
Create a JavaScript file with the name script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.
var colorPicker = new iro.ColorPicker(".colorPicker", {
width: 280,
color: "rgb(255, 0, 0)",
borderWidth: 1,
borderColor: "#fff" });
var values = document.getElementById("values");
var hexInput = document.getElementById("hexInput");
colorPicker.on(["color:init", "color:change"], function (color) {
values.innerHTML = [
"hex: " + color.hexString,
"rgb: " + color.rgbString,
"hsl: " + color.hslString].
join("<br>");
hexInput.value = color.hexString;
});
hexInput.addEventListener('change', function () {
colorPicker.color.hexString = this.value;
});Final Output:
Conclusion:
Congratulations! You've successfully created a Color Picker using HTML, CSS, and JavaScript. This tool will be a valuable asset in your web development projects, allowing you to choose and preview colors with ease. Experiment with different designs and features to make it uniquely yours.
Start designing with confidence and add vibrant colors to your web creations. Happy coding!
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
