Saturation/Brightness Visualizer

Saturation/Brightness Visualizer

Explore the HSV color space with interactive 2D visualization. Navigate the saturation and brightness dimensions of colors with real-time controls, click to sample colors, and understand color relationships with comprehensive HSV color space visualization.

hsv
color space
visualization
1Interactive Color Map
Explore the 2D saturation and brightness relationship at your selected hue. Click or drag to sample colors.
S (left ↔ right), V (up ↔ down)
0% sat100% sat
100% val0% val

Drag or tap anywhere in the square to pick a color. The grid helps you see how saturation and brightness change in steps.

2Color Controls & Preview
Fine-tune your color with precise controls and view the selected color details.

Selected Color

HSV(210, 80%, 80%)
HSL(210, 6700%, 4800%)
RGB(41, 122, 204)
#297ACC

Fine-tune Color

Adjust the sliders to precisely control your color

210°
RedYellowGreenCyanBlueMagenta
80%
80%

Complete Guide: Saturation/Brightness Visualizer

Everything you need to know about using Saturation/Brightness Visualizer effectively