Colour Wheel

The colour wheel arranges hue around a circle from 0 to 360 degrees — red at 0, green around 120, blue around 240 — with saturation and lightness as separate sliders controlling how vivid and how bright each hue is. Dragging the hue slider moves around the wheel while saturation and lightness stay put, which makes it easy to explore a single hue's range or compare hues at matched vividness and brightness.

Every position updates the hex, RGB and HSL values simultaneously, along with the contrast ratio against a white background, so you can pick a colour by eye and immediately see whether it is usable for text.

HSL vs RGB

RGB describes a colour as how much red, green and blue light to mix — the format screens actually use, and a natural one for code, but not how people think about colour when choosing one. HSL separates the same colour into hue (which colour), saturation (how vivid or grey) and lightness (how close to black or white), which maps much more directly onto instructions like “a bit brighter” or “less saturated” that a hex code alone cannot express.

Both describe exactly the same colour space — this tool shows both because each is useful for a different task: HSL for choosing and adjusting, hex or RGB for pasting into code.