How to Create an HTML5 Round Color Picker (No Extensions or Plugins Required)
If you’ve ever wanted a sleek, interactive round color picker for your web app or design project—without relying on third-party plugins or extensions—this guide is for you! We’ll build one using just HTML5, CSS3, and JavaScript.
🛠 What You’ll Need
- Basic knowledge of HTML, CSS, and JavaScript
- A modern web browser
- A text editor (VS Code, Sublime Text, etc.)
🎯 What We’ll Build
We’ll create a fully functional round color picker that users can interact with to select colors from a circular spectrum. The selected color will display in real-time.
💻 The Code (Step-by-Step)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Round Color Picker</title>
<style>
body {
font-family: sans-serif;
text-align: center;
padding: 20px;
}
canvas {
border-radius: 50%;
cursor: crosshair;
}
#selected-color {
margin-top: 20px;
width: 100px;
height: 100px;
display: inline-block;
border-radius: 50%;
border: 2px solid #333;
}
</style>
</head>
<body>
<h2>HTML5 Round Color Picker</h2>
<canvas id="color-wheel" width="300" height="300"></canvas>
<div id="selected-color"></div>
<script>
const canvas = document.getElementById('color-wheel');
const ctx = canvas.getContext('2d');
const selectedColor = document.getElementById('selected-color');
function drawColorWheel() {
const radius = canvas.width / 2;
const image = ctx.createImageData(canvas.width, canvas.height);
const data = image.data;
for (let y = -radius; y < radius; y++) {
for (let x = -radius; x < radius; x++) {
const dx = x / radius;
const dy = y / radius;
const distance = dx * dx + dy * dy;
if (distance <= 1) {
const angle = Math.atan2(dy, dx);
const hue = (angle * 180 / Math.PI + 360) % 360;
const sat = Math.sqrt(distance);
const rgb = hsvToRgb(hue, sat, 1);
const px = ((y + radius) * canvas.width + (x + radius)) * 4;
data[px] = rgb[0];
data[px + 1] = rgb[1];
data[px + 2] = rgb[2];
data[px + 3] = 255;
}
}
}
ctx.putImageData(image, 0, 0);
}
function hsvToRgb(h, s, v) {
let f = (n, k = (n + h / 60) % 6) =>
v - v * s * Math.max(Math.min(k, 4 - k, 1), 0);
return [f(5) * 255, f(3) * 255, f(1) * 255];
}
canvas.addEventListener('click', function (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 color = `rgb(${pixel[0]}, ${pixel[1]}, ${pixel[2]})`;
selectedColor.style.backgroundColor = color;
});
drawColorWheel();
</script>
</body>
</html>
📸 Screenshots
Here’s a preview of what the final color picker looks like in the browser:
🎥 Live Screencast
Watch the full build tutorial below! I walk through every step of creating this round color picker from scratch.
📚 Want to Learn More JavaScript?
If you’re interested in building interactive front-end components like this, you’ll love my book:
➡ “Learning JavaScript” – a beginner-friendly guide with real-world projects.
📖 Available now on Amazon and other major retailers.
Or take the companion online course:
🎓 Learning JavaScript (Course) – Learn hands-on with my practical tutorials and assignments.
👨🎓 Need 1-on-1 JavaScript Help?
I also offer personalized, 1-on-1 mentoring sessions via Zoom. Whether you’re stuck on a project or just getting started, I can help you level up quickly.
📧 Contact me directly at: Ojambo
Or send me a message via the contact form here.
🚀 Recommended Resources
Disclosure: Some of the links above are referral links. I may earn a commission if you make a purchase at no extra cost to you.
