hsla

- Hue Saturation Lightness Alpha -

Go to the hex Color tool

A visual guide of the hsla color system

Reading The HSB Color System: A Practitioner's Primer by Erik D. Kennedy inspired me to put toghether this visual and practical guide, somewhere to have some hands-on practice on this great color system.

HUE

Hue is measured in degrees, so it is a number between 0 and 360:
Pure red is 0° (that is the same to 360°, the color wheel is a circle, remember?), pure green is 120° and pure blue is 240°.

H0° - 360°
S100%
L50%
A100%

H10°
S100%
L50%
A100%

H20°
S100%
L50%
A100%

H30°
S100%
L50%
A100%

H40°
S100%
L50%
A100%

H50°
S100%
L50%
A100%

H60°
S100%
L50%
A100%

H70°
S100%
L50%
A100%

H80°
S100%
L50%
A100%

H90°
S100%
L50%
A100%

H100°
100%
L50%
A100%

H110°
S100%
L50%
A100%

H120°
S100%
L50%
A100%

H130°
S100%
L50%
A100%

H140°
S100%
L50%
A100%

H150°
S100%
L50%
A100%

H160°
S100%
L50%
A100%

H170°
S100%
L50%
A100%

H180°
S100%
L50%
A100%

H190°
S100%
L50%
A100%

H200°
S100%
L50%
A100%

H210°
100%
L50%
A100%

H220°
S100%
L50%
A100%

H230°
S100%
L50%
A100%

H240°
S100%
L50%
A100%

H250°
S100%
L50%
A100%

H260°
S100%
L50%
A100%

H270°
S100%
L50%
A100%

H280°
S100%
L50%
A100%

H290°
S100%
L50%
A100%

H300°
S100%
L50%
A100%

H310°
S100%
L50%
A100%

H320°
100%
L50%
A100%

H330°
S100%
L50%
A100%

H340°
S100%
L50%
A100%

H350°
S100%
L50%
A100%

SATURATION

Saturation is the intensity or dullness of a color:
100% will be the richest possible version and 0% will be the gray version.

S100%
L50%
A100%

S90%
L50%
A100%

S80%
L50%
A100%

S70%
L50%
A100%

S60%
L50%
A100%

S50%
L50%
A100%

S40%
L50%
A100%

S30%
L50%
A100%

S20%
L50%
A100%

S10%
L50%
A100%

S0%
L50%
A100%

LIGHTNESS

Sometimes refered to as "Brightness", it is a number between 0 and 100, it controls how light or dark is a color:
0% lightness is black and 100% lightness is white. 50% lightness is the color in its original brightness.

S100%
L100%
A100%

S100%
L90%
A100%

S100%
L80%
A100%

S100%
L70%
A100%

S100%
L60%
A100%

S100%
L50%
A100%

S100%
L40%
A100%

S100%
L30%
A100%

S100%
L20%
A100%

S100%
L10%
A100%

100%
L0%
A100%

ALPHA

Alpha is the transparency of the color,this could be also understood as how much of the background is blended into the color:
100% is fully opaque, while 0% is completely transparent.

S100%
L50%
A100%

S100%
L50%
A90%

S100%
L50%
A80%

S100%
L50%
A70%

S100%
L50%
A60%

S100%
L50%
A50%

S100%
L50%
A40%

S100%
L50%
A30%

S100%
L50%
A20%

S100%
L50%
A10%

100%
L50%
A0%

Select a hue to watch it interact with the other values.

CUSTOM COLOR PALETTE