How to Build a Color Picker Tool with HTML, CSS, and JavaScript

#html #css #javascript

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:

🎨 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 ColorPickImage.com 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="https://colorpickimage.com/" 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: Color Pick from Image

DEV Community

How to Build a Color Picker Tool with HTML, CSS, and JavaScript

Top comments (0)