A color wheel picker is an interactive web tool that allows users to select colors from a circular color spectrum, often used to generate harmonious color palettes or pick specific hues. It’s a must-have for:
- 🎨 Designers creating cohesive color schemes for branding or UI.
- 🖌️ Artists exploring color relationships for digital art.
- 💻 Developers building intuitive color selection interfaces.
In this beginner-friendly tutorial, you’ll build your own color wheel picker inspired by colorwheelpicker.com using HTML, CSS, and JavaScript — no frameworks or external libraries required. By the end, you’ll have a functional tool where users can click or drag on a color wheel to select colors and view their HEX and RGB values.
🛠️ Step 1: Create the HTML Structure
Let’s start with a simple HTML structure. We need:
A canvas to render the color wheel.
A div to display the selected color and its HEX/RGB codes.
A button to copy the color code to the clipboard.
Here’s the HTML (index.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 wheel picker tool with HTML, CSS, and JavaScript to select colors interactively.">
<meta name="keywords" content="color wheel picker, web development, HTML, CSS, JavaScript, tutorial">
<meta name="author" content="Your Name">
<title>Color Wheel Picker Tool</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Color Wheel Picker Tool</h1>
<p>Inspired by <a href="https://colorwheelpicker.online" target="_blank">Color Wheel Picker</a></p>
<canvas id="colorWheel" width="300" height="300"></canvas>
<div class="color-info">
<div id="colorPreview" class="color-preview"></div>
<p id="colorCode">Select a color</p>
<button id="copyButton" disabled>Copy HEX Code</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
What’s happening here?
The element will display the color wheel.
The .color-info section shows a preview of the selected color and its HEX/RGB codes.
The copy button allows users to copy the HEX code to the clipboard.
Meta tags are included for SEO optimization.
🛠️ Step 2: Style with CSS
Next, let’s style the page to make it clean and user-friendly. We’ll center the content, style the canvas, and ensure the layout is responsive.
Here’s the CSS (styles.css):
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f4f4f4;
}
.container {
max-width: 600px;
margin: 0 auto;
text-align: center;
}
h1 {
color: #333;
}
canvas {
border: 2px solid #ddd;
border-radius: 50%;
cursor: crosshair;
margin: 20px 0;
}
.color-info {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
margin-top: 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) {
canvas {
width: 250px;
height: 250px;
}
.color-info {
flex-direction: column;
}
}
Key styles:
The canvas is styled as a circle with border-radius: 50% and a crosshair cursor for color picking.
The color preview is a small square that updates with the selected color.
The button has a hover effect and disabled state.
Responsive design adjusts the canvas size and layout for mobile devices.
🛠️ Step 3: Add JavaScript Functionality
Now, let’s create the color wheel and enable color picking. We’ll:
Draw a color wheel on the canvas using HSL colors.
Detect mouse clicks or drags to pick colors.
Display the selected color and its HEX/RGB codes.
Enable copying the HEX code to the clipboard.
Here’s the JavaScript (script.js):
const canvas = document.getElementById('colorWheel');
const ctx = canvas.getContext('2d');
const colorPreview = document.getElementById('colorPreview');
const colorCode = document.getElementById('colorCode');
const copyButton = document.getElementById('copyButton');
// Draw color wheel
function drawColorWheel() {
const radius = canvas.width / 2;
const imageData = ctx.createImageData(canvas.width, canvas.height);
for (let x = 0; x < canvas.width; x++) {
for (let y = 0; y < canvas.height; y++) {
const dx = x - radius;
const dy = y - radius;
const distance = Math.sqrt(dx * dx + dy * dy);
const angle = Math.atan2(dy, dx);
if (distance <= radius) {
const hue = (angle + Math.PI) / (2 * Math.PI);
const saturation = distance / radius;
const rgb = hslToRgb(hue, saturation, 0.5);
const index = (y * canvas.width + x) * 4;
imageData.data[index] = rgb[0];
imageData.data[index + 1] = rgb[1];
imageData.data[index + 2] = rgb[2];
imageData.data[index + 3] = 255;
}
}
}
ctx.putImageData(imageData, 0, 0);
}
// Convert HSL to RGB
function hslToRgb(h, s, l) {
let r, g, b;
if (s === 0) {
r = g = b = l;
} else {
const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
const p = 2 * l - q;
r = hueToRgb(p, q clásico, h + 1/3);
g = hueToRgb(p, q, h);
b = hueToRgb(p, q, h - 1/3);
}
return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
}
function hueToRgb(p, q, t) {
if (t < 0) t += 1;
if (t > 1) t -= 1;
if (t < 1/6) return p + (q - p) * 6 * t;
if (t < 1/2) return q;
if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
return p;
}
// Convert RGB to HEX
function rgbToHex(r, g, b) {
return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase()}`;
}
// Pick color on canvas interaction
function pickColor(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} | RGB: (${pixel[0]}, ${pixel[1]}, ${pixel[2]})`;
copyButton.disabled = false;
copyButton.dataset.color = hex;
}
// Event listeners for color picking
let isDragging = false;
canvas.addEventListener('mousedown', (e) => {
isDragging = true;
pickColor(e);
});
canvas.addEventListener('mousemove', (e) => {
if (isDragging) pickColor(e);
});
canvas.addEventListener('mouseup', () => {
isDragging = false;
});
canvas.addEventListener('mouseleave', () => {
isDragging = false;
});
// Copy color code to clipboard
copyButton.addEventListener('click', () => {
const color = copyButton.dataset.color;
navigator.clipboard.writeText(color).then(() => {
alert('HEX code copied to clipboard!');
});
});
// Initialize color wheel
drawColorWheel();
How it works:
The drawColorWheel function creates a color wheel by mapping HSL colors to a circular canvas, with hue determined by the angle and saturation by the distance from the center.
The hslToRgb and hueToRgb functions convert HSL values to RGB for rendering.
Mouse events (mousedown, mousemove, mouseup) allow users to click or drag to pick colors, retrieving pixel data with ctx.getImageData.
The selected color’s HEX and RGB values are displayed, and the HEX code can be copied using the Clipboard API.
🚀 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. Click or drag on the color wheel to pick colors 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 HSL or CMYK color formats.
A palette generator for complementary or analogous colors.
A brightness slider to adjust the lightness value.
🌟 Why Build Your Own?
Creating a color wheel picker is a fantastic way to practice canvas rendering, color theory, and event handling in JavaScript. It’s also a versatile tool for designers and developers. For inspiration, check out Color Wheel Picker, a powerful tool for generating random palettes and extracting colors.
Have questions or ideas to improve this tool? Drop a comment below, and let’s create something vibrant together!
Try the live demo here: Color Wheel Picker
Top comments (0)