101. Цветовая модель RGB в CSS

Самый удобный, распространенный, универсальный способ указания цвета - RGB. RGB это аббревиатура (Red Green Blue), что означает: красный, зеленый, синий – основные цвета, путем комбинирования которых получаются все остальные цвета.

Цвет при помощи RGB можно устанавливать несколькими способами, далее подробно про каждый.

Функциональный формат записи цвета в CSS

Общий вид функционального формата: rgb(цвет), где «цвет», это комбинация из трех целых чисел (от 0 до 255) или трех процентных значений (от 0% до 100%), перечисленных через запятую. Далее несколько примеров.

rgb(255, 255, 255) /* белый цвет */
rgb(0, 0, 0) /* черный цвет */
rgb(255, 0, 0) /* красный цвет */

Далее те же цвета, только при помощи процентных значений.

rgb(100%, 100%, 100%) /* белый цвет */
rgb(0%, 0%, 0%) /* черный цвет */
rgb(100%, 0%, 0%) /* красный цвет */

Теперь давайте сделаем цвет текста заголовка каким-то рандомным цветом, например, rgb(222, 14, 100), это какой-то розовый или фиолетовый цвет. Далее пример применения.

h1 {
    color: rgb(222, 14, 100);
}

А теперь при помощи процентных значений и RGB создадим пару оттенков зеленого. Это пример 4.

p.one { color: rgb(0%, 20%, 0%); }
p.two { color: rgb(0%, 40%, 0%); }
p.three { color: rgb(0%, 60%, 0%); }
p.four { color: rgb(0%, 80%, 0%); }
p.five { color: rgb(0%, 100%, 0%); }

<p class = "one">Зеленый</p>
<p class = "two">Зеленый</p>
<p class = "three">Зеленый</p>
<p class = "four">Зеленый</p>
<p class = "five">Зеленый</p>

Кстати, процентные числа можно писать дробные, например, rgb(40.2%, 22.34%, 12%), так цвет будет более точный.

И что же произойдет, если мы выйдем за рамки диапазона значений? Ничего особенного не будет, просто значения будут интерпретированы к ближайшим границам (0% или 100%, 0 или 255). Далее пример пятый.

rgb(200%, 3100%, 101%) /* будет rgb(100%, 100%, 100%) */
rgb(-200%, 0%, 12%) /* будет rgb(0%, 0%, 12%) */
rgb(257, -130, 212) /* будет rgb(255, 0, 212) */

Допустим, у нас есть следующий CSS код: rgb(12%, 96%, 43%) и нам нужно перевести процентные значения в целые. Это делается очень просто, нужно умножить каждый уровень на 255, а потом разделить на 100, в итоге получим rgb(30.6, 244.8, 109.65), после мы округляем по правилам математики и получаем желанное: rgb(31, 245, 110).

Шестнадцатеричный формат записи цвета в CSS

Я чаще всего использую именно шестнадцатеричный формат, просто он короче. Далее пример.

p { color: #FFFFFF; } /* белый цвет текста */
p { color: #000000; } /* черный цвет текста */
p { color: #FF0000; } /* красный цвет текста */

Отличий от RGB почти нет. Указывается три цвета RRGGBB в диапазоне от 00 до FF (FF это 255 в десятичной системе). Как видите, между числами и буквами нет пробелов и прочих знаков (вторая причина, почему мне этот формат больше нравится), и шестнадцатеричный код начинается с решетки (#). Кстати, шестнадцатеричный формат называют HEX форматом. Далее пример трех одинаковых цветов, которые написаны тремя способами.

p { color: rgb(33, 12, 255); }
p { color: rgb(13%, 5%, 100%); }
p { color: #210CFF; }

Можно писать HEX формат еще и так:

p { color: #000; } /* то же самое #000000 */
p { color: #123; } /* то же самое #112233 */
p { color: #0FB; } /* то же самое #00FFBB */

Похожие уроки Codebra

1. Вам дано три цвета: #DD0022, rgb(2%, 40%, 96%) и rgb(60, 60, 60). А так же вам дан HTML и CSS код. Менять цвета, которые даны, нельзя. Что нужно сделать, подумайте сами. Просто напомню, чтобы изменить цвет текста, нужно использовать свойство color: цвет;.

– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте, Telegram.

– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить в нашей Telegram-группе.