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.
🌈 Browse More Tools
Complete Guide: Saturation/Brightness Visualizer
Everything you need to know about using this tool effectively
The Saturation and Brightness Visualizer lets you explore how changing saturation and brightness (lightness) affects a color while keeping the hue fixed. It provides interactive sliders for hue, saturation, and lightness/brightness with a live color preview. The tool shows the resulting color in hex, RGB, and HSL. All processing happens in the browser.
This tool renders a two-dimensional saturation-lightness grid for a fixed hue and a one-dimensional hue strip. You can click on the grid to select a saturation-lightness combination and see the resulting color. The HSL values are converted to hex and RGB for output.
Learning color theory
See how saturation and lightness affect a color at a fixed hue to understand HSL.
Finding the right shade
Use the grid to visually pick the exact saturation and lightness for a design.
Creating color scales
Move along the lightness axis to generate a shade scale at a fixed hue.
Adjusting brand colors
Explore variations of a brand color by adjusting saturation and brightness.
Set the hue
Use the hue slider to pick a base color.
Click the grid
Click on the saturation-lightness grid to select a specific combination.
View the values
The tool shows the selected color in hex, RGB, and HSL.
Copy the color
Copy the value you need.
The horizontal axis is saturation (left=0% gray, right=100% vivid).
The vertical axis is lightness (top=100% white, bottom=0% black).
The pure color is at the top-right (100% saturation, 50% lightness).
Use this tool to find subtle color variations that are hard to describe numerically.
What does the grid show?
The grid shows all combinations of saturation (x-axis) and lightness (y-axis) for the selected hue. Clicking a point selects that combination.
Is my data sent to a server?
No. All visualization happens in your browser. Nothing is transmitted.
What formats are shown?
The selected color is shown in hex, RGB, and HSL formats.
Can I change the hue?
Yes. The hue slider lets you pick any hue from 0 to 360 degrees, and the grid updates to show that hue's saturation-lightness space.
Is this the same as HSB?
HSB (Hue, Saturation, Brightness) and HSL (Hue, Saturation, Lightness) are similar but use slightly different formulas. This tool uses HSL.