Figma uses HSB

HSB stands for Hue, Saturation, and Brightness, and it is a color model that represents colors based on these three components. The HSB model is often used in design and graphics software to provide a more intuitive way to manipulate and understand color.

Here’s a brief explanation of each component in the HSB model:

1. Hue (H): Hue represents the type of color. It is measured in degrees on a color wheel, ranging from 0 to 360. In this model, 0 and 360 both represent red, with the spectrum progressing through green, blue, and other colors.


2. Saturation (S): Saturation refers to the intensity or vividness of a color. It is measured as a percentage, with 0% being a shade of gray (completely desaturated), and 100% being fully saturated, or the most vibrant version of the color.


3. Brightness (B) or Value (V): Brightness or Value represents the lightness or darkness of a color. It is also measured as a percentage, with 0% being completely black and 100% being completely white. A value of 50% is considered the normal brightness level.

The HSB color model is especially useful in graphic design and digital art because it allows designers to easily adjust and experiment with colors. For example, if you want to make a color darker, you can reduce its brightness. If you want a more vibrant color, you can increase its saturation. The hue component allows you to shift between different colors on the color wheel.