About the HSB Color Wheel Picker
A hex input field is precise but not very intuitive — picking a color by typing numbers doesn't match how most people actually think about color. This tool instead gives you a classic hue wheel plus a saturation/brightness square, the same interaction model used in professional design software like Photoshop and Figma, so you can pick a color visually by feel and get exact HEX, RGB, and HSB values back.
How it works
The outer ring represents hue as a full 360-degree color wheel; clicking or dragging on it selects a hue and updates the inner square, which represents that hue's full range of saturation (left to right) and brightness (bottom to top). Clicking anywhere in the square picks the exact saturation and brightness at that point. Behind the scenes, the picked hue/saturation/brightness (HSB, closely related to HSL) is converted to standard HEX and RGB values in real time, so all formats update together as you interact with either control.
Common use cases
- Picking a color visually and intuitively rather than by typing hex codes from memory
- Exploring a single hue's full range of saturation and brightness variations at once
- Matching the color-picking workflow designers already know from tools like Photoshop or Figma
- Teaching or learning the relationship between hue, saturation, and brightness interactively
- Quickly finding a specific 'shade of blue' or 'muted version of green' by feel rather than by formula
Tips for best results
The saturation/brightness square is the fastest way to explore a whole family of related colors — moving straight up increases brightness at constant saturation, moving straight right increases saturation at constant brightness, so if you like a color but want it slightly more muted or slightly darker, small movements along just one axis get you there predictably. Use the hue ring for big, dramatic changes in color family, and reserve the inner square for fine-tuning within a hue you've already settled on.
Frequently asked questions
HSB (hue, saturation, brightness — sometimes called HSV) and HSL (hue, saturation, lightness) are closely related but calculated slightly differently, particularly in how saturation is interpreted. HSB's brightness axis runs from black to the pure hue at full brightness, while HSL's lightness axis runs from black through the pure hue and continues to white, which is why the two models produce a different-shaped saturation/lightness square or triangle.
A color wheel maps much more closely to how people perceive and remember color relationships — 'a bit more orange' or 'a little darker' are far easier to execute by eye on a wheel than by mentally calculating the corresponding hex or RGB change.
Yes — a hex input field is included alongside the wheel and square, and entering a value there moves the wheel and square controls to match, so you can freely switch between visual picking and precise numeric entry.
The core wheel and square interaction focuses on fully opaque color selection, matching the classic design-tool color picker experience. For colors with transparency, adjust the alpha channel separately using the HEX/RGB/HSL Converter tool, which supports alpha values.
Yes — regardless of which control you use to arrive at a color, the underlying value is the same RGB color, just reached through a different, more visual interaction path.