Color Picker Tool in HTML, CSS and JavaScript
The Color Picker Tool in HTML, CSS, JavaScript is a basic and effective effective component that enables users to choose colors and receive the matching Hexadecimal (HEX), RGB, RGBA, and HSL values.
For a web designer, it is important to use a good color picker. In this article, I am going to give you the free source codes, which you can use to develop your own color picker tool. The goal of writing this tutorial is to assist you in integrating this tool into any of your projects to improve overall appearance.
Features
JV Color Picker Tool in comes with a range of features that make it versatile and user-friendly:
- Cross-Browser Compatibility: This tool is compatible with all modern browsers.
- Responsive Design: Our color picker is fully optimized to be used in both desktop and mobile based user interface (UI).
- Integration with CMS: This tool can be easily integrated with most of popular CMS platforms such as WordPress, Joomla or custom made HTML based interfaces.
- Customizable: This tool is flexible in terms of layout and use, so you can retune the Tool to match your website design.
Technologies Used
The Color Picker Tool is built using the following technologies:
- HTML
- CSS
- JavaScript
Video Preview
Here is a brief video overview of the Color Picker Tool in HTML, CSS, JavaScript which will also explain you about its working and how to include it in your project.
Steps to Build Color Picker
It is very easy to make the Color Picker Tool in HTML, CSS, JavaScript from JV Source Codes. Follow these steps:
- Create a Project Folder: First, create a new folder on your computer and label it “Color Picker.”
- Create index.html: Within the directory of “Color Picker”, create an HTML file we’ll call index.html.
- Create style.css: In the same folder, create a CSS file which name is style.css.
- Create script.js: Last but not the least, make a JavaScript file called script.js to manage the roles performed by the colour selection tool.
- Copy & Paste: Just Copy and Paste HTML, CSS and JavaScript Code, provided below.
To implement code you may need VS Code Installation.
HTML
Here is the HTML code that is used for making Color Picker Tool:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color Picker</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="header">
<h1>Color Picker Tool</h1>
</div>
<div class="color-picker-container">
<div id="colorPicker" class="color-picker"></div>
<div id="color-indicator" class="color-indicator"></div>
</div>
<div id="color-values">
<h3>Current Color Values:</h3>
<div class="color-value-item">
<p id="currentColorHex">Hex: <span> #ab0089 </span></p>
<button class="copy-btn" data-target="#currentColorHex">COPY</button>
</div>
<div class="color-value-item">
<p id="currentColorRGB">RGB: <span> 171, 0, 137 </span></p>
<button class="copy-btn" data-target="#currentColorRGB">COPY</button>
</div>
<div class="color-value-item">
<p id="currentColorRGBA">RGBA: <span> 171, 0, 137, 1 </span></p>
<button class="copy-btn" data-target="#currentColorRGBA">COPY</button>
</div>
<div class="color-value-item">
<p id="currentColorHSL">HSL: <span> 312, 100%, 34% </span></p>
<button class="copy-btn" data-target="#currentColorHSL">COPY</button>
</div>
</div>
<div><h3>Convert Color Values:</h3></div>
<div>
<label for="hexInput">Hex:</label>
<input type="text" id="hexInput" value="#ab0089">
</div>
<div>
<label for="rgbInput">RGB:</label>
<input type="text" id="rgbInput" value="171, 0, 137">
</div>
<div>
<label for="rgbaInput">RGBA:</label>
<input type="text" id="rgbaInput" value="171, 0, 137, 1">
</div>
<div>
<label for="hslInput">HSL:</label>
<input type="text" id="hslInput" value="312, 100%, 34%">
</div>
<div class="alpha-slider-container">
<label for="alphaSlider">Alpha:</label>
<input type="range" id="alphaSlider" class="alpha-slider" min="0.0" max="1" step="0.01" value="1">
<span id="alphaValue">1</span>
</div>
</div>
<!-- Swiper JS Library -->
<script src="https://cdn.jsdelivr.net/npm/@jaames/iro@5"></script>
<script src="script.js" defer></script>
</body>
</html>CSS
The CSS of the Color Picker Tool for which one needs to style the tool in order to make it attractive and user-friendly. Below is the CSS code:
/* Your existing CSS code */
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: top;
min-height: 100vh;
padding: 0px 15px 15px 15px;
background-color: #f5f5f5;
font-family: Arial, sans-serif;
}
.container {
max-width: 600px;
width: 100%;
padding: 0px 15px 15px 15px;
margin: 20px;
border: 1px solid #ddd;
align-items: center;
border-radius: 10px;
background-color: #fff;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}
.header {
text-align: center;
margin-bottom: 20px;
}
.color-picker-container {
display: flex;
justify-content: center;
gap: 40px;
margin-bottom: 60px;
}
.color-picker {
width: 180px;
height: 180px;
}
.color-indicator {
width: 160px;
height: 160px;
border-radius: 10px;
margin-top: 10px;
border: 2px solid #000;
background-color: rgba(171, 0, 137, 1); /* Initial color */
}
#color-values {
margin-bottom: 20px;
}
.color-value-item {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
#color-values p {
margin: 0;
font-size: 14px;
width: 250px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
#color-values button {
padding: 2px 4px;
border: none;
border-radius: 5px;
background-color: #007bff;
color: white;
cursor: pointer;
}
#color-values button:hover {
background-color: #0056b3;
}
h3 {
margin-bottom: 10px;
}
label {
display: block;
margin-bottom: 4px;
font-weight: bold;
}
input[type="text"] {
width: calc(100% - 20px);
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
.alpha-slider-container {
display: flex;
align-items: center;
gap: 10px;
}
.alpha-slider {
flex: 1;
background: linear-gradient(to right, rgba(171, 0, 137, 0) 0%, rgba(171, 0, 137, 1) 100%);
-webkit-appearance: none;
height: 8px;
border-radius: 5px;
border: 1px solid #ddd;
outline: none;
cursor: pointer;
margin-right: 10px;
}
.alpha-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #ab0089;
cursor: pointer;
border: 2px solid #333;
}
.alpha-slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: #ab0089;
cursor: pointer;
}
.alpha-slider::-ms-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: #ab0089;
cursor: pointer;
}JavaScript
Here’s the JavaScript code:
document.addEventListener('DOMContentLoaded', () => {
const colorPicker = new iro.ColorPicker("#colorPicker", {
width: 180,
color: "#ab0089",
borderWidth: 2
});
const colorIndicator = document.getElementById('color-indicator');
const hexInput = document.getElementById('hexInput');
const rgbInput = document.getElementById('rgbInput');
const rgbaInput = document.getElementById('rgbaInput');
const hslInput = document.getElementById('hslInput');
const alphaSlider = document.getElementById('alphaSlider');
const alphaValue = document.getElementById('alphaValue');
let alphaValueNumber = 1;
function updateColorInputs(color) {
hexInput.value = color.hexString;
rgbInput.value = `${color.rgb.r}, ${color.rgb.g}, ${color.rgb.b}`;
updateRGBAInput(color);
hslInput.value = `${color.hsl.h}, ${color.hsl.s}%, ${color.hsl.l}%`;
}
function updateColorValues(color) {
alphaValueNumber = parseFloat(alphaSlider.value);
const rgbaArray = [color.rgb.r, color.rgb.g, color.rgb.b, alphaValueNumber];
colorIndicator.style.backgroundColor = `rgba(${rgbaArray.join(', ')})`;
document.querySelector('#currentColorHex span').textContent = color.hexString;
document.querySelector('#currentColorRGB span').textContent = `${color.rgb.r}, ${color.rgb.g}, ${color.rgb.b}`;
document.querySelector('#currentColorRGBA span').textContent = rgbaArray.join(', ');
document.querySelector('#currentColorHSL span').textContent = `${color.hsl.h}, ${color.hsl.s}%, ${color.hsl.l}%`;
alphaValue.textContent = alphaValueNumber.toFixed(2);
}
function updateRGBAInput(color) {
rgbaInput.value = `${color.rgb.r}, ${color.rgb.g}, ${color.rgb.b}, ${alphaSlider.value}`;
}
colorPicker.on('color:change', (color) => {
updateColorInputs(color);
updateColorValues(color);
});
hexInput.addEventListener('change', () => {
colorPicker.color.hexString = hexInput.value;
});
rgbInput.addEventListener('change', () => {
const rgbValues = rgbInput.value.split(',').map(val => parseInt(val.trim()));
colorPicker.color.rgb = { r: rgbValues[0], g: rgbValues[1], b: rgbValues[2] };
});
rgbaInput.addEventListener('change', () => {
const rgbaValues = rgbaInput.value.split(',').map(val => parseFloat(val.trim()));
colorPicker.color.rgb = { r: rgbaValues[0], g: rgbaValues[1], b: rgbaValues[2] };
alphaSlider.value = rgbaValues[3];
alphaValue.textContent = rgbaValues[3].toFixed(2);
updateColorValues(colorPicker.color);
});
hslInput.addEventListener('change', () => {
const hslValues = hslInput.value.split(',').map(val => parseFloat(val.trim()));
colorPicker.color.hsl = { h: hslValues[0], s: hslValues[1], l: hslValues[2] };
});
alphaSlider.addEventListener('input', () => {
alphaValue.textContent = alphaSlider.value;
updateRGBAInput(colorPicker.color);
updateColorValues(colorPicker.color);
});
document.querySelectorAll('.copy-btn').forEach(btn => {
btn.addEventListener('click', () => {
const targetText = document.querySelector(btn.getAttribute('data-target') + ' span').textContent;
navigator.clipboard.writeText(targetText).then(() => {
alert('Copied: ' + targetText);
});
});
});
});Download Source Code
You can download the full source code for the Color Picker Tool including HTML, CSS, and JavaScript files from the button below. The code comes without any license fees and is free to use in any project.
Conclusion
Color Picker Tool in is a must-have tool for any web developer. Including this tool in your website helps improve the experience of the users.
Feel free to integrate this code into your projects and if you think it helped you, kindly give credit to JV Source Codes through linking back to this article. This helps others when searching this resource, which is also an encouragement for me to continue creating fresh, valuable content.
If you have any problems or want to change something, please, leave the comment and I’ll be glad to help you.
Do not forget to subscribe our channel if you want to see more videos like this and more resources for your learning. Happy Coding!
