Вы знаете, что в CSS существует 24 способа задать цвет в пространстве sRGB через
rgb/rgba? Зачем так много? Ответ прост: обратная совместимость.Функция
rgb позволяет указать цвет в пространстве sRGB и принимает 3 значения от 0 до 255 для красного, зелёного и синего каналов:rgb(221, 160, 221)
Количество цвета можно указывать не только от 0 до 255, но и от 0% до 100%:
rgb(87%, 63%, 87%)
Для указания полупрозрачного цвета была добавлена функция
rgba с 4-м параметром для альфа-канала от 0 до 1:rgba(221, 160, 221, 0.3)
rgba(87%, 63%, 87%, 0.3)
Затем добавили опциональный параметр для альфа-канала в функцию
rgb, а у функции rgba четвёртый параметр сделали опциональным. Теперь между ними нет разницы:rgb(221, 160, 221)
rgba(221, 160, 221)
rgb(221, 160, 221, 0.3)
rgba(221, 160, 221, 0.3)
Потом добавили возможность указывать альфа-канал как в формате 0-1, так и в формате 0%-100%:
rgb(221, 160, 221, 30%)
rgba(221, 160, 221, 30%)
rgb(87%, 63%, 87%, 30%)
rgba(87%, 63%, 87%, 30%)
Как будто этого было мало. Появился новый синтаксис указания цвета без запятых. Старый синтаксис обозначен в спецификации как legacy, но он работает и поддерживается браузерами. Новый синтаксис выглядит так:
rgb(221 160 221)
rgb(87% 63% 87%)
Новый синтаксис поддерживает альфа-канал в формате 0-1 и 0%-100% через
/ в обеих функциях:rgb(221 160 221 / 0.3)
rgba(221 160 221 / 0.3)
rgb(221 160 221 / 30%)
rgba(221 160 221 / 30%)
Итого имеем:
rgb(221, 160, 221)
rgba(221, 160, 221)
rgb(87%, 63%, 87%)
rgba(87%, 63%, 87%)
rgb(221 160 221)
rgba(221 160 221)
rgb(87% 63% 87%)
rgba(87% 63% 87%)
rgb(221, 160, 221, 0.3)
rgba(221, 160, 221, 0.3)
rgb(87%, 63%, 87%, 0.3)
rgba(87%, 63%, 87%, 0.3)
rgb(221 160 221 / 0.3)
rgba(221 160 221 / 0.3)
rgb(87% 63% 87% / 0.3)
rgba(87% 63% 87% / 0.3)
rgb(221, 160, 221, 30%)
rgba(221, 160, 221, 30%)
rgb(87%, 63%, 87%, 30%)
rgba(87%, 63%, 87%, 30%)
rgb(221 160 221 / 30%)
rgba(221 160 221 / 30%)
rgb(87% 63% 87% / 30%)
rgba(87% 63% 87% / 30%)
Что из всего этого многообразия использовать? Я бы переходил на функцию
rgb и современный формат без запятых и со слешем. Но перечисление параметров через запятую кажется более естественным по аналогии с параметрами функций в JavaScript. Количество цвета удобнее и привычнее указывать в формате 0-255, чем в процентах. К тому же, этот формат используется во многих инструментах. Прозрачность я бы указывал в процентах. Поэтому мой выбор:rgb(221 160 221)
rgb(221 160 221 / 30%)
Для совместимости можно трансформировать это в старый формат при помощи плагина PostCSS. Но самое главное, чтобы на проекте была консистентность и использовался единый способ указания цветов. В этом могут помочь правила stylelint.