Оффлайн
- Регистрация
- 1 Мар 2015
- Сообщения
- 1,481
- Баллы
- 155
A color picker tool is an interactive web utility that lets users select colors from an image or a canvas and retrieve their HEX, RGB, or HSL values. It’s a fantastic tool for:
In this beginner-friendly tutorial, you’ll build your own color picker tool inspired by using HTML, CSS, and JavaScript — no frameworks or external libraries needed. By the end, you’ll have a functional web app where users can upload an image, pick colors, and copy color codes.
?️ Step 1: Create the HTML Structure
Let’s start with a simple HTML structure. We need:
Here’s the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Learn how to build a color picker tool with HTML, CSS, and JavaScript to select colors from images.">
<meta name="keywords" content="color picker, web development, HTML, CSS, JavaScript, tutorial">
<meta name="author" content="Your Name">
<title>Color Picker Tool</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Color Picker Tool</h1>
<p>Inspired by <a href="" target="_blank">ColorPickImage.com</a></p>
<input type="file" id="imageUpload" accept="image/*">
<canvas id="canvas"></canvas>
<div class="color-info">
<div id="colorPreview" class="color-preview"></div>
<p id="colorCode">Select a color</p>
<button id="copyButton" disabled>Copy Color Code</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
What’s happening here?
?️ Step 2: Style with CSS
Next, let’s style the page to make it clean and user-friendly. We’ll use flexbox for layout, add some hover effects, and ensure the canvas resizes responsively.
Here’s the CSS (styles.css):
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f4f4f4;
}
.container {
max-width: 800px;
margin: 0 auto;
text-align: center;
}
h1 {
color: #333;
}
input[type="file"] {
margin: 20px 0;
padding: 10px;
}
canvas {
max-width: 100%;
border: 2px solid #ddd;
cursor: crosshair;
}
.color-info {
margin-top: 20px;
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
}
.color-preview {
width: 50px;
height: 50px;
border: 2px solid #333;
border-radius: 5px;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
button:disabled {
background-color: #ccc;
cursor: not-allowed;
}
button:hover:not(:disabled) {
background-color: #0056b3;
}
@media (max-width: 600px) {
.color-info {
flex-direction: column;
}
}
Key styles:
?️ Step 3: Add JavaScript Functionality
Now, let’s bring the color picker to life with JavaScript. We’ll:
Here’s the JavaScript (script.js):
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const imageUpload = document.getElementById('imageUpload');
const colorPreview = document.getElementById('colorPreview');
const colorCode = document.getElementById('colorCode');
const copyButton = document.getElementById('copyButton');
let img = new Image();
// Handle image upload
imageUpload.addEventListener('change', (e) => {
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (event) => {
img.src = event.target.result;
img.onload = () => {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
};
};
reader.readAsDataURL(file);
}
});
// Pick color on canvas click
canvas.addEventListener('click', (e) => {
const rect = canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const pixel = ctx.getImageData(x, y, 1, 1).data;
const hex = rgbToHex(pixel[0], pixel[1], pixel[2]);
colorPreview.style.backgroundColor = hex;
colorCode.textContent = `HEX: ${hex}`;
copyButton.disabled = false;
copyButton.dataset.color = hex;
});
// Convert RGB to HEX
function rgbToHex(r, g, b) {
return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase()}`;
}
// Copy color code to clipboard
copyButton.addEventListener('click', () => {
const color = copyButton.dataset.color;
navigator.clipboard.writeText(color).then(() => {
alert('Color code copied to clipboard!');
});
});
How it works:
? Step 4: Test and Deploy
Support for RGB and HSL formats.
A zoom feature for precise picking.
A history of picked colors.
? Why Build Your Own?
Creating a color picker tool is a great way to practice canvas manipulation, event handling, and DOM interactions. Plus, you can customize it to suit your needs. For inspiration, check out ColorPickImage.com, a fantastic tool for color picking from images.
Have questions or ideas to improve this tool? Drop a comment below, and let’s build something colorful together! ?
Try the live demo here:
- ? Designers picking colors for branding or UI.
- ? Developers extracting colors from mockups.
- ?️ Artists exploring color palettes from images.
In this beginner-friendly tutorial, you’ll build your own color picker tool inspired by using HTML, CSS, and JavaScript — no frameworks or external libraries needed. By the end, you’ll have a functional web app where users can upload an image, pick colors, and copy color codes.
?️ Step 1: Create the HTML Structure
Let’s start with a simple HTML structure. We need:
- A canvas to display the uploaded image.
- An input for image uploads.
- A div to show the selected color and its code.
- A button to copy the color code to the clipboard.
Here’s the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Learn how to build a color picker tool with HTML, CSS, and JavaScript to select colors from images.">
<meta name="keywords" content="color picker, web development, HTML, CSS, JavaScript, tutorial">
<meta name="author" content="Your Name">
<title>Color Picker Tool</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Color Picker Tool</h1>
<p>Inspired by <a href="" target="_blank">ColorPickImage.com</a></p>
<input type="file" id="imageUpload" accept="image/*">
<canvas id="canvas"></canvas>
<div class="color-info">
<div id="colorPreview" class="color-preview"></div>
<p id="colorCode">Select a color</p>
<button id="copyButton" disabled>Copy Color Code</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
What’s happening here?
- The lets users upload an image.
- The will display the image and handle color picking.
- The .color-info section shows a preview of the selected color and its HEX code.
- The copy button will copy the color code to the clipboard.
?️ Step 2: Style with CSS
Next, let’s style the page to make it clean and user-friendly. We’ll use flexbox for layout, add some hover effects, and ensure the canvas resizes responsively.
Here’s the CSS (styles.css):
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f4f4f4;
}
.container {
max-width: 800px;
margin: 0 auto;
text-align: center;
}
h1 {
color: #333;
}
input[type="file"] {
margin: 20px 0;
padding: 10px;
}
canvas {
max-width: 100%;
border: 2px solid #ddd;
cursor: crosshair;
}
.color-info {
margin-top: 20px;
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
}
.color-preview {
width: 50px;
height: 50px;
border: 2px solid #333;
border-radius: 5px;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
button:disabled {
background-color: #ccc;
cursor: not-allowed;
}
button:hover:not(:disabled) {
background-color: #0056b3;
}
@media (max-width: 600px) {
.color-info {
flex-direction: column;
}
}
Key styles:
- The canvas has a crosshair cursor to indicate color picking.
- The color preview is a small square that updates with the selected color.
- The button is styled with a hover effect and disabled state.
- Responsive design ensures the layout works on mobile devices.
?️ Step 3: Add JavaScript Functionality
Now, let’s bring the color picker to life with JavaScript. We’ll:
- Handle image uploads and draw the image on the canvas.
- Detect mouse clicks on the canvas to pick colors.
- Display the color and its HEX code.
- Enable copying the color code to the clipboard.
Here’s the JavaScript (script.js):
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const imageUpload = document.getElementById('imageUpload');
const colorPreview = document.getElementById('colorPreview');
const colorCode = document.getElementById('colorCode');
const copyButton = document.getElementById('copyButton');
let img = new Image();
// Handle image upload
imageUpload.addEventListener('change', (e) => {
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (event) => {
img.src = event.target.result;
img.onload = () => {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
};
};
reader.readAsDataURL(file);
}
});
// Pick color on canvas click
canvas.addEventListener('click', (e) => {
const rect = canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const pixel = ctx.getImageData(x, y, 1, 1).data;
const hex = rgbToHex(pixel[0], pixel[1], pixel[2]);
colorPreview.style.backgroundColor = hex;
colorCode.textContent = `HEX: ${hex}`;
copyButton.disabled = false;
copyButton.dataset.color = hex;
});
// Convert RGB to HEX
function rgbToHex(r, g, b) {
return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase()}`;
}
// Copy color code to clipboard
copyButton.addEventListener('click', () => {
const color = copyButton.dataset.color;
navigator.clipboard.writeText(color).then(() => {
alert('Color code copied to clipboard!');
});
});
How it works:
- When an image is uploaded, it’s loaded into the canvas using a FileReader.
- Clicking the canvas gets the pixel data at the click position using ctx.getImageData.
- The RGB values are converted to a HEX code and displayed.
- The copy button uses the Clipboard API to copy the HEX code.
? Step 4: Test and Deploy
- Test locally: Save the three files (index.html, styles.css, script.js) in a folder and open index.html in a browser. Upload an image, click to pick a color, and copy the HEX code.
- Deploy: Host your tool on platforms like GitHub Pages, Netlify, or Vercel for free.
- Enhance: Want to take it further? Add features like:
Support for RGB and HSL formats.
A zoom feature for precise picking.
A history of picked colors.
? Why Build Your Own?
Creating a color picker tool is a great way to practice canvas manipulation, event handling, and DOM interactions. Plus, you can customize it to suit your needs. For inspiration, check out ColorPickImage.com, a fantastic tool for color picking from images.
Have questions or ideas to improve this tool? Drop a comment below, and let’s build something colorful together! ?
Try the live demo here: