Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Использование цветовой модели 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);
}

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

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

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

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:




Комментарии

  1. lvivduncan
    Thumb up Thumb down 0

    rgba (60,30,200,0.3)

    Ответить

Оставить ответ


− 5 = три

Вставить изображение