Від автора: RGB метод складніше у записі, ніж hex кольору в CSS, проте їм легше маніпулювати безпосередньо з JavaScript. Також саме через RGB в JS задаються кольори елементів, незалежно від того, в якій формі вони були раніше призначені CSS. Тому вкрай важливо зрозуміти принцип роботи даного методу.
RGB розшифровується як «red, green, blue» або червоний, зелений і синій. Як і hex кольори, RGB є адитивною системою. Якщо всім компонентам задати значення 0, ми одержимо чорний колір. Якщо ж задати максимальні значення, ми одержимо білий колір. Змінюючи дані значення, ми змінюємо колір. RGB легше читається, ніж hex система, однак вона менш інтуїтивна, ніж система типу HSL. Значення rgb можна задавати в діапазоні від 0 до 255:
h3 {
color: rgb(100, 18, 255);
}
Або у відсотках:
h3 {
background: rgb(50%, 6%, 100%);
}
10-бітний колір
Важливо відзначити, що значення RGB, HSL системах можна записувати з плаваючою точкою:
#genera {
background-color: rgb(0.1%, 12.5%, 22%);
}
Так ми отримуємо ще більший діапазон значень: тисячі рівнів кожного компонента на мільярд можливих колірних комбінацій.
На жаль, переважна більшість екранів поки що не підтримують такий діапазон кольорів, а більшість браузерів округляють значення з плаваючою точкою до найближчого цілого.
Майбутні версії
В майбутніх версіях RGB специфікації CSS буде дозволено записувати значення через пропуск, а не через кому:
h1 {
color: rgb(60 30 200);
}
Альфа компонент в кольорі буде відділятися з допомогою слеша:
h1 {
color: rgb(60 30 200 / 0.3);
}
Такий синтаксис не підтримується жодним браузером на даний момент, використовувати його немає ніякого сенсу. Потрібно просто знати, що скоро цей синтаксис буде вживатися.
Де знадобиться RGB
RGBA буде корисний при створенні тіней і градієнтів. В JS така система чудово підходить для визначення таких аспектів елементів, як контраст і освітленість. Я особисто віддаю перевагу використовувати HSL систему кольорів, про яку я розповім в наступній статті.
