Работа с RGB цветом в CSS

От автора: RGB метод сложнее в записи, чем hex цвета в CSS, однако им легче манипулировать напрямую из JavaScript. Также именно через RGB в JS задаются цвета элементов, независимо от того, в какой форме они были ранее назначены в CSS. Поэтому крайне важно понять принцип работы данного метода.

RGB расшифровывается как «red, green, blue» или красный, зеленый и синий. Как и hex цвета, RGB является аддитивной системой. Если всем компонентам задать значение 0, мы получим черный цвет. Если же задать максимальные значения, мы получим белый цвет. Изменяя данные значения, мы меняем цвет. RGB легче читается, чем hex система, однако она менее интуитивная, чем система типа HSL. Значения rgb можно задавать в диапазоне от 0 до 255:

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

10-битный цвет

Важно отметить, что значения в RGB и HSL системах можно записывать с плавающей точкой:

Так мы получаем еще больший диапазон значений: тысячи уровней каждого компонента на миллиард возможных цветовых комбинаций.

К сожалению, подавляющее большинство экранов пока что не поддерживают такой диапазон цветов, а большинство браузеров округляют значения с плавающей точкой до ближайшего целого.

Будущие версии

В будущих версиях RGB CSS спецификации будет разрешено записывать значения через пробел, а не через запятую:

Альфа компонент в цвете будет отделяться с помощью слэша:

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

Где пригодится RGB

RGBA будет полезен при создании теней и градиентов. В JS такая система замечательно подходит для определения таких аспектов элементов, как контраст и освещенность. Лично я же предпочитаю использовать HSL систему цветов, о которой я расскажу в следующей статье.

Источник: //thenewcode.com/

Редакция: Команда webformyself.

Комментарии Вконтакте: