Использование цветовой модели RGB в CSS

14 июня 2017 | Опубликовано в css | 1 Комментарий »

Хотя цветовая модель RGB менее компактна в записи кода CSS, чем шестнадцатеричная, зато ей намного проще управлять напрямую через JavaScript, именно RGB используется в JavaScript для возвращения информации о цвете элементов, независимо от того, каким способом им был задан цвет в коде CSS, поэтому так полезно разобраться именно с этой цветовой моделью.

Сокращение RGB расшифровывается как «red (красный), green (зеленый), blue (синий)». Как и шестнадцатеричная цветовая модель, RGB – суммирующая цветовая модель. Задание нулевого значения для каждого компонента создаст черный цвет, а максимальных значений для всех компонентов — белый. Изменение значения любого компонента изменит цвет, хотя RGB более понятен, чем шестнадцатеричная цветовая модель, однако менее понятен, чем цветовая модель HSL.

Значения компонентов цветовой модели RGB могут быть заданы в пределах от 0 до 255:

h3 {
    color: rgb(100, 18, 255);
}

Или в процентах:

h3 {
    background: rgb(50%, 6%, 100%);
}

Десятибитный цвет

Следует отметить, что цветовые модели и 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);
}

Этот синтаксис еще не поддерживается никакими браузерами, так что пока что нет смысла его использовать, но имейте ввиду, что он будет использоваться в будущем.