Разница между форматами HSL и HSLA в CSS заключается в том, что HSLA расширяет HSL, добавляя альфа-канал для прозрачности. 25
HSL описывает цвета на основе оттенка (hue), насыщенности (saturation) и осветления (lightness). 3 Первое число — оттенок, выраженный в градусах от 0 до 360, определяющих позицию цвета на цветовом круге. 3 Второе число — насыщенность, определяемая в процентах от 0% до 100%, указывает, насколько насыщенным (ярким) будет цвет. 3 Третье число — осветление, оно определяется в процентах и указывает, насколько светлым или тёмным будет цвет. 3
HSLA добавляет четвёртое число в диапазоне от 0 до 1, определяющее, насколько прозрачным должен быть цвет. 3 Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0,5 — полупрозрачности. 4