Color Wheel

A color wheel with 360 degrees of hues.
These hues are the same across HSL, HSB, HSV, and HWB color spaces.

Source Code for this Sketch

const thickness = 80

function setup() {
	createCanvas(400, 400, P2D, canvas)
	colorMode(HSL)
	noStroke()
	describe("A color wheel for HSL reference")
	angleMode(DEGREES)
}

// radialpoint returns [x, y] coordinates at the
// edge of circle with radius r, at angle deg
// along the edge, with 0 degrees being north
function radialpoint(r, deg) {
	let x = cos(deg-90)*r
	let y = sin(deg-90)*r

	return [x, y]
}

// inRect checks whether the mouse's current position is
// inside the given rectangle (x, y) marks the top left
// corner, (w, h) are height and width measured to the
// right and downward
function inRect(x, y, w, h) {
	return (mouseX >= x && mouseX < x+w && mouseY >= y && mouseY < y+h)
}

// Initial hue
let degrees = 45

function draw() {
	background(100)
	translate(width/2, height/2)

	// color wheel
	for(let i = 0; i < 360; i++) {
		fill(i, 100, 50)
		arc(0, 0, 360, 360, i-90, i+1-90)
	}

	// Clear the center
	fill(100)
	circle(0, 0, 360-thickness)

	// lines
	fill(0)
	for(let i = 0; i<12; i++) {
		arc(0, 0, 360-thickness, 360-thickness, i*30-90, i*30+.5-90)
	}

	// Clear the center (but smaller)
	fill(100)
	circle(0, 0, 360-thickness*1.5)

	if (mouseIsPressed && inRect(0, 0, width, height)) {
		degrees = round(abs(atan2(mouseX-200, mouseY-200)-180))
	}

	// Labels
	fill(0)
	textSize(12)
	for(let i = 0; i<12; i++) {
		let xy = radialpoint(100, i*30)
		text(`${i*30}°`, xy[0]-10, xy[1])
	}

	// Color preview
	fill(degrees, 100, 50)
	circle(0, 0, 100)

	fill(0)
	textSize(18)
	text(degrees.toString()+"°", -5*degrees.toString().length, 6)

	// indicator
	let xy = radialpoint(180-thickness/4, degrees)
	fill(0)
	circle(xy[0], xy[1], 10)
	fill(100)
	circle(xy[0], xy[1], 8)
}

You may use all or part of the p5 code seen on this page for your own creations, without restriction. Attribution is appreciated but not required.

This sketch also includes the following sources: p5common.js . Sources are available under their respective licenses.

See all p5.js sketches