Цветовые модели в компьютерной графике

Hex и RGB являются наиболее распространенными форматами для представления цвета в интернете, но они не являются наиболее полезными.

Hex и RGB цвета имеют много общего визуально не выглядят одинаково в коде.

HSL исправит это, представляя цвета с использованием атрибутов человеческого глаза интуитивно воспринимающего: оттенок, насыщенность и яркость.

Оттенок-это положение цвета на цветовом колесе — это атрибут цвета, который позволяет идентифицировать два цвета как "синий", даже если они не идентичны.

Цвет в HSL

Оттенок измеряется в градусах, где 0° - красный, 120° - зеленый, 240° - синий.

Оттенок цвета в градусах

Насыщенность-это то, как красочно или ярко выглядит цвет. 0% насыщенность серая (без цвета), а 100% насыщенность яркая и интенсивная.

Насыщенность в HSL

Без насыщенности оттенок не имеет значения-поворот оттенка, когда насыщенность равна 0%, фактически не меняет цвет вообще.

Поворот оттенка в HSL

Яркость измеряет, насколько близок цвет к черному или белому. 0% яркость-это чисто черный, 100% яркость чисто-белый, и 50% яркость чистого цвета в данный оттенок.

Яркость в HSL

Отличие HSL от HSB.

Не путайте HSL для -яркость в HSL не совпадает с яркостью в HSB.

В HSB 0% яркость всегда черная, но 100% яркость только белая, когда насыщенность составляет 0%. Когда насыщенность 100%, 100% яркости в HSB такая же как и 100% насыщенность и 50% яркости в модели HSL.

Цвет в моделях HSL и HSB

HSB более распространен, чем HSL в программном обеспечении для проектирования, но браузеры понимают только половину, поэтому, если вы разрабатываете продукт для интернета, HSL должен быть вашим оружием выбора.