Live stream set for 2025-07-04 at 14:00:00 Eastern
Ask questions in the live chat about any programming or lifestyle topic.
This livestream will be on YouTube or you can watch below.
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 (YouTube)
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.
Edward is a software engineer, web developer, and author dedicated to helping people achieve their personal and professional goals through actionable advice and real-world tools.