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.
Continue Your Colors Journey
What is Saturation Brightness Visualizer?
Saturation brightness visualizer shows how hue, saturation, and brightness change a color on a two-dimensional picker grid. Move the hue slider, click the saturation-brightness square, and read the matching hex, RGB, and HSL values. Use it to choose color variants for UI palettes, brand shades, and design systems.
How does Saturation Brightness Visualizer work?
This tool renders a saturation-brightness selection grid for a fixed hue plus a separate hue strip. The selected point is converted through color-space formulas so the same color can be shown as hex, RGB, and HSL output.
Key Features
- Interactive saturation-lightness grid
- Hue slider for selecting base color
- Live color preview
- Shows hex, RGB, and HSL values
- Click-to-select on the grid
- Copy values to clipboard
- Maps HSB-style selection to hex, RGB, and HSL
- Real-time updates
Common Use Cases
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.
How to Use This Tool
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.
Pro Tips
- 1
The horizontal axis is saturation (left=0% gray, right=100% vivid).
- 2
The vertical axis is lightness (top=100% white, bottom=0% black).
- 3
The pure color is at the top-right (100% saturation, 50% lightness).
- 4
Use this tool to find subtle color variations that are hard to describe numerically.
Frequently Asked Questions
What does the grid show?
The grid shows all combinations of saturation on the x-axis and lightness on the y-axis for the selected hue. Clicking a point selects that combination.
Is my data sent to a server?
No. The saturation brightness visualizer runs locally 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.